# Pricing

- Page: <https://kznlabs.github.io/labsUI/components/pricing>

## Pricing (`pricing`, block)

Plan cards with a monthly / yearly segmented switch. Prices roll on a spring in the direction they moved; the featured plan is outlined in the accent. Card, Badge, ToggleGroup, Button.

- Install: `npx @kznlabs/labsui add pricing`
- Docs: <https://kznlabs.github.io/labsUI/components/pricing>
- Brings: badge, card, list, toggle-group, use-controllable-state, use-indicator, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Pricing>`: Plan cards with a monthly / yearly switch (segmented ToggleGroup). Prices swap on a spring,
rolling up when they drop and down when they rise.
  - `plans: Plan[]`: Plans in display order.
  - `currency?: string` = `"USD"`: ISO 4217 code for the price, e.g. "EUR".
  - `defaultPeriod?: Period` = `"monthly"`: Billing period selected at first render.
  - `locale?: string` = `"en-US"`: BCP 47 locale for number formatting.
  - `yearlyNote?: string`: Next to "Yearly", e.g. "−17%".

- `type Period = "monthly" | "yearly"`
- `type Plan = { name: string; description?: string; price: Record<Period, number>; features: string[]; cta: ReactNode; featured?: boolean; badge?: string; }`

### Usage

```tsx
<Pricing yearlyNote="−20%" plans={[{ name: "Pro", price: { monthly: 9, yearly: 7 }, features: ["10 servers"], featured: true, badge: "Popular", cta: <Button className="w-full">Start trial</Button> }]} />
```

### Example: pricing-page.tsx

```tsx
import { Pricing } from "@/components/blocks/pricing";
import { Button } from "@/components/ui/button";

export function PricingPage() {
  return (
    <Pricing
      currency="EUR"
      locale="de-DE"
      yearlyNote="−20%"
      plans={[
        {
          name: "Starter",
          description: "For side projects.",
          price: { monthly: 0, yearly: 0 },
          features: ["1 project", "Community support"],
          cta: <Button variant="outline" className="w-full">Start free</Button>,
        },
        {
          name: "Team",
          description: "For small teams shipping weekly.",
          price: { monthly: 12, yearly: 10 },
          features: ["10 projects", "Roles and audit log", "Email support"],
          featured: true,
          badge: "Popular",
          cta: <Button className="w-full">Start 14-day trial</Button>,
        },
      ]}
    />
  );
}
```