# Pricing Page

> A whole pricing page, built from our website components: a floating navbar, a two-tone page title, the plans side by side, a comparison, a testimonial wall, a FAQ, and a footer.

- Name: `pricing-page`
- Status: beta
- Categories: pricing, marketing, page
- Files: the install writes `pricing-page.tsx`, and any part files named `pricing-page-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@arbokui/navbar`, `@arbokui/headline`, `@arbokui/pricing`, `@arbokui/comparison`, `@arbokui/testimonial-wall`, `@arbokui/faq`, `@arbokui/footer`. The install adds them.
- Gallery: https://arbokui.com/templates/pricing-page
- Registry item: https://arbokui.com/r/pricing-page.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

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

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the template. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/pricing-page
   ```

## Use it for

- The pricing page of a product site. Render it as the whole page, from your app's page file.
- Write every word in the props: one object for the navbar, the header, the plans, the comparison, the testimonials, the FAQ, and the footer.
- Put the plans first, under a header that says who they are for. People come to this page to see prices.
- Use \`note\` for what every plan shares, like the currency, tax, or a free trial.
- Use the comparison for what each plan includes, and the FAQ for billing questions, like canceling or refunds.
- Use testimonials for what customers say about the price and what it got them. Put the heading in the section's \`headline\`, not the wall's own \`title\`.
- Pass your router's link once in \`renderLink\`. The navbar and the footer both use it.
- Set \`embedded\` when you show the page inside another page, like a gallery, so it has no second main.

## Avoid it for

- More than three plans. Pick the three most people choose from.
- A price or a promise you can't stand behind, like "cancel any time" when you can't.
- A hero with a product preview. That belongs on the Landing Page template.

## Props

- `navbar`: `NavbarProps`. The Navbar's props. It floats as a pill once the page scrolls, and folds into a menu below 42rem.
- `header`: `HeadlineProps`. The headline at the top: the claim, the gray rest, and a line under it. It renders as the page's one h1.
- `plans`: `PricingCardProps[]`. The plans, one PricingCard each, side by side. Two or fewer sit in a narrower row, centered.
- `plansLabel`: `string`. Default `"Plans"`. Names the plans for screen readers, as a hidden h2 over the cards.
- `billing`: `PricingBilling`. 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.
- `note`: `ReactNode`. A small line under the plans, like "Prices in USD, before tax."
- `comparison`: `{ id?: string; headline?: HeadlineProps; comparison: ComparisonProps }`. A Comparison under its own headline. Its id defaults to "compare".
- `testimonials`: `{ id?: string; headline?: HeadlineProps; testimonials: TestimonialWallProps }`. A Testimonial Wall under its own headline, between the comparison and the FAQ. Its id defaults to "testimonials".
- `faq`: `{ id?: string; headline?: HeadlineProps; faq: FaqProps }`. A FAQ under its own headline. Its id defaults to "faq".
- `footer`: `FooterProps`. The Footer's props: the brand, a line about you, link columns, and the legal line.
- `renderLink`: `(props: NavbarLinkProps) => ReactNode`. Default `a plain <a>`. Draws every link in the navbar and the footer, unless a part sets its own.
- `embedded`: `boolean`. Default `false`. Renders the content in a div, not a main, for a preview inside another page.
- `className`: `string`. Extra classes on the root, which holds the container query.

## 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

### A short pricing page

```tsx
<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",
  }}
/>
```