UI components
Compteur d'utilisation
Un composant pour afficher l'utilisation API d'un client par rapport aux limites de son forfait, avec des barres de progression.
Le UsageMeter est un composant UI autonome, prêt à copier-coller, construit avec des éléments HTML standard et des classes utilitaires sémantiques Tailwind CSS. Il s'adapte automatiquement à votre thème sans nécessiter de primitives Shadcn supplémentaires.
Aperçu
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 }
]}
/>
);
}