Billing ToggleProv1.0.0
The monthly / yearly choice on a pricing page, made to feel like a reward: a lit thumb springs across, the savings chip charges up cell by cell, and Billing Price rolls each digit to the new amount like an odometer, striking through what you no longer pay.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-billing-toggleNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { BillingPrice, BillingToggle, type BillingPeriod } from "@/components/ui/lumen/controls/billing-toggle";
export function PlanPrice() {
const [period, setPeriod] = React.useState<BillingPeriod>("yearly");
return (
<div className="grid gap-4">
<BillingToggle value={period} onValueChange={setPeriod} savings="Save 20%" />
<BillingPrice period={period} monthly={24} yearly={19} />
</div>
);
}Props
BillingToggle value / defaultValue / onValueChange"monthly""monthly" | "yearly"The period, controlled or not.
BillingToggle savings–stringThe chip beside Yearly, such as "Save 20%"; its cells light when Yearly is chosen.
BillingToggle labels–{ monthly?, yearly? }The words, for other languages.
BillingPrice period / monthly / yearly–period, number, numberThe price per month on each plan; the digits roll between them.
BillingPrice currency / locale"USD"stringFormatting (Intl).
BillingPrice per / note"/ month" / "Billed yearly, $228"string / ReactNodeAfter the amount, and the line under it.
Source
components/ui/lumen/controls/billing-toggle.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
