Pricing Table
A feature comparison pricing table with tier highlighting, badges, and category grouping.
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" },
]}
features={features}
categories={[{ label: "Usage", startIndex: 0 }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | PricingColumn[] | — | Tier definitions with name, price, badge |
features | PricingFeature[] | — | Feature rows with boolean or string values per tier |
categories | object[] | — | Optional category grouping headers |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Badge background and highlighted column |
--s-primary-muted | Highlighted column background |
--s-primary-contrast | Badge text |
--s-success | Checkmark color |
--s-border | Table borders |
--s-surface | Background |
--s-surface-elevated | Category header and hover |
--s-text | Feature names and values |
--s-text-muted | Headers and dash indicators |
--s-font-mono | Price font |
--s-radius-card | Container radius |
--s-radius-full | Badge radius |
--s-shadow-sm | Container shadow |
--s-border-style | Border style |
--s-duration-fast | Hover transition |