PricingCard

<PricingCard /> is a higher-level composition primitive for SaaS pricing tiers. It wraps <Card> + its subparts, then exposes the recurring decisions (name, price, cadence, blurb, features, CTA, "most popular" highlight) as typed props — so a tier collapses from ~60 LoC of structural JSX into one declarative element.

import { Button, PricingCard } from 'apx-ds';

<PricingCard
  highlighted
  name="Team"
  price="$12"
  cadence="per seat / month, billed yearly"
  blurb="For growing teams that need richer collaboration & analytics."
  features={[
    'Everything in Starter',
    'Unlimited collaborators',
    'Advanced analytics dashboards',
    '90-day audit log + SSO',
    'Priority email support',
  ]}
  cta={<Button fullWidth>Start 14-day trial</Button>}
/>

import { Button, PricingCard } from 'apx-ds';

<PricingCard
  highlighted
  name="Team"
  price="$12"
  cadence="per seat / month, billed yearly"
  blurb="For growing teams that need richer collaboration & analytics."
  features={[
    'Everything in Starter',
    'Unlimited collaborators',
    'Advanced analytics dashboards',
    '90-day audit log + SSO',
    'Priority email support',
  ]}
  cta={<Button fullWidth>Start 14-day trial</Button>}
/>

The component renders a regular <Card> underneath — every Card prop you'd reach for (variant, size, color, sx, className, style, data-*, ...) flows through unchanged. There is no new visual primitive to learn; only a typed shorthand.

Why a separate primitive (and not <Card variant="pricing">)?

Card.variant already means edge / background treatment ('outline' | 'solid' | 'elevated' | 'ghost'). Overloading it with a content-layout meaning ('pricing') would conflate two orthogonal concerns and force the type to drift. Following the same pattern as <Stat>, <EmptyState>, <Toolbar>, this DS prefers a dedicated component that wraps Card — you keep every Card escape hatch, and the pricing shape is reusable in its own right.

Anatomy

Every region renders only when its prop is supplied — pass cadence={undefined} / features={undefined} to omit a section.

Prop surface

Content

Highlight

Feature bullets

Pass-through to <Card>

Examples

Accessibility

• The badge next to the highlighted tier is purely visual; the tier name is the semantic label, so screen reader users hear "Team" (not "Team Most popular"). Pair with an aria-describedby to announce the highlight if needed.
• featureIcon is wrapped with aria-hidden="true" — the bullet decoration must not be read aloud, the feature text is the accessible content.
• The component never traps focus or claims a role; the <Card> underneath stays a passive container. If you need the entire card to be a single clickable target, forward clickable via the underlying Card's prop surface (PR follow-up).

Theming

• All visual styling is owned by <Card> + <Badge> + <Typography> + <Button> recipes — there's no <PricingCard> recipe of its own. Theme overrides on those three components automatically apply.
• featureIcon color uses the standard palette tokens (text-primary, text-success, ...) so it tracks the active variant.

Do / Don't

• Do reach for <PricingCard> whenever you'd otherwise wire <Card> + <Card.Header>
  • price block + feature list + <Card.Footer> by hand for a marketing page.
• Do keep tier data in a typed array and .map() over it; the prop surface is designed for that pattern (see the TierGrid example).
• Don't force <PricingCard> into roles outside pricing (status cards, summary panels, etc.) — fall back to <Card> directly. The shape is opinionated on purpose.
• Don't override every prop with className arbitrary utility classes. If the component doesn't fit, drop down to <Card> directly — that path is supported and documented.