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 template. 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-page

Props

• navbar

  The Navbar's props. It floats as a pill once the page scrolls, and folds into a menu below 42rem.

  NavbarProps

• header

  The headline at the top: the claim, the gray rest, and a line under it. It renders as the page's one h1.

  HeadlineProps

• plans

  The plans, one PricingCard each, side by side. Two or fewer sit in a narrower row, centered.

  PricingCardProps[]

• plansLabel

  Names the plans for screen readers, as a hidden h2 over the cards.

  string · default "Plans"

• billing

  Pricing's billing switch, over the plans, between periods like monthly and yearly. Give each plan's price and period one entry per period id.

  PricingBilling

• note

  A small line under the plans, like "Prices in USD, before tax."

  ReactNode

• comparison

  A Comparison under its own headline. Its id defaults to "compare".

  { id?: string; headline?: HeadlineProps; comparison: ComparisonProps }

• testimonials

  A Testimonial Wall under its own headline, between the comparison and the FAQ. Its id defaults to "testimonials".

  { id?: string; headline?: HeadlineProps; testimonials: TestimonialWallProps }

• faq

  A FAQ under its own headline. Its id defaults to "faq".

  { id?: string; headline?: HeadlineProps; faq: FaqProps }

• footer

  The Footer's props: the brand, a line about you, link columns, and the legal line.

  FooterProps

• renderLink

  Draws every link in the navbar and the footer, unless a part sets its own.

  (props: NavbarLinkProps) => ReactNode · default a plain <a>

• embedded

  Renders the content in a div, not a main, for a preview inside another page.

  boolean · default false

• className

  Extra classes on the root, which holds the container query.

  string

Accessibility

• The content sits in a main landmark, between the navbar's nav and the footer, so skip links and screen readers find it.
• The header renders the page's one h1. The comparison's, the testimonials', and the FAQ's headlines are h2s.
• The plans sit in a section named by a hidden h2, so the cards' h3 titles follow in order and screen readers can jump to the plans.
• The comparison, the testimonials, and the FAQ keep clear of the floating navbar when a link jumps to their ids.
• Each part keeps its own accessibility, listed on its page.

Examples

<PricingPage
  navbar={{
    brand: "Workspace",
    links: [{ href: "/pricing", label: "Pricing", current: true }, { href: "#faq", label: "FAQ" }],
    actions: <Button tone="brand" size="sm">Create a team</Button>,
  }}
  header={{ title: "One price per team.", muted: "Everyone on it is free." }}
  plans={[
    {
      title: "Team",
      price: "$12",
      period: "a month",
      features: ["Who's coming", "Reminder emails"],
      action: <Button tone="brand">Start</Button>,
    },
  ]}
  note="Prices in USD, before tax."
  faq={{
    headline: { title: "Questions." },
    faq: { items: [{ question: "Can I cancel?", answer: "Yes, from your settings." }] },
  }}
  footer={{
    brand: "Workspace",
    columns: [{ title: "Product", links: [{ href: "/pricing", label: "Pricing" }] }],
    legal: "© 2026 Workspace",
  }}
/>