Tag Group

A tag group displays a collection of tags.

<TagGroup>
  <Label>Categories</Label>
  <TagList>
    <Tag>News</Tag>
    <Tag>Travel</Tag>
    <Tag>Gaming</Tag>
    <Tag>Shopping</Tag>
  </TagList>
</TagGroup>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/tag-group

Usage

import { TagGroup, TagList, Tag } from "@/components/ui/tag-group";

<TagGroup>
	<TagList>
		<Tag>React</Tag>
		<Tag>TypeScript</Tag>
	</TagList>
</TagGroup>

Examples

API Reference

A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.

Prop	Type	Default
	`ReactNode`	`—`
	`DOMRenderFunction<"div", undefined>`	`—`

	`SelectionMode`	`—`
	`SelectionBehavior`	`'toggle'`
	`Iterable<Key> \| "all"`	`—`
	`Iterable<Key> \| "all"`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`"clearSelection" \| "none"`	`'clearSelection'`

Last updated on 6/4/2026