ns-ui
A tag/token input whose chips attach like burrs — hooked, not glued. Removing one takes a deliberate pull: it stretches at the trailing edge, pops free, and the row exhales closed behind it with a staggered ripple toward the caret.
Use when chips should feel hooked rather than glued so removing one visibly costs something, with all three routes (clicking the x, Backspace on a focused x, dragging the chip past 64px) funnelling through the same stretch-then-detach animation and the row exhaling closed toward the caret; pick tag-input-tear instead when the drag must be abortable mid-way with a visible tear progress, or tag-input-backspace when removal should stay a pure keyboard affair.
Install
npx shadcn add https://design.helpmarq.comns-ui / tag-input-pull — pull a chip loose, don't just delete it
5 tags
Click a chip's × to watch it stretch and pop free — the row exhales closed after. Or grab a chip and pull; release past the threshold to commit, or let go early and it eases back. Focus a chip and use Left/Right to move between them, Backspace/Delete to remove the focused one.
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | string[] | — | controlled tag list; omit for uncontrolled |
| defaultValue? | string[] | — | — |
| onChange? | (tags: string[]) => void | — | — |
| placeholder? | string | — | placeholder shown only while the list is empty |
| disabled? | boolean | — | — |
| className? | string | — | — |
| aria-label? | string | — | accessible name for the chip group |
| inputLabel? | string | — | accessible name for the text input |