Bar KPI Card
What is this?
A white KPI tile: a label, a big figure, a delta pill, and a row of twelve vertical bars. When the card comes into view, the bars rise from the baseline one after another, left to right, and the delta pill fades in. The last bar turns green or red with the trend. Swap the label, value, delta, and points, then drop it into a dashboard row or an analytics feature grid.
Bar KPI Card
A white KPI tile: a label, a big figure, a delta pill, and a row of twelve vertical bars. When the card comes into view, the bars rise from the baseline one after another, left to right, and the delta pill fades in. The last bar turns green or red with the trend. Swap the label, value, delta, and points, then drop it into a dashboard row or an analytics feature grid.
Verified Technical Spec
- Animation
- CSS / Tailwind
- Reduced motion
- Verified
- Keyboard focus
- Not detected in source
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Finished React · TypeScript · Tailwind CSS · Lucide UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
- Lucide-react 1.23.0
Tech Stack
- React
- TypeScript
- Tailwind CSS
- Lucide
Version 1.0.0