Pricing Table

tier renders one card; tiers renders a stacked list. Most variants use tier; only stacked uses tiers.

• tier.onCta — fires when the in-card CTA button is clicked.
• onSelect — fires when the entire card is clicked (single-tier variants). Adds focus ring, hover lift, and keyboard activation.
• onSelectTier (stacked) — fires when a row is clicked. Combine with defaultSelectedTierId or selectedTierId.
• onSelectionCta (stacked) — when set, a Continue-with-plan button appears below the list. Receives the chosen tier.
• onBillingChange (toggle) — fires when the period switch changes.

For the toggle variant, give each tier a prices and (optionally) periods map keyed by billing id. The displayed price cross-fades when the user switches.

<Pricing
  variant="toggle"
  defaultBillingId="m"
  billingPeriods={[
    { id: "m", label: "Monthly" },
    { id: "y", label: "Yearly −20%" },
  ]}
  tier={{
    name: "Pro",
    price: "$28",
    prices: { m: "$28", y: "$269" },
    periods: { m: "/mo", y: "/year" },
    features: ["Unlimited projects", "Priority support"],
    ctaLabel: "Start trial",
    onCta: () => router.push("/signup"),
  }}
/>

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

• variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
• accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
• asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
• className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
• Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
• Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.