PricingTable

Pricing tiers list with price, tagline, feature bullets, CTA, and a featured tier highlight.

The PricingTable component from @publier/shell renders a row of pricing tiers. One tier can be marked featured to get a visual highlight and a “Most popular” badge.

Usage

import { PricingTable } from '@publier/shell/components';

<PricingTable
  tiers={[
    {
      name: 'Hobby',
      price: 'Free',
      tagline: 'For personal projects.',
      features: ['Unlimited pages', 'All themes', 'Community support'],
      cta: { label: 'Get started', href: '/docs/getting-started' },
    },
    {
      name: 'Pro',
      price: '$19/mo',
      tagline: 'For small teams.',
      features: ['Everything in Hobby', 'Custom domain', 'Email support'],
      cta: { label: 'Start free trial', href: '/pricing/pro' },
      featured: true,
    },
    {
      name: 'Enterprise',
      price: 'Custom',
      tagline: 'For large organizations.',
      features: ['Everything in Pro', 'SSO', 'SLA'],
      cta: { label: 'Contact sales', href: '/contact' },
    },
  ]}
/>

Props

`PricingTable`

Prop	Type	Default	Description
`tiers`	`PricingTier[]`	required	Array of pricing tiers.

`PricingTier`

Prop	Type	Default	Description
`name`	`string`	required	Tier name, e.g. `"Pro"`.
`price`	`string`	required	Price string, e.g. `"$19/mo"` or `"Free"`.
`features`	`string[]`	required	Bullet list of included features.
`cta`	`{ label: string; href: string }`	required	Call-to-action button.
`tagline`	`string`	`undefined`	Short tagline rendered below the price.
`featured`	`boolean`	`false`	When `true`, highlights the tier and adds a “Most popular” badge.

Behaviour

The featured tier’s CTA gets an aria-label of "{label} — {name} (recommended)"; other tiers use just the label.
Feature bullets render with a checkmark glyph.
All CTAs are plain <a> anchors — no JavaScript.