Components / Data display
TagChip
Colored tag with optional remove action.
Preview
DesignDelivery
1import { TagChip } from "@/components/ui/tag-chip"2
3export function TagChipDemo() {4 return <TagChip tone="blue" label="Design" removable onRemove={() => undefined} />5}removable
The removable style of this component.
DesignDelivery
1import { TagChip } from "@/components/ui/tag-chip"2
3export function TagChipDemo() {4 return <TagChip tone="blue" label="Design" removable onRemove={() => undefined} />5}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/tag-chipUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.