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.

0px

Customize

Billing

Usage

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} />;
}