Animated Pricing Sections for React
Plans and how they compare, so the choice takes a minute. Free to install, each with the components it's built around.
Jot Pricing
A pricing section where the handwritten notes do the selling. A note beside the billing switch points at Yearly and rewrites itself to a thank-you when the visitor switches, while every price rolls to its new number. Drag the device slider and the note above the plans swings its arrow to the one that fits.
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/jot-pricingEcho Reel Pricing
A pricing section where the plan picker is one giant word. Click the plan printed above or below, or press ↑ ↓, and the reel turns it into the middle and inks it in, while the card beside it rolls the price and the monthly photo count with an Odometer. A monthly or yearly switch rolls the price too.
- Packages
clsx,tailwind-merge,motion
npx shadcn@latest add @keyframeui/echo-reel-pricingPlan Fit Pricing
A pricing section for an AI dubbing tool, priced by the minutes you dub. Drag the usage slider and four plan cards measure it against their allowances: past one, its overage shows as a hatched stretch and its price climbs, until the highlight glides to the plan that costs less. Monthly and yearly billing count every price over, and a volume card beside "In every plan" lights up at the slider's far end.
- Built with
- Plan Fit
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/plan-fit-pricingBefore 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.