Seat Pricing
A per-seat price card: drag or step the seat count and watch the monthly total and volume discount update.
seat-pricing.tsxseat-pricing.css
Checking access…
Overview
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.
When to use
- Team plans, B2B pricing pages, upgrade dialogs.
When not to use
- Flat pricing: show plain plan cards.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/seat-pricing.json$
npx shadcn@latest add https://sundaeui.dev/r/seat-pricing.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/seat-pricing.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/seat-pricing.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy seat-pricing.tsx and seat-pricing.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { SeatPricing } from '@/components/sundae/seat-pricing'
<SeatPricing />Props
| Prop | Type | Default |
|---|---|---|
tiers*Per-seat price in cents from a seat count. | { from: number; price: number }[] | — |
min / maxSeat bounds. | number | 1 / 100 |
onSeatsChangeCalled on change. | (n: number) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-stp; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Seat Pricing free?
- Seat Pricing is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Seat Pricing?
- Run npx shadcn@latest add https://sundaeui.dev/r/seat-pricing.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Seat Pricing support keyboard and screen readers?
- The seat count is a labelled range input with − / + buttons. The total is announced politely after changes settle.
- Does Seat Pricing respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Billing Toggle
Checkout · Refined - Pro
Plan Comparison
Checkout · Refined - Pro
Seat Checkout
Checkout · Understated - Pro
Trial Countdown
Checkout · Refined - Pro
Seat Map
Checkout · Refined - Pro
Tender Checkout
Checkout · Refined