Tagdata-display

Removable or descriptive tag with chart-token accent colors and a labelled remove button.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/tag

의존 아이템locale style

Default

TagAccent 1Accent 2Accent 3Accent 4Accent 5

tag-demo.tsx

import { TAG_ACCENTS, Tag } from "@/components/ui/tag";
export default function TagDemo() {  return (    <div className="flex flex-wrap gap-2">      {TAG_ACCENTS.map((accent) => (        <Tag key={accent} accent={accent}>          {accent === "neutral" ? "Tag" : `Accent ${accent}`}        </Tag>      ))}    </div>  );}