← All blocks
Usage slider with a live estimate
pricing · usage-slider · pricing-usage-slider
npx shadcn@latest add @plus-ui/pricing-usage-sliderDefault content
{
"eyebrow": "Usage pricing",
"title": "Pay for the invoices you send, and nothing for the ones you don't",
"description": "Drag to your monthly invoice volume. The first 250 invoices are always included, and the rate drops as you grow.",
"currency": "USD",
"billing": {
"monthlyLabel": "Monthly",
"annualLabel": "Annual",
"annualNote": "Billed monthly",
"customLabel": "Let's talk",
"perMonthLabel": "/mo"
},
"tiers": [
{
"name": "Launch",
"description": "For SaaS teams sending their first invoices and running a single price book.",
"price": {
"monthly": 39,
"annual": 390
},
"unit": "up to 2,000 invoices a month",
"action": {
"label": "Start billing free",
"href": "#",
"variant": "primary"
},
"highlighted": false,
"featuresLabel": "Launch includes",
"features": [
"Hosted checkout and customer portal",
"Card, ACH and SEPA payments",
"Automatic dunning emails",
"Stripe and QuickBooks sync"
],
"usageLimit": 2000
},
{
"name": "Scale",
"description": "For teams with usage-based plans, multiple currencies and a finance team.",
"price": {
"monthly": 39,
"annual": 390
},
"unit": "up to 8,000 invoices a month",
"action": {
"label": "Start a 30-day trial",
"href": "#",
"variant": "primary"
},
"highlighted": true,
"badge": "Most popular",
"featuresLabel": "Everything in Launch, plus",
"features": [
"Metered and seat-based billing",
"Sales tax and VAT in 40 countries",
"Revenue recognition reports",
"NetSuite and Xero sync"
],
"usageLimit": 8000
},
{
"name": "Enterprise",
"description": "For high-volume billing with custom contracts and audit requirements.",
"price": {
"monthly": null,
"annual": null
},
"unit": "unlimited invoices, volume rates",
"action": {
"label": "Talk to billing experts",
"href": "#",
"variant": "secondary"
},
"highlighted": false,
"featuresLabel": "Everything in Scale, plus",
"features": [
"Volume rates below $0.05 per invoice",
"SSO, SCIM and audit log",
"Custom contract terms and invoicing",
"Named billing specialist"
],
"usageLimit": null
}
],
"usage": {
"label": "Invoices sent per month",
"unit": "invoices",
"min": 0,
"max": 12000,
"step": 100,
"defaultValue": 2400,
"baseFee": 39,
"baseFeeLabel": "Platform fee",
"rates": [
{
"label": "First 250 invoices",
"upTo": 250,
"perUnit": 0
},
{
"label": "251 to 2,000",
"upTo": 2000,
"perUnit": 0.15
},
{
"label": "Above 2,000",
"upTo": null,
"perUnit": 0.08
}
],
"estimateLabel": "Estimated monthly total",
"planLabel": "Your plan",
"breakdownLabel": "How it adds up"
},
"footnote": "Prices in USD, excluding tax. Refunded and voided invoices are never counted."
}