Tag

Labels in eight colours, closable chips and checkable filter tags (Ant Design’s CheckableTag).

2 files · 81 locdeps: clsx, tailwind-merge

defaultprimarysuccesswarningdangerinfopurplepink

#react#tailwind#webgl#a11y

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/tag.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs tag

Usage

import { Tag } from "@/components/opus/ui/tag";

<Tag color="success">Paid</Tag>
<Tag closable onClose={remove}>#react</Tag>
<Tag checkable checked={on} onCheckedChange={setOn}>Design</Tag>

API

Prop	Type	Default	Description
color	"default" \| "primary" \| "success" \| "warning" \| "danger" \| "info" \| "purple" \| "pink"	"default"	Colour.
closable / onClose	boolean / () => void	—	× button.
checkable / checked / onCheckedChange	boolean	—	Toggle chip mode.
icon	ReactNode	—	Leading icon.

← PreviousAvatar Next →Card