pricing

Single plan card with a feature list and CTA. Set highlighted: true on the recommended plan — it gets an accent border and a floating badge label.

Pro

For growing teams

$9 /month

Unlimited pages
Priority support
Custom domain

pricing({
  name:        'Pro',
  price:       '$9',
  period:      '/month',
  description: 'For growing teams',
  features:    ['Unlimited pages', 'Priority support', 'Custom domain'],
  highlighted: true,
  badge:       'Most popular',
  action:      button({ label: 'Get started', fullWidth: true }),
})

Multi-plan layout

Free

For personal projects

$0 /month

3 pages
Community support

Pro

For growing teams

$9 /month

Unlimited pages
Priority support
Custom domain

Team

For large organisations

$29 /month

Everything in Pro
SSO
SLA

<div class="ui-pricing-grid ui-pricing-grid--cols-3">
  ${pricing({ name: 'Free',  price: '$0',  ... })}
  ${pricing({ name: 'Pro',   price: '$9',  highlighted: true, badge: 'Most popular', ... })}
  ${pricing({ name: 'Team',  price: '$29', ... })}
</div>

Prop	Type	Default
`name`	string	—
`level`	number	3	Heading tag for the plan name (1–6). Visual style is unchanged.
`price`	string	—	Formatted string — e.g. "$9", "Free"
`period`	string	—	e.g. "/month", "/year"
`description`	string	—
`features`	string[]	[]	List of feature strings
`action`	string (HTML)	—	Raw HTML slot — typically a button()
`highlighted`	boolean	false	Accent border + elevated appearance
`badge`	string	—	Floating label above the card