A pricing section: plans in concentric frames with the price beside one action, the features below, and a wide row for custom requests.
Pricing
The right fit for your next project
Landing page
One page that says what you do, shows your work and turns a visit into a message.
Q 2,800+
- One page
- Design and development
- Built for every screen
- Fast and easy to find
Full website
Most popularA complete site that grows with your business, with every page you need and a way to edit them.
Q 7,000+
- As many pages as you need
- Design and development
- Built for every screen
- Fast and easy to find
Something else
Need something different? From design and code to search and automation, we’ll find the right fit.
Installation
Add it with the shadcn CLI, or copy the source by hand.
$ pnpm dlx shadcn@latest add @ssntl/pricingAPI reference
Pricing
eyebrow?Type:React.ReactNodeDefault:—titlerequiredType:React.ReactNodeDefault:—
Also takes every prop of <section>.
PricingPlan
namerequiredType:React.ReactNodeDefault:—badge?Type:React.ReactNodeA Tag beside the name, like “Most popular”. One plan at most.Default:—descriptionrequiredType:React.ReactNodeDefault:—pricerequiredType:React.ReactNodeThe price as people read it: “Q 2,800+”, “$49 / month”.Default:—actionrequiredType:React.ReactNodeDefault:—featuresrequiredType:{ icon?: React.ReactNode; label: React.ReactNode }[]Default:—
Also takes every prop of <article>.
PricingCustom
titlerequiredType:React.ReactNodeDefault:—descriptionrequiredType:React.ReactNodeDefault:—actionrequiredType:React.ReactNodeDefault:—
Also takes every prop of <article>.
Rules
What this component expects from you, as it ships in components/blocks/pricing.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.
## Rules for Pricing
- **Concentric frames.** Each plan is a muted frame with a 4px gap around two cards, so the card corners are the frame's 32px minus the gap.
- **Tone, not lines.** Cards are lighter than their frame (darker in dark), so a plan reads as one object with no border.
- Price beside its one action, features below: people compare prices first, then confirm with the list.
- Prices use tabular numbers and say what they mean: “Q 2,800+” for a starting price, “/ month” for a subscription.
- One “Most popular” badge at most, as a tint Tag with words, never color alone.
- Plans sit side by side from 320px each and stack below; the custom row always spans the full width.