Pricing
Pricing card with plan name, price, feature list, and optional highlight ring.
Preview
Import
import { Pricing } from "@sigil-ui/components";Usage
<Pricing name="Starter" price="$0" period="/mo" features={["1 project", "Community support"]} />Highlighted card
<Pricing
name="Pro"
price="$29"
period="/mo"
highlighted
features={["Unlimited projects", "Priority support", "Custom domains", "Analytics"]}
cta={<button className="w-full h-10 bg-[var(--s-primary)] text-white rounded-[var(--s-radius-md)]">Upgrade</button>}
/>Pricing grid
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Pricing name="Free" price="$0" features={["1 project"]} />
<Pricing name="Pro" price="$29" period="/mo" highlighted features={["Unlimited projects", "Support"]} />
<Pricing name="Enterprise" price="Custom" features={["SSO", "SLA", "Dedicated support"]} />
</div>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 | false | Highlight with primary ring and shadow |
className | string | — | Additional CSS classes |