Pricing

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

   npx shadcn@latest add @txbrendan/pricing

Props

• eyebrow

  PricingCard. A small mono label at the top left.

  string

• tag

  PricingCard. A small mono label at the top right.

  string

• title

  PricingCard. The plan's name, large. It is an h3.

  ReactNode

• price

  PricingCard. The price, if you show one. Under a billing switch, one entry per period id: { monthly: "$24", yearly: "$240" }.

  string | Record<string, string>

• period

  PricingCard. What the price covers, after it: once, a year. Under a billing switch, it can be one entry per period id too.

  string | Record<string, string>

• details

  PricingCard. Short facts as rows under a dashed line, values in the brand color. Labels must be unique.

  { label: string; value: string }[]

• description

  PricingCard. A paragraph, like why the plan exists.

  ReactNode

• features

  PricingCard. What is included, one line each, with a plus. Each must be unique.

  string[]

• action

  PricingCard. The call to action, like a Button. It fills the card's width.

  ReactNode

• footnote

  PricingCard. A small line under the action.

  ReactNode

• emphasis

  PricingCard. solid is a dark card that stands out, in both modes. soft is a light gray one.

  "solid" | "soft" · default "solid"

• className

  Extra classes on the root. On Pricing it holds the container query.

  string

• Pricing

  Part. The row: cards stack when narrow, and sit side by side at equal widths from 42rem of its own width.

  ComponentProps<"div">

• billing

  Pricing. A switch above the cards between billing periods. It starts on defaultValue, or the first option. label names it for screen readers, default "Billing". note is a short line beside it. announce returns what screen readers hear after a change, default "Showing yearly prices" from the option's label; pass it for another language.

  { options: { id: string; label: string }[]; defaultValue?: string; value?: string; onValueChange?: (value: string) => void; label?: string; note?: ReactNode; announce?: (option: { id: string; label: string }) => string }

Accessibility

• Each plan name is an h3, so put the row under an h2, like a Headline.
• Details are a description list, so screen readers pair each label with its value.
• A solid card uses the theme's own dark colors, so every pair in it is one the theme checks in dark mode.
• In forced colors a soft card gets a border, so its edge still shows when its fill is painted away.
• Brand values on the soft card use tone text on muted, which the theme checks at 4.5:1.
• Plus marks are aria-hidden. Each feature reads as a plain list item.
• The billing switch is a radio group named by its label, so screen readers say which period is on. The arrow keys move between periods.
• A period is always picked: pressing the picked one keeps it.
• The prices change in place. A hidden polite status beside the switch then says so, like "Showing yearly prices". It is silent on page load, and speaks after a press, an arrow key, or a controlled value change.
• The card keeps room for the longest period, so it does not jump when the period changes. The other periods' prices are hidden from screen readers.

Examples

<Pricing>
  <PricingCard emphasis="soft" eyebrow="Yearly" title="All-Access" price="$129" period="a year"
    features={["Every block and template"]} action={<Button emphasis="outline">Choose yearly</Button>} />
  <PricingCard eyebrow="Lifetime" tag="Best value" title="All-Access" price="$199" period="once"
    features={["Every block and template", "Updates forever"]} action={<Button tone="brand">Choose lifetime</Button>} />
</Pricing>

<Pricing
  billing={{
    options: [{ id: "monthly", label: "Monthly" }, { id: "yearly", label: "Yearly" }],
    note: "Save 20% yearly",
  }}
>
  <PricingCard emphasis="soft" title="Starter" price="$0" period="forever" action={<Button emphasis="outline">Start free</Button>} />
  <PricingCard
    title="Team"
    price={{ monthly: "$24", yearly: "$19" }}
    period={{ monthly: "a month", yearly: "a month, billed yearly" }}
    action={<Button tone="brand">Start a trial</Button>}
  />
</Pricing>