Pricing pages combine tier grids, billing toggles, comparison tables, and FAQ accordions. Once UI ships a pricing task bundle and gold example with highlighted middle tiers.
What this pattern covers
A production pricing page usually has four sections:
Hero with eyebrow, headline, and value prop
Three-tier grid with a highlighted "most popular" plan
Monthly / yearly toggle via SegmentedControl
Feature comparison table and FAQ accordion at the bottom
Gold reference: packages/core/ai/examples/pricing.tsx and task bundle packages/core/ai/tasks/pricing.json.For production fidelity, also read matching Pro blocks from examples/blocks/manifest.json (Header2, Footer2 patterns).
Page structure
Stack sections in a Column with gap="104" — the pricing task bundle's recommended section rhythm:Keep section gaps at 104 between major blocks. Do not cram tiers, table, and FAQ into one surface panel.
Tier grid
Use a three-column Grid that collapses to one column on mobile:Each tier is a Column surface panel, not a Card:Use Column with background="surface" and border — not Card.interactive. Pricing tiers are informational panels, not clickable cards.
Highlighted middle tier
The recommended plan gets brand border and a glow Background gradient:
<Column
fill
background="surface"
border="neutral-alpha-weak"
radius="l"
padding="32"
overflow="hidden"
>
<Column fill gap="24">
<Heading as="h3" variant="heading-strong-m">Starter</Heading>
<Text variant="body-default-s" onBackground="neutral-weak">
For solo builders shipping their first product.
</Text>
{/* price row */}
{/* feature list with Icon checkmarks */}
<Button fillWidth variant="secondary" arrowIcon>Start with Starter</Button>
</Column>
</Column>
Store billing in React state ("monthly" | "yearly") and derive displayed prices from your tier data. For animated price transitions, use the CountFx component in your app — reference it in prose, not inline in static examples.
Feature list per tier
Map features with Icon checkmarks inside each tier panel:
Close the page with an AccordionGroup for pricing questions. Pass an items array where each entry has title (string) and content (React node, usually Text).
Set autoCollapse={true} (default) so only one question is open at a time. Use size="m" for marketing pages.
Reference AccordionGroup in your app — see Accordion & FAQ for the item shape and split-column layout.
Agent checklist
When generating a pricing page from the task bundle:
Load packages/core/ai/tasks/pricing.json for component list and quality hints
Read examples/pricing.tsx for section order and tier structure
Use sectionGap: "104" and tier panels as Column surfaces
Highlight middle tier with border="brand-alpha-medium" + Background gradient
Match Pro block header/footer patterns from the blocks manifest
Write this / not this
✅ Once UI way
❌ Common mistake
Column surface panels for tiers
Card with onClick on entire tier
`Grid columns="3"` + `s={{ columns: 1 }}`
Flexbox with manual media queries
SegmentedControl for billing toggle
Two separate buttons with custom active state
Table for feature matrix
Nested div grids pretending to be a table
`gap="104"` between major sections
Everything in one padded container
Tag on highlighted tier
Inline styled "Popular" span
Check yourself
Three tiers in a responsive Grid
Middle tier has brand border, glow Background, and Tag badge
Billing toggle updates all price displays
Feature checkmarks use Icon, not unicode bullets
Comparison Table below tiers on neutral background
