Pricing Toggle

Inputs

Monthly/yearly billing toggle with savings badge and animated indicator.

Pricing Toggle — monthly/yearly with savings badge

MonthlyYearly

$19

Pro / month

$49

Team / month

Instalação via CLI

$ npx kikitocn add pricing-toggle

Interno:

@/lib/utils

Exemplo de uso

Pricing ToggleExample.tsx

import { PricingToggle } from "@/components/ui/cn/pricing-toggle/PricingToggle";

export function PricingToggleExample() {
  return (
    <PricingToggle />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`'monthly' \| 'yearly'`	`undefined`	Período selecionado (controlled)
`defaultValue`	`'monthly' \| 'yearly'`	`'monthly'`	Período inicial (uncontrolled)
`onChange`	`(period: 'monthly' \| 'yearly') => void`	`undefined`	Callback quando o período muda
`savingsLabel`	`string`	`undefined`	Badge de economia no período anual (ex: 'Save 20%')

Voltar para Inputs

Carregando…