Yearly discount
FreeTwo plans with a monthly and yearly switch, a discount badge and the amount actually billed.
pricing-11 · v1.0.0 · Pricing block 11 of 30
npx shadcn@latest add @lib/pricing-11About this pricing block
Yearly discount is a free pricing block for shadcn/ui. Two plans with a monthly and yearly switch, a discount badge and the amount actually billed. It's one React file built on the shadcn/ui Badge, 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/section-frame
- shadcn/ui: badge, button, toggle-group
- npm: lucide-react
Versions
- 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.