# Pricing tiers

> Stacked tier rows with Popular badge, price, and CTA button.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/item-18).

- Page, with a live preview: https://shadcn.exchange/r/flx/item-18
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/item-18-light-eadbb751d6acc495.png
- Registry item: https://ui.flexnative.com/r/item-18.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/item-18.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `item`, `badge`, `button`

## Files

### `registry/patterns/item/item-18.tsx`

```tsx
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from '@/components/ui/item'

const tiers = [
  {
    name: 'Starter',
    price: '$0',
    description: 'For tinkering and side projects.',
    cta: 'Start free',
    popular: false,
  },
  {
    name: 'Pro',
    price: '$24/mo',
    description: 'For solo founders and small teams.',
    cta: 'Upgrade',
    popular: true,
  },
  {
    name: 'Team',
    price: '$96/mo',
    description: 'Shared workspaces and SSO.',
    cta: 'Contact sales',
    popular: false,
  },
]

export function Item18() {
  return (
    <ItemGroup className="w-full max-w-md">
      {tiers.map((t) => (
        <Item key={t.name} variant="outline">
          <ItemContent>
            <ItemTitle>
              {t.name}
              {t.popular && <Badge>Popular</Badge>}
              <span className="text-muted-foreground text-xs font-normal">
                {t.price}
              </span>
            </ItemTitle>
            <ItemDescription>{t.description}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant={t.popular ? 'default' : 'outline'} size="sm">
              {t.cta}
            </Button>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  )
}
```