Tag

A small pill-shaped label with 3 color variants, ideal for categorization and filtering.

Preview

LavenderOrangeActive

npx shadcn@latest add @shadszn/tag

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

export default function Example() {
  return <Tag variant="lavender">React</Tag>
}

<Tag variant="lavender">Lavender</Tag>
<Tag variant="orange">Orange</Tag>
<Tag variant="active">Active</Tag>

Prop	Type	Default	Description
variant	"lavender" \| "orange" \| "active"	"lavender"	Color variant.
className	string	---	Additional CSS classes.