Billing toggle

Free

A monthly/yearly switch whose price animates as it changes.

Installs components/ui/billing-toggle.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/billing-toggle.json

/ month

When to use #

Use it for

Pricing pages and upgrade dialogs with two billing periods.
You want the new price to feel connected to the choice.

Skip it when

More than three periods; use radio cards.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/billing-toggle.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { BillingToggle } from "@/components/ui/billing-toggle"

export function BillingPeriod() {
  const [period, setPeriod] = useState("monthly");
  return (
    <BillingToggle
      value={period}
      onValueChange={setPeriod}
      options={[
        { value: "monthly", label: "Monthly" },
        { value: "yearly", label: "Yearly", badge: "Save 20%" },
      ]}
      price={period === "monthly" ? "$29 / month" : "$23 / month"}
      priceDirection={period === "monthly" ? "up" : "down"}
    />
  );
}

API reference #

BillingToggle

component

PropTypeDefault

labelstring"Billing period"

options *readonly BillingOption[]—

value *string—

onValueChange *(value: string) => void—

pricestring—

priceDirection"none" | "up" | "down""none"

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.