Pricing · Usage

Usage-based pricing with an interactive tier slider — left rail of trust points, right card whose price tweens between stops via an animated Counter.

pricing-5
Pricing · usage based

Pricing that scales
with your team.

One plan, three meters. Move them to match your actual usage and the price adjusts. Change tiers monthly — no commitment, no surprise overage.

  • Predictable monthly billing.
    Flat rate based on the tier you select. Overage is capped and surfaced before it hits your bill.
  • All features included on every tier.
    SSO, audit logs, integrations, and priority support are never paywalled. You only pay for capacity.
  • 30-day money-back guarantee.
    If it isn't right for your team in the first 30 days, request a full refund. No questions asked.
Team tier · estimateUpdated live
$012345678901234567890123456789/ month, billed monthly
Workspace size
Team
FreeStarterTeamScaleBusinessEnterprise
Users
Up to 50
Projects
200
Storage
500 GB
Support
Priority · 2h
Compare plans
0px

Customize

Edit props; preview updates instantly.

Customize
Starting tier
Team

Props

Props accepted by Pricing5.

PropTypeDefaultDescription
eyebrowstring"Pricing · usage based"Uppercase mono label above the heading.
headingReactNode—Heading content with optional `<em>` accents.
usagePricingUsageStop[]DEFAULT_USAGE (6 stops)Slider stops. Each: `{ name, users, projects, storage, price }`. `price: null` renders as 'Custom'.
defaultTiernumber2Initial slider index (0 = first stop).
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-5.json

Usage

Import the component and drop it into a render.

demo.tsx5 lines
import { Pricing5 } from "@/components/lazy-ui/blocks/pricing-5";

export function Demo() {
  return <Pricing5 />;
}