Pricing Card
Plan cards with a monthly/yearly segmented toggle, odometer-rolling prices, feature checks, an ember recommended plan and current/disabled states.
Preview
Sketch
CurrentFor trying ideas on your own.
$0 per month
Free forever
- 3 projects
- 1 GB storage
- Community support
- Not included: Version history
Studio
RecommendedFor small teams shipping every week.
$24 per month
Billed monthly
Everything in Sketch, plus
- Unlimited projects
- 100 GB storage
- 30-day version history
- Shared review linksnew
Atelier
For orgs that need control.
$64 per month
From 5 seats, billed per seat
Everything in Studio, plus
- SSO and audit log
- 1 TB storage
- Unlimited history
- Priority support
Switch to yearly to see the prices roll
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| period / defaultPeriod | "monthly" | "yearly" | "monthly" | PricingTable: billing period shared by every card; pair period with onPeriodChange. |
| yearlySavings | ReactNode | — | PricingTable: chip next to Yearly in the toggle, e.g. −20%. |
| name | string | — | PricingCard: plan name; names the region. |
| price | number | string | { monthly; yearly } | — | PricingCard: per-month amounts per period (digits roll on change), or text like Custom. |
| features | (string | { label; included?; note? })[] | — | PricingCard: feature list; included: false renders a muted dash. |
| featuresTitle | string | — | PricingCard: heading above the list, e.g. Everything in Solo, plus. |
| recommended | boolean | false | PricingCard: ember ring and badge, lit-key CTA. |
| current | boolean | false | PricingCard: CTA becomes a disabled Current plan. |
| disabled / disabledReason | boolean / string | false | PricingCard: blocks the CTA; the reason replaces the billing note. |
| ctaLabel / onSelect / href | string / () => void / string | "Choose plan" | PricingCard: CTA text and action; href renders a link. |
| caption | ReactNode | (period) => ReactNode | billing note | PricingCard: line under the price. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.