{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-tiers",
  "type": "registry:block",
  "title": "Pricing tiers",
  "description": "A pricing table: plans as a row of cards. Each price has a spoken form, and a feature that is not included says so in words.",
  "categories": [
    "section"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/pricing-tier.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/section-header.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/sections/pricing-tiers.tsx",
      "type": "registry:component",
      "target": "components/sections/pricing-tiers.tsx",
      "content": "/**\n * PricingTiers — the plan comparison as a row of cards.\n *\n * Each tier is a `PricingTier`, which handles the details that make pricing\n * genuinely hard to read aloud: a spoken form for the price, \"Not included\"\n * said in words rather than implied by a grey cross, and the recommended flag\n * as text rather than as a coloured border.\n *\n * The optional billing toggle is deliberately *not* built in. A monthly/yearly\n * switch changes prices, which means the parent already owns that state — and a\n * section that owned it would have to own the pricing data model too. Pass the\n * control through `toggle` and swap the `items` you hand in.\n *\n * a11y: a `<ul>` of plans. The toggle slot sits between the header and the list\n * so it is reached before the prices it changes, in both reading and tab order.\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/ui/container, @/components/ui/pricing-tier, @/components/ui/section,\n * @/components/ui/section-header.\n */\n\nimport type { ElementType, ReactNode } from \"react\"\n\nimport type {\n  HeadingLevel,\n  LinkComponent,\n  ListSlotProps,\n  SectionBaseProps,\n} from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Container } from \"@/components/ui/container\"\nimport { PricingTier, type PricingTierItem } from \"@/components/ui/pricing-tier\"\nimport { Section } from \"@/components/ui/section\"\nimport { SectionHeader } from \"@/components/ui/section-header\"\n\nexport interface PricingTiersProps extends SectionBaseProps, ListSlotProps {\n  items: PricingTierItem[]\n  title?: string\n  eyebrow?: string\n  description?: string\n  link?: LinkComponent\n  /** A billing-period switch, rendered above the plans. */\n  toggle?: ReactNode\n  /** Small print under the plans. */\n  note?: ReactNode\n  tierHeadingLevel?: HeadingLevel\n  align?: \"start\" | \"center\"\n}\n\nexport function PricingTiers({\n  items,\n  title,\n  eyebrow,\n  description,\n  link,\n  toggle,\n  note,\n  tierHeadingLevel,\n  align = \"center\",\n  listAs,\n  itemAs,\n  headingLevel = 2,\n  as,\n  spacing = \"md\",\n  className,\n  id,\n}: PricingTiersProps) {\n  const List = (listAs ?? \"ul\") as ElementType\n  const Item = (itemAs ?? \"li\") as ElementType\n  const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined\n  const tierLevel = tierHeadingLevel ?? (Math.min(headingLevel + 1, 6) as HeadingLevel)\n\n  const columns =\n    items.length <= 2\n      ? \"sm:grid-cols-2\"\n      : items.length === 3\n        ? \"lg:grid-cols-3\"\n        : \"sm:grid-cols-2 xl:grid-cols-4\"\n\n  return (\n    <Section\n      as={as ?? (title ? \"section\" : \"div\")}\n      spacing={spacing}\n      labelledBy={titleId}\n      id={id}\n      className={className}\n    >\n      <Container className=\"flex flex-col gap-12\">\n        {title ? (\n          <SectionHeader\n            align={align}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            headingLevel={headingLevel}\n            titleId={titleId}\n          />\n        ) : null}\n\n        {toggle ? (\n          <div\n            className={cn(\n              \"flex\",\n              align === \"center\" ? \"justify-center\" : \"justify-start\",\n            )}\n          >\n            {toggle}\n          </div>\n        ) : null}\n\n        <List className={cn(\"grid items-stretch gap-6\", columns)}>\n          {items.map((item) => (\n            // The `li` stretches and the card fills it. Deliberately not\n            // `display: contents` on the `li`, which has a history of dropping\n            // list semantics in the accessibility tree.\n            <Item key={item.name} className=\"flex\">\n              <PricingTier\n                {...item}\n                as=\"div\"\n                link={link}\n                headingLevel={tierLevel}\n                className=\"w-full\"\n              />\n            </Item>\n          ))}\n        </List>\n\n        {note ? (\n          <p\n            className={cn(\n              \"text-muted-foreground text-pretty text-sm\",\n              align === \"center\" && \"text-center\",\n            )}\n          >\n            {note}\n          </p>\n        ) : null}\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Set headingLevel to fit the page outline (sections default to h2). Pass next/link and next/image through the link and image props. Docs: https://facadeui.dev/components/pricing-tiers"
}