Tag Group

A flex container for grouping multiple Tag components with consistent spacing and alignment.

ExamplesCodeUsageChangelog

Basic

Vue 3TypeScriptTailwindVite

Tailwind v4

<TagGroup>
  <Tag text="Vue 3" color="green" />
  <Tag text="TypeScript" color="blue" />
  <Tag text="Tailwind" color="teal" />
  <Tag text="Vite" color="purple" />
</TagGroup>

Alignment end

Use alignment="end" to push the tags to the right side of their container.

FrontendDesignAPICritical

Tailwind v4

<TagGroup alignment="end">
  <Tag text="Frontend" color="blue" />
  <Tag text="Design" color="purple" />
  <Tag text="API" color="teal" />
  <Tag text="Critical" color="red" />
</TagGroup>

Props

Prop	Type	Default	Description
alignment	'start' | 'end'	'start'	Horizontal alignment of tags within the group

Slots

Slot	Description
default	One or more Tag components