Tag Group

A tag group displays a collection of tags.

On this page

<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`	`—`

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

A tag list is a container for tags within a TagGroup.

Prop	Type	Default

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`function`	`—`
	`readonly any[]`	`—`

Tag

A Tag is an individual item within a TagList.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`Key`	`—`
	`boolean`	`—`
	`string`	`—`

Last updated on 6/16/2026