Component · C-039

StatCard

A KPI card: label, tabular value, semantic delta, context and an optional sparkline. Color reinforces the reading, but the sign and the text explain the change.

Install

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

npx shadcn@latest add https://koten.codehive.com.co/r/stat-card.json

Accessibility

• The value and label are real text; the delta does not rely on color alone and also carries a sign and text.
• The sparkline needs an aria-label; the main value remains available as text.
• The card is not interactive; if it wraps a link, focus goes to the link, not the container.

Read the whole page

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

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