Pricing · Bento
A bento dual-tier layout — small Free card next to a wide inverted Plus card with two sub-prices and an animated Annual/Monthly toggle.
pricing-2
Choose the plan
that fits.
Save 20% with annual billing
Free
A complete experience for individuals and small projects. Forever free.
Personal
$0
Up to 3 users, 3 projects, and 5 GB of storage. All core features included.
Paid plansMost popular
For teams ready to standardize on a single workspace. Full feature set, no usage caps.
Team
$24$/ user / month
Unlimited projects, shared workspaces, SSO, and priority support for growing teams.
Business
$48$/ user / month
Adds SAML, SCIM provisioning, audit logs, 99.9% SLA, and a dedicated success manager.
Enterprise & large teams
Volume pricing, custom terms, security review, and a named architect for 100+ seats.
0px
Customize
Edit props; preview updates instantly.
Customize
Billing
Props
Props accepted by Pricing2.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing" | Uppercase mono label above the heading. |
| heading | ReactNode | — | Heading content with optional `<em>` accents. |
| subhead | string | — | Sub-heading paragraph (rendered above the savings badge). |
| period | "yearly" | "monthly" | "yearly" | Billing period (controlled). Falls back to internal state when omitted. |
| onPeriodChange | (p: "yearly" | "monthly") => void | — | Fires whenever the toggle pill is clicked. |
| className | string | — | Extra class names merged onto the root `<section>`. |
Installation
Choose CLI for the one-line shadcn install, or copy the file manually.
npx shadcn@latest add https://2lazyui.com/r/pricing-2.json
Usage
Import the component and drop it into a render.
demo.tsx11 lines
import { Pricing2 } from "@/components/lazy-ui/blocks/pricing-2"; export function Demo() { return <Pricing2 />; } // Control the period externally: export function ControlledDemo() { const [period, setPeriod] = React.useState<"yearly" | "monthly">("yearly"); return <Pricing2 period={period} onPeriodChange={setPeriod} />; }