Usage Limit Slider Card React component
A spending limit card for usage-based billing: a slider that shows what's spent (split by service), the month's forecast and the limit handle together, presets and a forecast + 20% shortcut, a live message saying whether and when you'll hit the limit, alert thresholds with amounts, what happens at the limit, and save.
About the Usage Limit Slider Card component
Usage Limit Slider Card lets customers on usage-based pricing set a monthly spending cap with full context. The slider shows what they've spent, where the month is heading and where their limit sits, all on one track.
As the limit moves, a message explains the consequence in plain words: plenty of room, or the date they'll reach it at the current pace. Alert thresholds show the dollar amount for each percentage, and they choose whether services pause or just notify them when the limit is reached.
When to use it
Use it in billing settings for APIs, cloud platforms, AI credits and any product where the monthly bill depends on usage.
Show it next to the current invoice so people can act on what they see.
Installation
Add the Usage Limit Slider Card component to your project with the shadcn CLI. It lands in components/usage-limit-slider-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/usage-limit-slider-cardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<UsageLimitSliderCard /> accepts 10 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| spent | number | 642 |
| forecast | number | 1180 |
| max | number | 2500 |
| day | number | 12 |
| daysInMonth | number | 30 |
| breakdown | { label: string; amount: number; color: string }[] | BREAKDOWN |
| defaultValue | object | { limit: 1000, alerts: [50, 90], atLimit: "notify" } |
| defaultValue.limit* | number | — |
| defaultValue.alerts* | number[] | — |
| defaultValue.atLimit* | "pause" | "notify" | — |
| onSave | (value: UsageLimitValue) => Promise<void> | void | — |
| theme | "dark" | "light" | "dark" |
- spentnumberDefault: 642
- forecastnumberDefault: 1180
- maxnumberDefault: 2500
- daynumberDefault: 12
- daysInMonthnumberDefault: 30
- breakdown{ label: string; amount: number; color: string }[]Default: BREAKDOWN
- defaultValueobjectDefault: { limit: 1000, alerts: [50, 90], atLimit: "notify" }
- defaultValue.limit*number
- defaultValue.alerts*number[]
- defaultValue.atLimit*"pause" | "notify"
- onSave(value: UsageLimitValue) => Promise<void> | void
- theme"dark" | "light"Default: "dark"
Show all 13 propsShow fewer
| className | string | — |
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Usage Limit Slider Card FAQ
- How is the hit date worked out?
- From the average daily spend so far (spent ÷ day). The card finds the day that pace reaches the limit and compares it with the forecast you pass in.
- Is the slider keyboard accessible?
- Yes. A native range input sits on top of the custom track, so arrow keys, Page Up / Down and screen readers work, and its value text mentions when the limit is below the forecast.
- What should happen when the limit is reached?
- That's the atLimit choice. Notify keeps services running and sends an alert; pause stops paid usage until the next month. Enforce the choice on your server.
- How do I save the settings?
- onSave receives the limit, the alert percentages and the at-limit behavior. Reset brings back the last saved values.
- Can I show different services?
- Pass breakdown with a label, amount and color for each. The spent part of the track and the list below both use it.
