Pricing Table
Compare plan prices and included features.
Preview
Import
import { PricingTable } from "@sigil-ui/components";Usage
<PricingTable
columns={[
{ name: "Free", price: "$0" },
{ name: "Pro", price: "$19", period: "mo", highlighted: true, badge: "Popular" },
{ name: "Enterprise", price: "Custom", period: "mo" },
]}
features={[
{ name: "Users", values: { Free: "1", Pro: "10", Enterprise: "Unlimited" } },
{ name: "Storage", values: { Free: "1 GB", Pro: "100 GB", Enterprise: "Unlimited" } },
{ name: "API Access", values: { Free: false, Pro: true, Enterprise: true } },
{ name: "SSO", values: { Free: false, Pro: false, Enterprise: true } },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | PricingColumn[] | — | — |
features | PricingFeature[] | — | — |
categories | { label: string; startIndex: number | — | Category headers group features visually. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-card | Radius card |
--s-border-style | Border style |
--s-border | Border |
--s-shadow-sm | Shadow sm |
--s-text-muted | Text muted |
--s-primary-muted | Primary muted |
--s-radius-full | Radius full |
--s-primary | Primary |
--s-primary-contrast | Primary contrast |
--s-text | Text |
--s-font-mono | Font mono |
--s-surface-elevated | Surface elevated |