← All blocks

Usage slider with a live estimate

pricing · usage-slider · pricing-usage-slider

npx shadcn@latest add @plus-ui/pricing-usage-slider

Default 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."
}