A beautiful, interactive React component for displaying human body anatomy with customizable muscle groups. Perfect for fitness apps, medical applications, workout trackers, and health monitoring tools.
npm install react-muscle-highlighterbash
npm install react-muscle-highlighter
or
yarn add react-muscle-highlighter
or
pnpm add react-muscle-highlighter
`
🚀 Quick Start
`tsx
import Body, { type ExtendedBodyPart } from "react-muscle-highlighter";
function App() {
const bodyData: readonly ExtendedBodyPart[] = [
{ slug: "chest", color: "#ff0000", intensity: 1 },
{ slug: "triceps", color: "#00ff00", intensity: 2 },
{ slug: "abs", color: "#0000ff" },
] as const;
return (
data={bodyData}
📸 Examples
$3
$3
$3
$3
📚 API Documentation
$3
The main component that renders the interactive body visualization.
#### Props
| Prop | Type | Default | Description |
| -------------------- | ------------------------------------------------------------ | ------------------------ | ---------------------------------------------------- |
| data | ReadonlyArray | Required | Array of body parts to highlight/stylize |
| side | "front" \| "back" | "front" | Which side of the body to display |
| gender | "male" \| "female" | "male" | Gender of the body model |
| scale | number | 1 | Scale factor for the body size |
| colors | ReadonlyArray | ["#0984e3", "#74b9ff"] | Color gradient array for intensity levels |
| onBodyPartPress | (part: ExtendedBodyPart, side?: "left" \| "right") => void | undefined | Callback when a body part is clicked |
| border | string \| "none" | "#dfdfdf" | Border color for body outline (use "none" to hide) |
| disabledParts | Slug[] | [] | Array of body part slugs that should be disabled |
| hiddenParts | Slug[] | [] | Array of body part slugs that should be hidden |
| defaultFill | string | "#3f3f3f" | Default fill color for unhighlighted body parts |
| defaultStroke | string | "none" | Default stroke color for body parts |
| defaultStrokeWidth | number | 0 | Default stroke width for body parts |
$3
#### ExtendedBodyPart
Represents a body part with styling and interaction options.
`typescript
interface ExtendedBodyPart {
slug?: Slug; // Body part identifier
color?: string; // Color to fill the body part
intensity?: number; // Intensity level (1-based index into colors array)
side?: "left" | "right"; // Specific side to highlight (optional)
styles?: BodyPartStyles; // Per-part style overrides
}
`
#### BodyPartStyles
Custom styles for individual body parts.
`typescript
interface BodyPartStyles {
fill?: string; // Fill color
stroke?: string; // Stroke color
strokeWidth?: number; // Stroke width
}
`
#### Slug
Available body part identifiers.
`typescript
type Slug =
| "abs" // Abdominal muscles
| "adductors" // Inner thigh muscles
| "ankles" // Ankle joints
| "biceps" // Biceps brachii
| "calves" // Calf muscles
| "chest" // Pectoral muscles
| "deltoids" // Shoulder muscles
| "feet" // Feet
| "forearm" // Forearm muscles
| "gluteal" // Gluteal muscles
| "hamstring" // Hamstring muscles
| "hands" // Hands
| "hair" // Hair (back view)
| "head" // Head
| "knees" // Knee joints
| "lower-back" // Lower back muscles
| "neck" // Neck
| "obliques" // Oblique muscles
| "quadriceps" // Quadriceps muscles
| "tibialis" // Tibialis anterior
| "trapezius" // Trapezius muscle
| "triceps" // Triceps brachii
| "upper-back"; // Upper back muscles
`
💡 Usage Examples
$3
`tsx
import Body, { type ExtendedBodyPart } from "react-muscle-highlighter";
const bodyData: readonly ExtendedBodyPart[] = [
{ slug: "chest", color: "#ff0000" },
{ slug: "biceps", color: "#00ff00" },
];
;
$3
Intensity levels map to the colors array (1-based indexing).
`tsx
const bodyData: readonly ExtendedBodyPart[] = [
{ slug: "chest", intensity: 1 }, // Uses colors[0]
{ slug: "biceps", intensity: 2 }, // Uses colors[1]
{ slug: "triceps", intensity: 1 }, // Uses colors[0]
];
;
$3
Highlight only the left or right side of a body part.
`tsx
const bodyData: readonly ExtendedBodyPart[] = [
{ slug: "biceps", color: "#ff0000", side: "left" }, // Only left bicep
{ slug: "triceps", color: "#00ff00", side: "right" }, // Only right tricep
];
;
$3
Override default styles for specific body parts.
`tsx
const bodyData: readonly ExtendedBodyPart[] = [
{
slug: "chest",
color: "#ff0000",
styles: {
fill: "#ff0000",
stroke: "#000000",
strokeWidth: 2,
},
},
];
;
$3
`tsx
const handleBodyPartClick = (
part: ExtendedBodyPart,
side?: "left" | "right"
) => {
console.log(Clicked: ${part.slug}${side ? (${side}) : ""});
// Your logic here
};
;
$3
Disabled parts appear grayed out and are not clickable.
`tsx
$3
Completely hide certain body parts from rendering.
`tsx
$3
`tsx
$3
`tsx
$3
`tsx
data={bodyData}
$3
`tsx
import { useState } from "react";
import Body, {
type ExtendedBodyPart,
type Slug,
} from "react-muscle-highlighter";
function WorkoutTracker() {
const [selectedPart, setSelectedPart] = useState(null);
const [workoutData, setWorkoutData] = useState>({});
const bodyData: readonly ExtendedBodyPart[] = Object.entries(workoutData)
.map(([slug, intensity]) => ({
slug: slug as Slug,
intensity: Math.min(intensity, 3), // Max intensity of 3
}))
.filter((part) => part.intensity > 0);
const handlePartClick = (part: ExtendedBodyPart) => {
setSelectedPart(part.slug || null);
if (part.slug) {
setWorkoutData((prev) => ({
...prev,
[part.slug!]: (prev[part.slug!] || 0) + 1,
}));
}
};
return (
Workout Tracker
{selectedPart && Selected: {selectedPart}
}
data={bodyData}
side="front"
gender="male"
colors={["#ff6b6b", "#ffa500", "#ffd700"]}
onBodyPartPress={handlePartClick}
scale={1.5}
/>
data={bodyData}
side="back"
gender="male"
colors={["#ff6b6b", "#ffa500", "#ffd700"]}
onBodyPartPress={handlePartClick}
scale={1.5}
/>
🎨 Styling
The component uses inline styles and SVG, making it easy to integrate into any design system. All colors accept any valid CSS color value (hex, rgb, rgba, hsl, named colors, etc.).
$3
When styling a body part, the following priority applies:
1. Per-part styles.fill (highest priority)
2. color prop
3. Intensity-based color (from colors array)
4. defaultFill (lowest priority)
🔧 Development
$3
- Node.js 16+
- npm, yarn, or pnpm
$3
`bash
npm run build
`
$3
`bash
npm run dev
``