Pricing Section
Marketing plan cards — mono price display, check feature lists, highlighted-plan treatment.
- Status
- Since
0.3.0- Accessibility pattern
- headings + feature lists
Last updated
Free
Per user/month, billed annually
For individuals exploring the product.
- Real-time syncing
- Automatic enrichment
- Up to 3 seats
Pro
Per user/month, billed annually
For growing teams to scale revenue.
- Call intelligence
- Permission controls
- Advanced reporting
Enterprise
Billed annually
For large orgs needing control.
- Unlimited objects
- Unlimited teams
- Security & admin controls
Install
Add Pricing Section from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/pricing-sectionThe same command installs the registry items it composes: @vegastack/badge.
Usage
<PricingSection>
<PlanCard
name="Pro"
price="$79"
priceNote="Per user/month"
features={["Call intelligence"]}
action={<Button className="w-full">Continue with Pro</Button>}
highlighted
/>
</PricingSection>Notes
- Prices render in mono with tabular numerals — the system's numbers rule (a deliberate improvement over the reference).
- The grid uses
auto-fitwith the semantic--container-3xswidth, so cards reflow from the section's actual available width rather than a viewport breakpoint. Narrow preview frames, sidebars, and split panes therefore get the same one-column layout as a small screen. highlightedpromotes a plan onto thesurface-3rung with an alpha-primaryhairline and a bordered neutralPopularbadge. Promotion is a ladder rung, never a hue —infois reserved for links and informational messages.- Billing-cycle toggles compose from
Segmentedabove the grid. - Pair with
ComparisonMatrixfor the feature detail.
Anatomy
Pricing Section is a compound component. Every exported part, with the
data-slot it renders (generated from the canonical source):
Examples
Free
Per user/month, billed annually
For individuals exploring the product.
- Real-time syncing
- Automatic enrichment
- Up to 3 seats
Pro
Per user/month, billed annually
For growing teams to scale revenue.
- Call intelligence
- Permission controls
- Advanced reporting
Enterprise
Billed annually
For large orgs needing control.
- Unlimited objects
- Unlimited teams
- Security & admin controls
Billing cycle
PricingSection is presentational, so a monthly/annual switch is composed above the grid
rather than built in: Segmented owns the cycle and the price and note are derived at the
call site.
Starter
Per user/month, billed annually
For individuals exploring the product.
- Real-time syncing
- Up to 3 seats
Pro
Per user/month, billed annually
For growing teams to scale revenue.
- Call intelligence
- Advanced reporting
API Reference
PricingSection
PricingSection accepts the native props, className, and ref of its responsive grid <div>.
PlanCard
| Prop | Type | Default | Description |
|---|---|---|---|
name* | React.ReactNode | — | Plan name ("Free", "Pro"). |
price* | React.ReactNode | — | The price display — mono numerals ("$79", "Custom"). |
action | React.ReactNode | — | The plan's CTA (a full-width Button). |
description | React.ReactNode | — | Short positioning line ("For growing teams…"). |
features | React.ReactNode[] | — | Feature strings rendered as a check list. |
highlighted | boolean | false | Promote this plan: lifts the card onto the surface-3 rung, tints its hairline
primary, and shows the "Popular" badge. |
highlightLabel | React.ReactNode | 'Popular' | Copy for the highlight badge. |
priceNote | React.ReactNode | — | Muted line under the price ("Per user/month, billed annually"). |
Data attributes and CSS variables on PlanCard
| Attribute | Values |
|---|---|
data-highlighted | "" |
data-slot | "plan-card" | "plan-card-action" | "plan-card-price" |
Accessibility
- Every plan name is an
<h3>; place the grid beneath a section heading so the page outline remains coherent. - Included features use a decorative check plus visible feature text, never color alone.
- The promoted plan is identified by the visible highlight badge in addition to its categorical surface treatment.
- Keep CTA labels explicit about the outcome, such as “Start for free” or “Talk to sales.”
| Contract | States tested |
|---|---|
| Behaviour | default, success |
| Accessibility | native-or-base-ui-semantics, browser-accessibility-test |
| Visual | default, success |