# Pricing Page

> A standalone pricing page: monthly / yearly plan cards, a feature comparison table, pricing FAQ and a sales CTA.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/pricing-page
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/pricing-page.json
```

Adds the page at `app/pricing-page/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [Navbar](https://chromotion.dev/r/navbar.md): `@/components/navbar`
- [Pricing Cards](https://chromotion.dev/r/pricing-cards.md): `@/components/pricing-cards`
- [FAQ Accordion](https://chromotion.dev/r/faq-accordion.md): `@/components/faq-accordion`
- [CTA Banner](https://chromotion.dev/r/cta-banner.md): `@/components/cta-banner`
- [Site Footer](https://chromotion.dev/r/site-footer.md): `@/components/site-footer`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/pricing-page/page.tsx"
import { Check, Hexagon, Mail, Minus, Rss } from "lucide-react"

import { CtaBanner } from "@/components/cta-banner"
import { FaqAccordion } from "@/components/faq-accordion"
import { Navbar } from "@/components/navbar"
import { PricingCards } from "@/components/pricing-cards"
import { SiteFooter } from "@/components/site-footer"

const accent = "var(--ring)"

const brand = (
  <>
    <Hexagon className="size-5 fill-primary text-primary" /> Hexa
  </>
)

const plans = [
  {
    name: "Hobby",
    description: "For side projects and learning",
    monthly: 0,
    yearly: 0,
    cta: "Get started",
    features: ["3 projects", "Community support", "Basic analytics"],
  },
  {
    name: "Pro",
    description: "For teams shipping every week",
    monthly: 24,
    yearly: 19,
    cta: "Start free trial",
    highlighted: true,
    features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domains", "Preview comments"],
  },
  {
    name: "Enterprise",
    description: "For security-minded organizations",
    monthly: 79,
    yearly: 64,
    cta: "Contact sales",
    features: ["Everything in Pro", "SSO & SAML", "Audit logs", "99.99% uptime SLA", "Dedicated manager"],
  },
]

const rows: { feature: string; values: (boolean | string)[] }[] = [
  { feature: "Projects", values: ["3", "Unlimited", "Unlimited"] },
  { feature: "Team seats", values: ["1", "Per seat", "Per seat"] },
  { feature: "Bandwidth", values: ["100 GB", "1 TB", "Custom"] },
  { feature: "Preview deployments", values: [true, true, true] },
  { feature: "Custom domains", values: [false, true, true] },
  { feature: "Advanced analytics", values: [false, true, true] },
  { feature: "SSO & SAML", values: [false, false, true] },
  { feature: "Audit logs", values: [false, false, true] },
  { feature: "Support", values: ["Community", "Priority", "Dedicated"] },
]

const faqs = [
  { question: "Can I switch plans later?", answer: "Yes. Upgrade or downgrade at any time and we prorate the difference on your next invoice." },
  { question: "What happens if I go over my limits?", answer: "We never cut your site off. We'll email you first, and you can upgrade or let the overage bill at a flat rate." },
  { question: "Do you offer discounts for startups or nonprofits?", answer: "Yes — eligible startups get six months of Pro free, and registered nonprofits get 50% off." },
  { question: "Is there a free trial for Pro?", answer: "Every Pro workspace starts with a 14-day trial. No credit card is required." },
]

function Cell({ value }: { value: boolean | string }) {
  if (typeof value === "string") return <span className="text-sm">{value}</span>
  return value ? (
    <Check className="mx-auto size-4 text-primary" aria-label="Included" />
  ) : (
    <Minus className="mx-auto size-4 text-muted-foreground/50" aria-label="Not included" />
  )
}

export default function PricingPage() {
  return (
    <div className="min-h-svh bg-background text-foreground">
      <Navbar
        brand={brand}
        links={[
          { label: "Product", href: "#" },
          { label: "Pricing", href: "#pricing", active: true },
          { label: "Docs", href: "#" },
          { label: "Changelog", href: "#" },
        ]}
        secondaryAction={{ label: "Sign in", href: "#" }}
        primaryAction={{ label: "Get started", href: "#pricing" }}
      />

      <main>
        <section id="pricing" className="scroll-mt-14 pt-20">
          <div className="mx-auto flex max-w-2xl flex-col items-center gap-3 px-6 text-center">
            <p className="text-sm font-medium text-primary">Pricing</p>
            <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">Pick the plan that fits your team</h1>
            <p className="text-pretty text-muted-foreground">Start free, upgrade when you grow. Every plan includes unlimited preview deployments.</p>
          </div>
          <PricingCards plans={plans} className="pt-10" />
        </section>

        <section className="px-6 py-12">
          <div className="mx-auto max-w-5xl">
            <h2 className="mb-6 text-2xl font-semibold tracking-tight">Compare plans</h2>
            <div className="overflow-x-auto rounded-2xl border">
              <table className="w-full min-w-[560px] text-left">
                <thead>
                  <tr className="border-b bg-muted/40 text-sm">
                    <th scope="col" className="px-4 py-3 font-medium">
                      <span className="sr-only">Feature</span>
                    </th>
                    {plans.map((plan) => (
                      <th key={plan.name} scope="col" className="px-4 py-3 text-center font-semibold">
                        {plan.name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {rows.map((row) => (
                    <tr key={row.feature} className="border-b last:border-0">
                      <th scope="row" className="px-4 py-3 text-sm font-normal text-muted-foreground">
                        {row.feature}
                      </th>
                      {row.values.map((value, index) => (
                        <td key={index} className="px-4 py-3 text-center">
                          <Cell value={value} />
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <section className="px-6 py-16">
          <div className="mx-auto max-w-2xl">
            <h2 className="mb-8 text-center text-3xl font-semibold tracking-tight">Pricing questions</h2>
            <FaqAccordion items={faqs} />
          </div>
        </section>

        <div className="px-6 pb-20">
          <CtaBanner
            className="mx-auto max-w-5xl"
            title="Still not sure?"
            description="Talk to someone on the team and we'll help you find the right plan."
            primaryAction={{ label: "Start for free", href: "#pricing" }}
            secondaryAction={{ label: "Talk to sales", href: "#" }}
            glowColor={accent}
          />
        </div>
      </main>

      <SiteFooter
        brand={<span className="flex items-center gap-2">{brand}</span>}
        tagline="The deployment platform for teams who care about speed."
        columns={[
          { title: "Product", links: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#pricing" }, { label: "Changelog", href: "#" }] },
          { title: "Resources", links: [{ label: "Docs", href: "#" }, { label: "Guides", href: "#" }, { label: "Status", href: "#" }] },
          { title: "Company", links: [{ label: "About", href: "#" }, { label: "Blog", href: "#" }, { label: "Careers", href: "#" }] },
        ]}
        socials={[
          { label: "RSS", href: "#", icon: Rss },
          { label: "Email", href: "#", icon: Mail },
        ]}
        legal="© 2026 Hexa Labs, Inc. All rights reserved."
        bottomLinks={[{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }]}
        wordmark="HEXA"
      />
    </div>
  )
}
```