PixelPricingCard

Pricing tier card with tone-driven highlight, optional popular ribbon, feature list, and CTA slot.

Surface-aware borders, fonts, and radii (pixel / linear)
Tone tokens drive price color, highlight glow, and feature checks
Optional popular ribbon with its own tone override
Feature list supports included/excluded states with tooltip + a11y labels
Strikethrough price exposed to assistive tech via sr-only label

Status: stable
Category: cards
Since: v1.7.0

API

import { PixelPricingCard } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`tone`	`'neutral' \| 'green' \| 'cyan' \| 'gold' \| 'red' \| 'purple' \| 'pink'`	`'neutral'`	Tone of the price, the feature marks and, highlighted, the chrome.
`icon`	`React.ReactNode`	—	Icon above the name, in the tone.
`name` (required)	`string`	—	Plan name.
`description`	`string`	—	Muted line under the name.
`descriptionLines`	`2 \| 3 \| 'none'`	`2`	Clamp the description to N lines. Defaults to 2; use 'none' to let long copy flow.
`price` (required)	`{ amount: string \| number; period?: string; strikethrough?: string \| number }`	—	Price, billing period and old price.
`priceBadge`	`React.ReactNode`	—	Promo badge rendered beside the price (e.g. a discount PixelBadge).
`popular`	`{ label?: string; tone?: ToneKey }`	—	Ribbon over the top edge: its label (`POPULAR`) and tone (gold).
`features`	`{ label: string; tooltip?: string; included?: boolean; highlight?: boolean }[]`	—	The feature list.
`cta`	`React.ReactNode`	—	Call to action under the features.
`highlight`	`boolean`	`false`	Tints the border and background and adds a glow.
`footer`	`React.ReactNode`	—	Fine print under the call to action.
`surface`	`'pixel' \| 'linear'`	—	Surface override; defaults to the nearest provider.
`bordered`	`boolean`	`true`	Render with surface-aware border + radius chrome. Defaults to true — a pricing card needs visible chrome.

Also takes the native attributes and event handlers of its element (HTMLAttributes<HTMLElement>).

ref points to its element (HTMLElement).

WCAG target: 2.1 AA

semantic article

Renders as <article>. Strikethrough price and excluded features are announced via sr-only labels. CTA inherits its own a11y from the consumer-provided node.

Usage

import { PixelPricingCard } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelPricingCard
      tone="cyan"
      name="Starter"
      description="Everything you need to ship your first project."
      price={{ amount: '$19', period: '/mo' }}
      features={[
        { label: '10 projects' },
        { label: 'Basic analytics' },
        { label: 'Email support' },
        { label: 'Priority support', included: false },
      ]}
    />
  );
}

Examples

Default

import { PixelPricingCard } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelPricingCard
      tone="cyan"
      name="Starter"
      description="Everything you need to ship your first project."
      price={{ amount: '$19', period: '/mo' }}
      features={[
        { label: '10 projects' },
        { label: 'Basic analytics' },
        { label: 'Email support' },
        { label: 'Priority support', included: false },
      ]}
    />
  );
}

With price badge

import { PixelPricingCard, PixelBadge } from '@pxlkit/ui-kit';

export function WithPriceBadge() {
  return (
    <PixelPricingCard
      tone="green"
      name="Team"
      description="Annual billing with every collaboration feature unlocked, plus hands-on onboarding for larger workspaces — the description flows freely with descriptionLines set to 'none'."
      descriptionLines="none"
      price={{ amount: '$39', period: '/mo', strikethrough: '$59' }}
      priceBadge={<PixelBadge tone="green" size="sm">-33%</PixelBadge>}
      features={[
        { label: 'Unlimited projects' },
        { label: 'SSO + audit log', highlight: true },
        { label: 'Priority support' },
      ]}
    />
  );
}

Popular (highlighted)

import { PixelPricingCard } from '@pxlkit/ui-kit';

export function Popular() {
  return (
    <PixelPricingCard
      tone="gold"
      highlight
      name="Pro"
      description="For teams that want more power and priority."
      price={{ amount: '$49', period: '/mo', strikethrough: '$79' }}
      popular={{ label: 'POPULAR', tone: 'gold' }}
      features={[
        { label: 'Unlimited projects' },
        { label: 'Advanced analytics' },
        { label: 'Priority support' },
      ]}
    />
  );
}

Related