SDF Pricing Toggle
Pricing tiers with a monthly/yearly billing switch that animates the amounts and reveals the annual saving. Tabular figures, a featured tier, light + dark.
Free
Browse the full library with live previews.
$0/mo
Get started- Browse all components
- Live component previews
- Community support
Most popularPro
Full source across every surface, plus the CLI.
$19/mo
Billed monthlyUpgrade to Pro- Full component source
- React, Webflow & Figma
- CLI access to pull components
- New components weekly
Team
For studios shipping across many client sites.
$49/mo
Billed monthlyContact sales- Everything in Pro
- 5 seats included
- Priority support
- Private component requests
The full source is for members
Sign in and choose a plan to view and copy SdfPricingToggle.tsx. The live preview above is free to explore.
How to use. Copy SdfPricingToggle.tsx into your project (it's self-contained — the styles ship with it and dedupe across instances in React 19). Theme it by setting --sdf-* tokens on any ancestor. No dependencies, no build step.
