Pricing Tiers
Arrange pricing plans in a tiered comparison.
Preview
Import
import { PricingTiers } from "@sigil-ui/components";Usage
<PricingTiers
tiers={[
{ name: "Open source", price: "$0", description: "Build with the complete local system.", features: [{ label: "Tokens", value: "519" }, { label: "Presets", value: "46" }], cta: <Button variant="outline" className="w-full">View GitHub</Button> },
{ name: "Studio", price: "$24", period: "/ month", description: "Collaborative design tooling for teams.", badge: "Popular", highlighted: true, features: [{ label: "Projects", value: "Unlimited" }, { label: "Seats", value: "5" }], cta: <Button className="w-full">Start building</Button> },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tiers (required) | PricingTier[] | — | Tiers configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-border-style | Border style |
--s-radius-md | Radius md |
--s-card-padding | Card padding |
--s-surface-elevated | Surface elevated |
--s-surface | Surface |
--s-text-muted | Text muted |
--s-text | Text |
--s-font-display | Font display |
--s-font-mono | Font mono |
--s-primary | Primary |
--s-text-secondary | Text secondary |