Fourteen variants across two containers - a draggable variable token and the panel it lives in. The one component here with no shadcn/ui original.
Two containers, fourteen variants
Chip - Type × State: Plain · Drag · Close × Default · Hover · Dragging · Disabled - Plain carries only Default and Disabled
Chip Group - Show Title × Show Search: Yes · No × Yes · No
Using the Chip
Why is there no shadcn/ui link on this page?
Because shadcn/ui has no Chip. Every other page in this kit tracks an upstream component; this one was brought in from the product library the kit was assembled alongside and retranslated onto the same tokens, which is why it sits at the same 32px height and the same base.muted surface as everything else.
What is Chip actually for?
A variable you can pick up. The usage frame builds the case it was drawn for: a panel of available variables next to a message field, where dragging a chip in writes its name into the text as a double-braced placeholder. Close type covers the other job, a removable selection.
Why does Plain have only two states?
It has no grip and no cross, so there is nothing to hover and nothing to drag. Drawing Plain / Dragging would put a state in the dropdown that the component can never enter. Ten variants is the honest count.
Does Disabled dim the chip?
No, and that is deliberate. The grey surface stays exactly where it is and only the label and icon go to base.muted-foreground. Chip is content as much as control, so an unavailable one still has to be readable in a row of available ones.
What do the Chip Group axes do?
They hide the title and the search bar. Both are real layers in the file rather than separate components, so the panel keeps its 420 width and its 16px padding in all four combinations and only its height changes, from 396 down to 316.