Per seat pricing on paper: a team size slider with a filling crowd of dots, volume bands, and three plans whose totals roll digit by digit with a per seat breakdown.
Pricing that scales down
Seats 11 to 50 are 15 percent off, every seat after 50 is 30 percent off. Drag to see your exact bill.
24seats
For small crews getting organized.
Up to 10 seats
Shared workflows for growing teams.
$14.60 per seat, billed yearly
Controls for regulated operations.
$23.36 per seat, billed yearly
npx shadcn@latest add https://hyperblur.dev/r/pricing-seats-slider.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-seats-slider.tsx.
import { PricingSeatsSlider } from "@/components/hyperblur/pricing-seats-slider"
<PricingSeatsSlider onPlanSelect={(plan, seats, total) => console.log(plan.name, seats, total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing that scales down" | Small label above the title. |
| title | string | "Pay per seat. The more people, the less each costs." | Section heading. |
| subtitle | string | "Seats 11 to 50 are 15 percent off..." | Supporting text. |
| plans | { name: string; description: string; seatPrice: number; maxSeats?: number; features: string[]; cta: string }[] | Starter, Team, Business | Plans. A plan with maxSeats is disabled above that count. |
| bands | { upTo: number; discount: number }[] | 1-10 list, 11-50 15% off, 51+ 30% off | Graduated discount bands applied seat by seat. Use Infinity for the last band. |
| min | number | 1 | Smallest team size. |
| max | number | 200 | Largest team size. |
| seats | number | Controlled team size. | |
| defaultSeats | number | 24 | Initial team size when uncontrolled. |
| onSeatsChange | (seats: number) => void | Called while the slider moves. | |
| defaultBilling | "monthly" | "yearly" | "yearly" | Initial billing period. |
| yearlyDiscount | number | 0.2 | Discount applied to every seat on yearly billing. |
| currency | string | "$" | Currency symbol. |
| onPlanSelect | (plan: PricingSeatsPlan, seats: number, total: number, billing: "monthly" | "yearly") => void | Called when a plan button is pressed. | |
| accent | string | "#6d4aff" | Color of the slider, crowd, recommended plan and checks. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |