Motion UISections3 sections

Pricing sections

Monthly to yearly price morphs, usage calculators and comparison tables with an animated FAQ.

Pricing: Recommended border beam

An example of a three-tier pricing section that draws attention to the recommended plan with an animated arc of light around its border, in Motion for React.

npx shadcn@latest add @motion/border-beam
Components usedBorderBeam
MotionScore

Pricing tiers

An example of an animated pricing section with a monthly to yearly toggle and prices that morph digit by digit in Motion for React.

npx shadcn@latest add @motion/pricing-tiers-morph
Components usedSegmentedToggle
MotionScore

Usage pricing calculator

An example of a usage-based pricing calculator with a draggable events slider, live animated prices and tier breakpoints in Motion for React.

npx shadcn@latest add @motion/pricing-usage-slider
MotionScore

More categories

Browse the rest of the Motion UI section library.