labsUI

Pricing

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.

npx @kznlabs/labsui add pricing

Hobby

One server, the essentials.

$0/ month, billed monthly

  • 1 server
  • Slash commands
  • 7-day logs

Pro

Popular

For growing communities.

$9/ month, billed monthly

  • 10 servers
  • Custom commands
  • 90-day logs
  • Clip uploads

Network

Many servers, one dashboard.

$29/ month, billed monthly

  • Unlimited servers
  • Role sync
  • Audit export
  • Priority support
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>,        },      ]}    />  );}

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

  • currencydefault "USD"
    string

    ISO 4217 code for the price, e.g. "EUR".

  • defaultPerioddefault "monthly"
    Period

    Billing period selected at first render.

  • localedefault "en-US"
    string

    BCP 47 locale for number formatting.

  • yearlyNote
    string

    Next to "Yearly", e.g. "−17%".

PropTypeDefault
plans*

Plans in display order.

Plan[]—
currency

ISO 4217 code for the price, e.g. "EUR".

string"USD"
defaultPeriod

Billing period selected at first render.

Period"monthly"
locale

BCP 47 locale for number formatting.

string"en-US"
yearlyNote

Next to "Yearly", e.g. "−17%".

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

* required. Every component also takes className.