Pricing Toggle
Pro
A monthly and yearly switch with a savings badge, where prices roll to their new values.
Save 21%
Starter
For side projects
$12 per month
Billed monthly
- 3 projects
- Basic analytics
Team
PopularFor growing teams
$29 per month
Billed monthly
- Unlimited projects
- Shared workspaces
Business
For larger orgs
$59 per month
Billed monthly
- SSO and audit log
- Priority support
Customize
Currency
Start on
20%
Installation
Pricing Toggle is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy pricing-toggle.tsx into components/ui and run npm install motion.
Usage
import { PricingToggle } from "@/components/ui/pricing-toggle";
<PricingToggle
currency="$"
plans={[
{ name: "Starter", monthly: 12, yearly: 10 },
{ name: "Team", monthly: 29, yearly: 23, highlighted: true },
]}
onSelectPlan={(plan, cycle) => checkout(plan.name, cycle)}
/>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| plans | { name, monthly, yearly, description?, features?, highlighted?, cta? }[] | — | Plans in order. Both prices are per month; yearly is the per-month price billed yearly. |
| currency | string | "$" | Symbol placed before every price. |
| defaultCycle | "monthly" | "yearly" | "monthly" | Billing cycle shown first, when uncontrolled. |
| cycle | "monthly" | "yearly" | — | Billing cycle, for controlled use. |
| onChange | (cycle) => void | — | Called when the billing cycle changes. |
| onSelectPlan | (plan, cycle) => void | — | Called by each plan's button. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion