Components

Tag

A small labeled element for categorizing, filtering, or displaying metadata.

Overview

Tag renders a compact label for categorization, filtering, or metadata display. Supports dismissal, color variants, and group layouts.

<Tag>React</Tag>
<Tag variant="primary">Featured</Tag>
<Tag dismissible onDismiss={() => handleRemove('tag-1')}>Removable</Tag>

<Tag.Group>
  <Tag>TypeScript</Tag>
  <Tag>React</Tag>
  <Tag>Tailwind</Tag>
</Tag.Group>

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'secondary' \| 'destructive' \| 'outline'`	`'default'`	Visual style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tag size
`dismissible`	`boolean`	`false`	Show dismiss button
`onDismiss`	`() => void`	—	Dismiss callback

Component	When to Use Instead
Badge	Status indicator or count
Button	Actionable element

StatusDot

A small circular indicator that communicates the current status of an entity through color and optional pulse animation.

Carousel

Displays a series of content panels that can be navigated via controls, indicators, and auto-play.