Pricing Section

Installation

The CLI installs the block with the shadcn button plus Animated Number and Blur Fade from this registry.

npx shadcn@latest add https://ui.thilina.dev/r/pricing-section.json

Usage

import { PricingSection } from "@/components/blocks/pricing-section";

export default function Page() {
  return <PricingSection />;
}

Tiers live in the TIERS array at the top of the file: name, monthly and yearly price, feature list, and a featured flag that highlights one card. When the billing period switches, prices glide to their new value instead of snapping, so the comparison keeps its context.

Accessibility

The billing switch is a real radio group (role="radiogroup" with aria-checked on each option), animated prices expose only their final value to screen readers, and the entrance stagger disappears under prefers-reduced-motion.