Skip to content
GetUrUI

Pricing

.md

Pricing table with a volt billing toggle, a seat slider with volume-discount tiers and plan prices that roll digit by digit whenever billing or seats change; the featured plan glows.

pricingplansbillingtogglesliderseatssaas

Installation

$npx shadcn@latest add @geturui/pricing-section
Download source (.zip)

Also installs: Animated Badge, Button, Odometer Number, Range Slider, Tabs

Usage

usage.tsx
1import { PricingSection } from "@/components/blocks/pricing-section";
2
3export default function Pricing() {
4  return (
5    <PricingSection
6      defaultBilling="yearly"
7      maxSeats={100}
8      tiers={[
9        { from: 1, discount: 0 },
10        { from: 20, discount: 0.1 },
11        { from: 50, discount: 0.2 },
12      ]}
13      onSelectPlan={({ planId, billing, seats }) => {
14        window.location.href = `/checkout?plan=${planId}&billing=${billing}&seats=${seats}`;
15      }}
16    />
17  );
18}

Props

PropTypeDefaultDescription
plansPricingPlan[]—{ id, name, description, monthly, yearly, features, cta?, featured?, badge? }. Prices are per seat per month.
billing"monthly" | "yearly"—Controlled billing period.
defaultBilling"monthly" | "yearly""yearly"Initial period when uncontrolled.
onBillingChange(billing) => void—Called when the toggle changes.
tiers{ from: number; discount: number }[]—Volume discounts, ascending. Pass [] to hide the seat slider and price flat.
minSeats / maxSeats / defaultSeatsnumber1 / 50 / 8Seat slider range and start.
yearlyNotestring"Save 20%"Chip on the yearly tab.
currencystring"$"Prefix for prices.
onSelectPlan(selection: { planId, billing, seats, total }) => void—Called when a plan's button is pressed.
eyebrow / heading / subheadingstring—Section copy.

Accessibility

  • The billing toggle is a tablist with arrow-key support; the seat slider is a labelled role=slider with Home, End and Page keys.
  • Rolling prices expose the final value through aria-label, so screen readers never hear intermediate digits.
  • Feature rows say Included or Not included in visually hidden text instead of relying on check and dash icons.

Related

Pricing