Health Bar
Free
An HP bar that drops instantly on a hit while a lighter chip bar trails behind, and glows on heal.
HP100 / 100
Customize
100
Show numbers
#ff784f
#ffc24a
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/health-bar.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/health-bar.tsx.
Usage
import { HealthBar } from "@/components/ui/health-bar";
export function PlayerHud({ hp }: { hp: number }) {
return <HealthBar value={hp} max={100} />;
}Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current health. Lower it to deal damage, raise it to heal. |
| max | number | 100 | Maximum health. |
| color | string | "#ff784f" | Fill color of the health bar. |
| chipColor | string | "#ffc24a" | Color of the chip bar that trails behind after damage. |
| healColor | string | "#6ee09a" | Glow and fill color shown while healing. |
| showNumbers | boolean | true | Show the current and maximum values next to the label. |
| label | string | "HP" | Label above the bar, also used as its accessible name. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion