Subscription ManagementUsage-based Pricing
Usage-based Pricing
Interactive usage-based pricing with a ruler slider, 100-step grid, clickable 1,000-credit markers, and smooth animations.
Pay as you use pricing
Start with a flat monthly rate that includes 4,000 credits.
$39.99/mo
4,000 credits per month
4,000
4,000 credits25,000 credits
"use client"
import { UsageBasedPricing } from "@/components/billingsdk/usage-based-pricing"
export function UsageBasedPricingDemo() {
return (
<div className="flex flex-1 flex-col justify-center text-center">
<UsageBasedPricing className="max-w-5xl mx-auto" />
</div>
)
}Installation
npx shadcn@latest add @billingsdk/usage-based-pricingpnpm dlx shadcn@latest add @billingsdk/usage-based-pricingyarn dlx shadcn@latest add @billingsdk/usage-based-pricingbunx shadcn@latest add @billingsdk/usage-based-pricingnpx @billingsdk/cli add usage-based-pricingpnpm dlx @billingsdk/cli add usage-based-pricingyarn dlx @billingsdk/cli add usage-based-pricingbunx @billingsdk/cli add usage-based-pricingUsage
import { useState } from "react";
import { UsageBasedPricing } from "@/components/billingsdk/usage-based-pricing";
export default function Page() {
const [credits, setCredits] = useState(4000);
return (
<div className="flex flex-1 flex-col items-center justify-center text-center space-y-6">
<UsageBasedPricing
className="w-full max-w-5xl"
min={4000}
max={25001}
snapTo={100}
currency="$"
basePrice={39.99}
includedCredits={4000}
value={credits}
onChange={setCredits}
onChangeEnd={(v) => console.log("Committed:", v)}
title="Pay as you use pricing"
subtitle="Start with a flat monthly rate that includes 4,000 credits."
/>
<div className="text-xs text-muted-foreground">Current value: {credits.toLocaleString()} credits</div>
</div>
);
}Features
- Smooth, lag-free slider with animated tick heights and precise pointer tracking.
- 100-credit live increments (configurable via
snapTo). - Clickable 1,000-credit dots that animate to the target instead of teleporting.
- Start/end labels centered beneath the first and last dots.
- Keyboard accessible: Arrow keys move by base step (default 100), Shift+Arrow moves faster, Home/End jump to edges.
- Price model example included: base price plus $10 per 1,000 credits above the included amount.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 4000 | Minimum credits. |
max | number | 25001 | Maximum credits. |
value | number | — | Controlled value (credits). |
defaultValue | number | 4000 | Uncontrolled initial credits. |
onChange | (value: number) => void | — | Called on value change during drag/animation. |
onChangeEnd | (value: number) => void | — | Called when interaction completes. |
step | number | 1 | Fine step (used for keyboard when snapTo not provided). |
snapTo | number | — | Live quantization step. If omitted, drag uses 100; release snaps to snapTo, else to step (>1), else to 100. |
currency | string | "$" | Currency symbol. |
basePrice | number | 39.99 | Base price covering included credits. |
includedCredits | number | 4000 | Credits included in base price. |
unitPricePerCredit | number | 0.01 | Unit price (not used in the $10/1000 example model). |
title | string | "Pay as you use pricing" | Heading text. |
subtitle | string | "Start with a flat monthly rate that includes 4,000 credits." | Subheading text. |
Manage Subscription
The Manage Subscription component provides a comprehensive interface for users to view and manage their current subscription details, including plan information, billing details, and actions to update or cancel their subscription.
Invoice History
Read-only table for displaying past invoices and receipts with status and download actions.