Lomi UIComponents
Usage Meter
Track usage limits for checkout sessions, webhooks, payouts, or subscriptions.
Usage Meter
Use this for account limits, plan usage, or customer portal consumption.
Preview
Usage
Track payment and billing limits before customers hit them.
Checkout sessions820 / 1,000
Webhook deliveries6,400 / 10,000
Payouts89 / 100
Installation
Install to your codebase
Copy the component source with shadcn.
npx shadcn@latest add https://docs.lomi.africa/r/usage-meter.jsonUsage
import { UsageMeter } from '@/components/lomi-ui/usage-meter';
<UsageMeter
items={[
{ label: 'Checkout sessions', used: 820, limit: 1000 },
{ label: 'Payouts', used: 89, limit: 100 },
]}
/>;Props
| Prop | Type | Description |
|---|---|---|
items | UsageMeterItem[] | Usage rows. |
title | string | Optional heading. |
description | string | Optional supporting text. |