DesignLayer
Count-Up Trend Stat
Back to components
What is this?
The quietest white stat card: a label, one large figure, a trend pill, and a short caption, with no chart. When the card comes into view, the figure counts up from zero, then the pill and caption fade in and the arrow pops once. Swap the label, value, delta, and caption, then drop it into a dashboard header, a live counter, or a stats row.
Component
Count-Up Trend Stat
The quietest white stat card: a label, one large figure, a trend pill, and a short caption, with no chart. When the card comes into view, the figure counts up from zero, then the pill and caption fade in and the arrow pops once. Swap the label, value, delta, and caption, then drop it into a dashboard header, a live counter, or a stats row.
Checking access…
Live PreviewVerified 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