Chip
Fourteen variants across two containers - a draggable variable token and the panel it lives in. The one component here with no shadcn/ui original.
Ten variants, because Plain cannot be grabbed
Type decides what sits next to the label: nothing, a grip on the left, or a close cross on the right. State only ever moves the surface and the ink. Plain has no handle and no button, so Hover and Dragging would be states it can never reach, and the file leaves them out.
| Type | Default | Hover | Dragging | Disabled |
|---|---|---|---|---|
| Plain | Name | not drawn | not drawn | Name |
| Drag | Name | Name | Name | Name |
| Close | Name | Name | Name | Name |
A dragged chip goes from the grey surface to plain white and picks up two stacked drop shadows, 0 1 3 and 0 1 2 at minus one spread, both black at 10%. That is the only place in the component where anything leaves the flat plane, and it is what makes a chip in flight read as separate from the group it came out of.
Every other component in the kit dims the whole shape for Disabled. Chip does not: the grey stays, and only the label and the icon drop to base.muted-foreground. A chip is content as much as it is a control, so an unavailable one still has to be legible in a list.
Chip Group, with the header parts optional
A 420-wide panel holding captioned rows of chips that wrap. Both header parts are axes rather than fixed furniture, so the same component serves a full variable picker and a bare list of rows dropped into a sidebar.
A variable palette next to the field it fills
The 900 by 1368 frame builds one scenario end to end rather than showing the chip on its own. Click a variable to drop it into the message, type in the search to narrow every group at once, and close a city to take it out of the selection.
A dropped chip lands as its variable name in double braces.
Two containers, fourteen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Chip
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.
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.
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.
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.
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.