BlocksPricing Sections
Pricing Sections
Pricing table layouts with tier comparison and call-to-action patterns.
Gradient Pricing
Block preview — compose from component imports
Gradient Pricing
Three-tier pricing table with gradient-highlighted recommended plan and moving border CTA.
IO Context
The moving border draws attention to the recommended tier. Use gradient sparingly — only on the featured plan.
Components used
Moving BorderBackground Gradient
bash
// Install the components used in this block
npx shadcn@latest add @aceternity/moving-border
npx shadcn@latest add @aceternity/background-gradientSpotlight Pricing
Block preview — compose from component imports
Spotlight Pricing
Pricing cards with spotlight hover effect and clear feature comparison list.
IO Context
The spotlight effect makes each tier feel interactive and considered. Users explore by hovering before committing.
Components used
Card SpotlightHover Border Gradient
bash
// Install the components used in this block
npx shadcn@latest add @aceternity/card-spotlight
npx shadcn@latest add @aceternity/hover-border-gradient