Components
Tag
A semantic pill, and a category chip whose colour means nothing.
NeutralIn reviewApprovedPendingRejected
InfrastructureDesignComplianceProcurement
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/tag.jsonTwo components, deliberately
Tag is semantic — it says good, bad, waiting. It is a pill, and neutral is
outlined rather than filled so an absence of state does not shout.
CategoryTag is an identity. Its hue separates Design from Compliance and
carries no judgement whatsoever. It uses radius/sm rather than a full pill,
which is the shape difference that stops the two being confused at a glance.
Never use CategoryTag's green for success, or its red for failure. The moment
an identity hue is read as sentiment, every other category inherits a meaning it
does not have.
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | Tag only. Semantic state. |
| hue | "blue" | "green" | "purple" | "amber" | "cyan" | "red" | "neutral" | "blue" | CategoryTag only. Identity, not sentiment. |