Usage meter
FreeEach plan limit with what is used of it: bars that turn amber near the limit and red over it, a note per metric and an upgrade button.
stats-04 · v1.2.0 · Stats block 4 of 4
npx shadcn@latest add @lib/stats-04About this stats block
Usage meter is a free stats block for shadcn/ui. Each plan limit with what is used of it: bars that turn amber near the limit and red over it, a note per metric and an upgrade button. It's one React file built on the shadcn/ui Button components, uses only your theme tokens, and works in Next.js, Vite, React Router, TanStack Start and Astro.
What's inside
- Light and dark mode from your theme
- Responsive, from phone to desktop
What it installs
- @lib/cell
- @lib/usage-meter-01
- shadcn/ui: button
- npm: lucide-react
Versions
- v1.2.0 Usage meter: rows like a progress list, a status in color; stats-03 is a ranking
- v1.0.0 Six more pieces of a page as blocks