Pricing
Present pricing options with their features and actions.
Preview
Import
import { Pricing } from "@sigil-ui/components";Usage
<Pricing
name="Pro"
price="$29"
period="/mo"
highlighted
features={["Unlimited projects", "Priority support", "Custom domains", "Analytics"]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Plan name. |
price | string | — | Price display (e.g. "$19"). |
period | string | — | Billing period (e.g. "/mo"). |
features | string[] | — | Feature list. |
cta | ReactNode | — | CTA button content. |
highlighted | boolean | — | Highlight this card as recommended. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-border-style | Border style |
--s-surface | Surface |
--s-primary | Primary |
--s-shadow-lg | Shadow lg |
--s-border | Border |
--s-text-muted | Text muted |
--s-text | Text |
--s-success | Success |