Pricing toggle
Three pricing plans with a monthly/yearly switch: prices morph digit by digit, the yearly saving badge slides in, and the recommended plan carries a slow border light.
Preview
Resize it, switch the theme, replay the entrance — or read the source.
Simple pricing for every stage
Start free, then pick the plan that fits your team. No hidden fees, cancel whenever you like.
Starter
For small projects and side ideas finding their feet.
Starter plan, $19 per month, billed monthly.
- Up to 3 projects
- 10 GB storage
- Basic analytics
- Email support
Studio
RecommendedFor growing teams that ship every week.
Studio plan, $49 per month, billed monthly.
- Unlimited projects
- 100 GB storage
- Advanced analytics
- Custom domains
- Priority support
Scale
For organisations that need control and room to grow.
Scale plan, $99 per month, billed monthly.
- Everything in Studio
- 1 TB storage
- SSO and audit logs
- Dedicated support
- 99.9% uptime SLA
Installation
Add the block to a project that already uses shadcn/ui.
npx shadcn@latest add https://prequelui.terravidhal.me/r/pricing-toggle.jsonRequires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.
Usage
Import the named export and render it with your own data.
Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.
import { PricingToggle } from "@/components/prequel/pricing-toggle/pricing-toggle";
export default function DashboardPage() {
return <PricingToggle />;
}import { PricingToggle } from "@/components/prequel/pricing-toggle/pricing-toggle";
export default function DashboardPage() {
return <PricingToggle />;
}Props
Every prop is optional and ships with demo-data defaults.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes merged onto the root element. |
title | string | — |
subtitle | string | — |
plans | PricingPlan[] | — |
defaultPeriod | BillingPeriod | — |
yearlyDiscount | number | Percentage shown on the yearly saving badge. Defaults to 20. |
currency | string | Currency symbol placed before every price. Defaults to "$". |
onSelectPlan | (plan: PricingPlan, period: BillingPeriod) => void | — |
Accessibility
The rules every PrequelUI block follows, verified against this block's source.
Charts and graphics expose a text summary via role="img" and an aria-label describing the data.
Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.
Every button carries a visible focus ring so keyboard users can always see where they are.
The block honours prefers-reduced-motion: animations are skipped and content is fully visible.
Live updates run on timers inside effects and pause when the block is off-screen or hovered.