Three plans with a monthly/annual toggle, usage chips and a framed recommended tier.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/pricing-tiers
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { ThreeTierPricing } from "@/components/blocks/pricing-tiers";45export function Pricing() {6return (7<ThreeTierPricing8annualDiscount={0.2}9plans={[10{ name: "Hobby", body: "For side projects.", monthly: 0, usage: ["1 project", "1 seat"], features: ["Community support"], cta: "Start free", href: "/signup" },11{ name: "Team", body: "For small teams.", monthly: 29, usage: ["10 projects", "5 seats"], features: ["Analytics", "SSO"], cta: "Start trial", featured: true },12{ name: "Scale", body: "For larger orgs.", monthly: 89, usage: ["Unlimited", "25 seats"], features: ["Audit log", "SLA"], cta: "Contact sales", href: "/contact" },13]}14onSelect={(plan, period) => console.log(plan.name, period)}15/>16);17}
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingPlan[] | Starter, Pro, Business | Plans: name, body, monthly price, usage lines, features, cta, href, featured |
| annualDiscount | number | 0.33 | Fraction taken off the monthly price when billed annually |
| currency | string | "$" | Symbol before the price |
| periodLabel | string | "/month" | Text after the price |
| monthlyLabel | string | "Monthly" | First toggle option |
| annualLabel | string | "Annual" | Second toggle option |
| discountLabel | string | "33% off" | Badge on the annual option; derived from the discount |
| recommendedLabel | string | "Recommended for you" | Line above the featured plan |
| includedLabel | string | "What's included" | Heading above each feature list |
| period | "monthly" | "annual" | – | Controlled billing period |
| defaultPeriod | "monthly" | "annual" | "monthly" | Billing period on first render |
| onPeriodChange | (period: BillingPeriod) => void | – | The toggle changed |
| onSelect | (plan: PricingPlan, period: BillingPeriod) => void | – | A plan button was clicked |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.