184 Components
Interactive Pricing Tier Dial
CardsLogarithmic scrubbable SaaS pricing calculator with dynamic tier switching (Starter, Pro, Growth, Scale), annual discount percentage toggles, and live feature checklists.
Usage-Based Billing
Scale As You Grow
Active Tier: Pro
$45/ month
50k Monthly Active Users
1,000 MAU Drag to adjust1,000,000 MAU
Unlimited Team Workspaces
Priority 24/7 Slack Support
Advanced Rate Limits (600 req/min)
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/interactive-pricing-tier-dial.json"
Props
TypeScript props supported by <InteractivePricingTierDial />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialUsers | number | 50000 | Default starting number of monthly active users. |
| currency | string | "$" | Currency symbol displayed alongside numbers. |
| annualDiscountPercent | number | 20 | Discount percentage applied when Annual billing is toggled. |
| onSelectPlan | (tier: string, price: number, isAnnual: boolean) => void | — | Callback when the CTA plan button is clicked. |
Key Features
- Logarithmic user slider adjusting MAU smoothly from 1k to 1M.
- Dynamic tier classification: Starter ($0), Pro ($29+), Growth ($129+), and Scale ($499+).
- Annual billing toggle with automatic 20% discount deduction.
- Dynamic tier feature checklist adapting with plan upgrades.
- Responsive, accessible range slider with keyboard step navigation.
Keyboard & Accessibility
- Accessible HTML range input with proper aria-label.
- High contrast price and tier typography.