## Seat Pricing (S—102)

A per-seat price card: drag or step the seat count and watch the monthly total and volume discount update.

- URL: https://sundaeui.dev/components/seat-pricing
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/seat-pricing.json`
- Tags: seats, plan, volume-discount, saas, pricing, slider

A seat slider with − / + buttons on either side. The total counts to its new value, and once a volume tier kicks in a line appears showing the per-seat rate and how much is saved.
Tiers are data, so the same card handles any per-unit pricing: seats, projects, GB.

### Usage

```tsx
import { SeatPricing } from '@/components/sundae/seat-pricing'

<SeatPricing />
```

### Props

- `tiers` (`{ from: number; price: number }[]`, required): Per-seat price in cents from a seat count.
- `min / max` (`number`, default `1 / 100`): Seat bounds.
- `onSeatsChange` (`(n: number) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Team plans, B2B pricing pages, upgrade dialogs.

### When not to use

- Flat pricing: show plain plan cards.

### Accessibility

- The seat count is a labelled range input with − / + buttons.
- The total is announced politely after changes settle.
- Reduced motion removes the movement and keeps every state change.