Animated Stats Sections for React
The numbers behind the claim, with the context that makes them believable. Free to install, each with the components it's built around.
Margin Note Stats
A stats section where the chart explains itself. Margin Note reads three months of fares, stops where the price moved and writes why in the margin (a new flight, a festival, the last two weeks), then the takeaway; three plain numbers sit underneath.
- Built with
- Margin Note
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/margin-note-statsSkyline Stats
A stats section where the chart is a city: each team is a tower as tall as its count of release trains, with the number on a sign on its roof. Hover or focus a tower and it lights up floor by floor while the others dim. Beside it, a serif headline and three figures in a ruled list.
- Built with
- Skyline
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/skyline-statsBefore your first install
These commands use the @keyframeui registry. Add it to components.json once per project, then every command here works as written, and each block brings its components with it.