BMI Card
An animated circular BMI gauge with configurable shape, thresholds, and color coding. Supports circle, semicircle, and arc layouts.
Demo
24Your BMI
Balanced
You're in a healthy range.
Target reached!
This treatment may not be for you.
Installation
pnpm dlx shadcn@latest add @turbopills-ui/bmi-cardnpx shadcn@latest add @turbopills-ui/bmi-cardyarn dlx shadcn@latest add @turbopills-ui/bmi-cardbunx shadcn@latest add @turbopills-ui/bmi-cardUsage
tsx
tsx
Examples
Semicircle
28Your BMI
High Risk
Excess weight may be affecting your health.
You may be eligible for treatment & promotional offers.
Arc
22Your BMI
Balanced
You're in a healthy range.
Target reached!
This treatment may not be for you.
Full Fill Mode
The entire track is filled with the threshold color when fillMode="full".
26Your BMI
At Risk
You're approaching an unhealthy range.
You may be eligible for treatment & promotional offers.
Value Outside
Display the BMI value next to the gauge instead of centered inside.
High Risk
Excess weight may be affecting your health.
Your BMI29
You may be eligible for treatment & promotional offers.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bmi | number | — | Required. The BMI value to display. |
shape | "circle" | "semicircle" | "arc" | "circle" | Shape of the gauge. |
size | number | 132 | Width and height of the SVG in pixels. |
strokeWidth | number | 10 | Thickness of the progress ring. |
minValue | number | 5 | Minimum BMI for the scale range. |
maxValue | number | 30 | Maximum BMI for the scale range. |
fillMode | "full" | "progress" | "progress" | "progress" fills proportionally; "full" fills the entire track. |
valuePosition | "inside" | "outside" | "inside" | Where to render the numeric BMI value. |
showThresholdMarkers | boolean | true | Show tick marks at threshold boundaries. |
showStatusMessage | boolean | true | Show the status message below the gauge. |
animated | boolean | true | Animate the progress ring on mount/change. |
animationDuration | number | 800 | Animation duration in milliseconds. |
label | string | "Your BMI" | Label displayed below the value. |
tooltipContent | ReactNode | eligibility text | Content for the info tooltip. Pass null to hide. |
thresholds | BMIThreshold[] | DEFAULT_BMI_THRESHOLDS | Custom threshold configuration array. |
className | string | — | Additional CSS classes for the wrapper. |
BMIThreshold
| Property | Type | Description |
|---|---|---|
maxBmi | number | Upper bound of this BMI range (Infinity for the last). |
isTargetRange | boolean? | Marks this range as the healthy target. |
title | string | Display title (e.g. "Balanced"). |
description | string | Short description shown next to the gauge. |
color | string | [string, string] | Solid color or gradient [start, end]. |
statusMessage | { text: string; className: string }? | Optional banner shown below the gauge. |