Three plans side by side with a monthly and yearly switch. Prices roll to their new values when the billing period changes.
For side projects and trying things out.
$0per month
For teams shipping to production.
$29per month
For security reviews and custom terms.
Custom
pnpm dlx shadcn@latest add @latheui/pricing-tablePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Pricing Table is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native section attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Plans" | Heading of the block. |
| plans | PricingPlan[] | sample plans | Plans to show, in order. |
| defaultPeriod | "monthly" | "yearly" | "monthly" | Billing period selected first. |
| yearlyNote | string | "Save 20%" | Note beside the yearly option. |
| currency | string | "USD" | ISO currency code for the prices. |
| onSelect | (plan: PricingPlan, period: BillingPeriod) => void | — | Called when a plan's button is pressed. |
| Prop | Type | Default | Description |
|---|---|---|---|
| id* (required) | string | — | Unique id. |
| name* (required) | string | — | Plan name. |
| description* (required) | string | — | One line on who it is for. |
| price* (required) | { monthly: number; yearly: number } | null | — | Price per month in each period. null shows priceLabel. |
| priceLabel | string | — | Shown instead of a number, for example “Custom”. |
| features* (required) | string[] | — | What the plan includes. |
| cta* (required) | string | — | Button text. |
| featured | boolean | — | Marks the plan as recommended. |
<PricingTable
title="Pricing"
currency="EUR"
yearlyNote="2 months free"
plans={[
{ id: "solo", name: "Solo", description: "For one person.", price: { monthly: 9, yearly: 7 }, features: ["1 seat"], cta: "Choose Solo" },
{ id: "team", name: "Team", description: "For a team.", price: { monthly: 39, yearly: 32 }, features: ["10 seats"], cta: "Choose Team", featured: true },
]}
/>