# Seat Stepper Pricing block

> 4-tier pricing table with a monthly or yearly toggle and a seat stepper that reprices Team

SaaS plans in one Card: a Save 20% Badge on the yearly tab, a tinted featured plan, tiers that list only what they add, Tooltip feature hints. Uses ReUI Number Field, Badge, shadcn Tabs, Button. For pricing page, subscription tiers, per-seat plans.

- Type: Pro block
- Category: [Pricing](https://web.dev.reui.io/blocks/marketing/pricing.md)
- Page: https://web.dev.reui.io/blocks/marketing/pricing/pricing-1
- MCP: `get_block("pricing-1")`
- Built with: Badge, Button, Card, Number Field, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A seat stepper you drag or tap to reprice Team, in 4 plan columns joined in one Card with a hover hint per feature

## Agent notes

- `minSeats`, `maxSeats` and `defaultSeats` on the one seats plan in `PLANS` set the stepper range; no other plan has a stepper
- The `seats` state lives in `PlanColumn` and never reaches the plan link, so pass it to your own checkout
- Yearly figures derive from `YEARLY_DISCOUNT_PERCENT` through `billedAt`; pick a percent that divides each rate or prices round

## When not to use

- Seat counts picked from team size tabs, with owned plans shown disabled: use [Per-Seat Pricing](https://web.dev.reui.io/blocks/marketing/pricing/pricing-3.md) (`get_block("pricing-3")`)
- Back office staff editing plan tiles, prices and status toggles for the catalog: use [Plan Catalog](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-2.md) (`get_block("solution-billing-2")`)

## Install

```bash
npx shadcn@latest add @reui/pricing-1
```

## About Pricing blocks

### When to use

- A public plans section with 3 or 4 tiers side by side, each with a price, its inclusions and its own button
- A plan comparison matrix that lines up each tier's limits and included features row by row
- An upgrade dialog or paywall inside the product, where a user picks a plan and a billing period

### When not to use

- A back office where staff edit the plan catalog, coupons or a customer's subscription: use the [Billing blocks](https://web.dev.reui.io/blocks/solutions/billing.md)
- Store products weighed side by side on specs and star ratings before a purchase: use the [Comparison blocks](https://web.dev.reui.io/blocks/ecommerce/comparison.md)
- One plan choice made as a single input inside a signup or checkout form: use [Radio Group](https://web.dev.reui.io/components/radio-group.md) (`get_component("radio-group")`)

### Agent notes

- Each plan's `href` in `PLANS` is a hash placeholder that its plan button links to; point it at your signup, checkout or sales route
- Plan prices print through a `currency` formatter pinned to en-US dollars with `maximumFractionDigits` 0; edit it for cents or another currency

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.