# Pricing

> Five pricing sections — AI tiers with usage multipliers, a team calculator, usage-based volume pricing, a two-plan duo with a travelling glow border and a keyboard-driven terminal table — where prices roll digit by digit on every change.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/pricing-blocks
- Install: `npx shadcn@latest add @geturui-pro/pricing-blocks`
- Dependencies: motion, lucide-react

## Variants

### AI tiers

Free, Pro and Team cards with a billing toggle and usage-multiplier tabs; prices roll and each plan's credit meter grows with the multiplier.

Install: `npx shadcn@latest add @geturui-pro/pricing-blocks-ai-tiers`

```tsx
import { AiTiers } from "@/components/blocks/pricing-blocks/ai-tiers";

export default function Pricing() {
  return (
    <AiTiers
      defaultBilling="yearly"
      multipliers={[
        { id: "1x", label: "1× usage", factor: 1, priceFactor: 1 },
        { id: "5x", label: "5× usage", factor: 5, priceFactor: 4 },
      ]}
      onSelectPlan={(s) => console.log(s.planId, s.price)}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| plans | `AiTierPlan[]` | — | { id, name, tagline, monthly, yearly, credits, fixed?, features, cta?, featured?, badge? }. fixed plans ignore the multiplier. |
| multipliers | `UsageMultiplier[]` | — | { id, label, factor, priceFactor }. Credits scale by factor, price by priceFactor. |
| defaultBilling | `"monthly" | "yearly"` | "yearly" | Initial billing period. |
| defaultMultiplier | `string` | — | Id of the multiplier selected first. |
| yearlyNote | `string` | "2 months free" | Chip inside the yearly tab. |
| creditUnit | `string` | "credits / mo" | Unit after the credit count. |
| currency | `string` | "$" | Currency prefix. |
| onSelectPlan | `(selection: AiTierSelection) => void` | — | Called with plan, billing, multiplier, price and credits. |
| className | `string` | — | Classes for the outer section. |

### Team calculator

Seat slider, a discount staircase that lights the active tier and add-on switches feeding a receipt whose total rolls digit by digit.

Install: `npx shadcn@latest add @geturui-pro/pricing-blocks-team-calculator`

```tsx
import { TeamCalculator } from "@/components/blocks/pricing-blocks/team-calculator";

export default function Pricing() {
  return <TeamCalculator seatPrice={18} defaultSeats={32} onQuote={(q) => console.log(q.monthly)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| seatPrice | `number` | 18 | Price per seat per month before discounts. |
| minSeats / maxSeats / defaultSeats | `number` | 1 / 150 / 32 | Slider range and starting value. |
| tiers | `CalculatorTier[]` | — | { from, discount, label? } ascending by from. Drawn as the staircase. |
| addOns | `CalculatorAddOn[]` | — | { id, label, description?, perSeat, defaultOn? } shown as switches. |
| yearlyDiscount | `number` | 0.15 | Extra fraction off when billed yearly. |
| defaultYearly | `boolean` | true | Start on yearly billing. |
| cta | `string` | "Start a 14-day trial" | Button label under the total. |
| onQuote | `(quote: TeamQuote) => void` | — | Called with seats, billing, add-ons and monthly total. |
| className | `string` | — | Classes for the outer section. |

### Usage slider

Usage-based pricing: drag a volume slider over log-spaced stops while graduated price bands fill and the monthly estimate rolls.

Install: `npx shadcn@latest add @geturui-pro/pricing-blocks-usage-slider`

```tsx
import { UsageSlider } from "@/components/blocks/pricing-blocks/usage-slider";

export default function Pricing() {
  return (
    <UsageSlider
      unit="events"
      baseFee={29}
      bands={[
        { upTo: 100_000, per1k: 0 },
        { upTo: 1_000_000, per1k: 0.4 },
        { upTo: Infinity, per1k: 0.15 },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| unit | `string` | "events" | Plural unit name. |
| stops | `number[]` | — | Snap points for the slider, ascending; spread them roughly logarithmically. |
| defaultVolume | `number` | 2500000 | Starting volume; snaps to the nearest stop. |
| bands | `UsageBand[]` | — | { upTo, per1k } graduated bands. Use Infinity for the last band; per1k 0 shows Included. |
| baseFee | `number` | 29 | Flat platform fee per month. |
| cta | `string` | "Start sending events" | Button label. |
| onQuote | `(quote: { volume: number; total: number }) => void` | — | Called when the button is pressed. |
| className | `string` | — | Classes for the outer section. |

### Plan duo

Two plans side by side; a solid volt glow travels around the featured card's border while a yearly switch rolls both prices.

Install: `npx shadcn@latest add @geturui-pro/pricing-blocks-plan-duo`

```tsx
import { PlanDuo } from "@/components/blocks/pricing-blocks/plan-duo";

export default function Pricing() {
  return <PlanDuo glowDuration={6} onSelectPlan={(id, yearly) => console.log(id, yearly)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| plans | `[DuoPlan, DuoPlan]` | — | { id, name, audience, monthly, yearly, lead?, features, cta?, featured?, note? }. |
| defaultYearly | `boolean` | true | Start on yearly prices. |
| glowDuration | `number` | 6 | Seconds for the glow to travel once around the featured card. |
| currency | `string` | "$" | Currency prefix. |
| onSelectPlan | `(planId: string, yearly: boolean) => void` | — | Called from each plan's button. |
| className | `string` | — | Classes for the outer section. |

### Command deck

Monospaced pricing table for developer tools: arrow keys or j/k move a springy row highlight, B flips billing and Enter writes the CLI command.

Install: `npx shadcn@latest add @geturui-pro/pricing-blocks-command-deck`

```tsx
import { CommandDeck } from "@/components/blocks/pricing-blocks/command-deck";

export default function Pricing() {
  return <CommandDeck bin="forge" onConfirm={(id, yearly) => console.log(id, yearly)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| plans | `DeckPlan[]` | — | { id, name, monthly, yearly, specs, recommended? }. specs keys match columns. |
| columns | `DeckColumn[]` | — | { key, label, wide? }. wide columns hide on narrow containers. |
| bin | `string` | "forge" | CLI name used in the prompt line. |
| title | `string` | "pricing.toml" | Window title. |
| defaultYearly | `boolean` | false | Start on yearly billing. |
| onConfirm | `(planId: string, yearly: boolean) => void` | — | Called on Enter or a second click on the active row. |
| className | `string` | — | Classes for the outer section. |

## Accessibility

- Billing and multiplier toggles are tablists with arrow-key navigation; prices keep their full value in an aria-label while digits roll.
- Sliders expose role="slider" with aria-valuetext that reads the volume and price, and support arrows, Page Up/Down, Home and End.
- Every motion beyond a fade (meters, glow border, row highlight, caret) is disabled under reduced motion.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.