Usage meter
A component to display a customer's API usage against their plan limits with progress bars.
The UsageMeter is a standalone, copy-pasteable UI component built with standard HTML elements and Tailwind CSS semantic utility classes. It adapts automatically to your theme without requiring additional Shadcn primitives.
Preview
Usage
Track payment and billing limits before customers hit them.
API Calls8,500 / 10,000
Database Storage4.2 / 5 GB
Active Users12 / 100
import { UsageMeter } from '@/components/lomi-ui/usage-meter';
export default function Demo() {
return (
<UsageMeter
items={[
{ label: 'API Calls', used: 8500, limit: 10000 },
{ label: 'Database Storage', used: 4.2, limit: 5, unit: 'GB' },
{ label: 'Active Users', used: 12, limit: 100 }
]}
/>
);
}