Billing toggle

A monthly and yearly switch with a savings badge and prices that roll to the new amount.

npx shadcn@latest add @silicon-ui/billing-toggle
inputsnew
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/billing-toggle

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/billing-toggle/billing-toggle.tsx
    • components/silicon-ui/billing-toggle/billing-toggle.module.css
    • components/silicon-ui/animated-counter/animated-counter.tsx shared
    • components/silicon-ui/animated-counter/animated-counter.module.css shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { BillingToggle } from "@/components/silicon-ui/billing-toggle/billing-toggle";

API reference

BillingToggle

PropTypeDefault
value*string—
onValueChange*(value: string) => void—
optionsBillingToggleOption[]DEFAULT_OPTIONS
label

Accessible name of the group.

string"Billing period"
size"md" | "lg""md"
classNamestring—

BillingPrice

PropTypeDefault
amount*number—
currencystring"$"
period

Period after the price, e.g. "per month". Swaps in place when it changes.

string—
was

Previous price, shown struck through when it is higher than `amount`.

number—
decimalsnumber0
classNamestring—

Dependencies

npm
motion
Registry
silicon-motion-tokensanimated-counter