# Pricing section

> Three tiers with a monthly/yearly toggle whose prices roll.

Block · Free · https://lodeui.com/blocks/pricing-section

## When to use

- Marketing and pricing pages.

## When not to use

- Inside the app: use billing settings.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/pricing-section.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { PricingSection } from "@/components/blocks/pricing-section";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <PricingSection />
    </main>
  );
}
```

Built from: Button, Number ticker, Segmented control

## API reference

### PricingSection

Three tiers with a monthly / yearly toggle, rolling prices and a featured tier. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Switch monthly and yearly |
| Tab | Reach each tier's button |

## Accessibility

- The cycle switch is a labelled radio group.
- Prices are read as final amounts.

## Motion

- Prices roll between monthly and yearly.

## Responsive behavior

- Tiers stack below 768px; the featured tier keeps its border and shadow.

## Performance

- Static apart from the price tickers.

## Notes for AI

- Edit the tiers array; features are plain strings.

## Related

- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.