Marketing

Plan toggle

Two-plan pricing with a monthly/annual segmented control.

Plans

Pick the pace that matches your team.

Launch

For focused teams shipping one product.

$19/ month

Unlimited blocks
Theme presets
Email support

Scale

For teams running multiple surfaces.

$59/ month

Everything in Launch
Private registry
Priority support

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Pricing to your app with its source-owned dependencies.

bash

npx cooud-ui add pricing

Manual

Install the Cooud UI packages, then paste the block below.

pnpm add @cooud-ui/ui @cooud-ui/tokens @cooud-ui/theme

Usage

Copy the source for Plan toggle. Every class is a semantic token, so it re-themes with your app.

tsx

import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@cooud-ui/ui";
import { Check } from "lucide-react";

export function PricingToggleBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <Badge variant="secondary">Plans</Badge>
        <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
          Pick the pace that matches your team.
        </h2>
        <div className="mx-auto mt-6 inline-flex rounded-full border border-border bg-surface-inset p-1">
          <Button variant="secondary" size="sm" className="rounded-full">Monthly</Button>
          <Button variant="ghost" size="sm" className="rounded-full">Annual - save 20%</Button>
        </div>
      </div>

      <div className="mx-auto mt-12 grid max-w-4xl grid-cols-[repeat(auto-fit,minmax(min(100%,18rem),1fr))] gap-6">
        {/* Map your plans here */}
      </div>
    </section>
  );
}