Component · C-021

Meter

Shows a level within a range rather than progress: stock, temperature or resource load. The tone describes the state of that level.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/meter.json

Accessibility

• Base UI uses role meter with value, minimum and maximum; the label describes the measured resource.
• The tone accompanies the number, it does not replace it: success, warning and danger are reinforcement.
• A real max keeps the level from being announced as a percentage that does not exist.
• showValue={false} hides the visible number but keeps the value exposed to assistive technology.

Read the whole page

• Markdown page
• Agent index (llms.txt)
• Full documentation (llms-full.txt)

Koten UI · llms.txt · llms-full.txt · Markdown