# Usage-based Pricing
URL: /docs/components/manage-subscription/usage-based-pricing

Interactive usage-based pricing with a ruler slider, 100-step grid, clickable 1,000-credit markers, and smooth animations.

***

title: Usage-based Pricing
description: Interactive usage-based pricing with a ruler slider, 100-step grid, clickable 1,000-credit markers, and smooth animations.
---------------------------------------------------------------------------------------------------------------------------------------

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="usage-based-pricing">
      <UsageBasedPricingDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="src/components/usage-based-pricing-demo.tsx"
    "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="mx-auto max-w-5xl" />
        </div>
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none">
  <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
      <Tab value="npx">
        ```bash
        npx shadcn@latest add @billingsdk/usage-based-pricing
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/usage-based-pricing
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/usage-based-pricing
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/usage-based-pricing
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs">
      <Tab value="npx">
        ```bash
        npx @billingsdk/cli add usage-based-pricing
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add usage-based-pricing
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add usage-based-pricing
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add usage-based-pricing
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

```tsx
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.                                                                                                |