Chip
atomA small tracked-uppercase label/badge — the general badge/pill primitive. `tone` (or a `color` override) carries the meaning; `variant` picks the treatment: tinted (soft), bordered (outline), or filled (solid).
Install
npx shadcn@latest add @engram/chipRegistry item: /r/chip.json — the machine-readable definition agents install from.
Example
ArcMasterworkedWishlistJunkVoidAdept
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | ChipTone | "neutral" | Semantic tone — carries the meaning color. |
variant | ChipVariant | "soft" | soft = tinted fill (default) · outline = bordered · solid = filled. |
size | ChipSize | "md" | — |
color | string | — | Override the tone with any CSS color (e.g. an element/rarity token var). |
Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.