About
Metered usage panel with per-resource progress bars that tint amber near the limit and red over it. Ships composable parts.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Usage Dashboard to your project and fits it to your theme.
Code
How Usage Dashboard is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import UsageDashboardBlock from "@/components/ui/usage-dashboard";
export default function UsageDashboardDemo() {
return <UsageDashboardBlock />;
}
















