Lazy-ui
Lazy-ui
registry components
DocsComponentsBlocksChangelog
GitHub0Install

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
Pricing

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$01234567890123456789/ user / month

Unlimited projects, shared workspaces, SSO, and priority support for growing teams.

Business
$48$01234567890123456789/ user / month

Adds SAML, SCIM provisioning, audit logs, 99.9% SLA, and a dedicated success manager.

Start 14-day trial

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.

PropTypeDefaultDescription
eyebrowstring"Pricing"Uppercase mono label above the heading.
headingReactNode—Heading content with optional `<em>` accents.
subheadstring—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.
classNamestring—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} />;
}