Period Compare Card
What is this?
A white comparison tile: a label, a big figure, a delta pill, and two columns for last period and this period. When the card comes into view, both columns grow from the baseline to their relative heights, the figure counts up, and the delta pill fades in. Swap the label, the two values, the delta, and the period names, then drop it into a weekly report or an analytics feature grid.
Period Compare Card
A white comparison tile: a label, a big figure, a delta pill, and two columns for last period and this period. When the card comes into view, both columns grow from the baseline to their relative heights, the figure counts up, and the delta pill fades in. Swap the label, the two values, the delta, and the period names, then drop it into a weekly report 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