Animated prices
FreePrices count to their new value when the billing period changes, announced once for screen readers.
pricing-13 · v1.1.0 · Pricing block 13 of 29
npx shadcn@latest add @lib/pricing-13About this pricing block
Animated prices is a free pricing block for shadcn/ui. Prices count to their new value when the billing period changes, announced once for screen readers. It's one React file built on the shadcn/ui Button, Toggle group components, uses only your theme tokens, animates in as it scrolls into view and stays still for visitors who ask for less motion, and works in Next.js, Vite, React Router, TanStack Start and Astro.
What's inside
- Switch between views
- Interactive state, no wiring needed to try it
- Entrance animation, with a reduced-motion fallback
- Light and dark mode from your theme
- Responsive, from phone to desktop
What it installs
- @lib/cells
- @lib/section-frame
- shadcn/ui: button, toggle-group
- npm: lucide-react
Versions
- v1.1.0 Buttons follow your theme
- v1.0.1 Grids that fit every theme
- v1.0.0 20 new pricing sections
More pricing blocks
Pricing tables with monthly and yearly toggles, comparisons, usage calculators, credits and one-time plans.