SaaS Pricing Page

Pricing1: SaaS Pricing Page

A light editorial pricing page: a pill navbar, three per-seat tiers on a monthly and yearly toggle, a sticky split FAQ answering the billing questions, a closing panel floating a live plan card, and a newsletter footer. Five blocks, one install, and the shortest page in the set.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

npx shadcn add "https://ui.beste.co/page/r/pricing1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/pricing1.tsx and everything behind it: the five blocks it composes (navbar73, pricing71, faq79, cta76, footer120), the money22, button21 and badge23 components they use, and the shadcn/ui tabs and button primitives. Nine files, no follow-up installs.

Quick start

The installed file exports pricing1Demo alongside the page: the exact props behind the preview above. Spread it to get a working page in one line.

import { Pricing1, pricing1Demo } from "@/components/beste/page/pricing1";

export default function Page() {
  return <Pricing1 {...pricing1Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time. On this page that is nearly always pricing.

import { Pricing1, pricing1Demo } from "@/components/beste/page/pricing1";

export default function Page() {
  return (
    <Pricing1
      {...pricing1Demo}
      pricing={{
        label: "Pricing",
        heading: "Per seat, and the yearly price is two months off.",
        plans: [
          { name: "Starter", monthly: "$12", yearly: "$120", description: "Up to five seats." },
          { name: "Studio", monthly: "$19", yearly: "$190", description: "Everything, no seat cap." },
          { name: "Group", monthly: "Talk to us", yearly: "Talk to us", description: "Invoicing and SSO." },
        ],
      }}
    />
  );
}

Props

Every prop is the full prop object of the block that renders that section, so anything the block accepts is accepted here.

Sections

Behavior notes

• Every section is conditional on its own prop, so omitting faq removes that section entirely rather than rendering an empty one.
• There is no hero. The tiers are the hero, which is why the navbar is not sticky either: the whole argument fits in about two screens and a pinned bar would only take height from it.
• The monthly and yearly toggle is state inside pricing71, not something the page lifts. Both prices are passed per plan and the block decides which to show.
• The FAQ's heading column is sticky within its own section, so the questions stay titled while the answers scroll past. That is block behaviour, not something the page adds.
• The page sets className="bg-muted/40" on the FAQ after spreading faq, so a className passed inside that prop is overridden.
• The closing panel sits inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree, so the plan card floating inside it inverts with the band rather than staying light.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.
• The page is Pro because blocks inside it are, which is why the licence parameters are on the command above.