Components
Loading preview...
HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-tag-group"use client"
import { Globe, Newspaper, Rocket, ShoppingBag } from "lucide-react"
import { Avatar } from "@heroui/react"
import { Description, Label, Tag, TagGroup } from "@/components/ui/heroui-tag-group"
export default function TagGroupWithPrefix() {
return (
<div className="flex flex-col gap-8">
<TagGroup selectionMode="single">
<Label>With Icons</Label>
<TagGroup.List>
<Tag>
<Newspaper />
News
</Tag>
<Tag>
<Globe />
Travel
</Tag>
<Tag>
<Rocket />
Gaming
</Tag>
<Tag>
<ShoppingBag />
Shopping
</Tag>
</TagGroup.List>
<Description>Tags with icons</Description>
</TagGroup>
<TagGroup selectionMode="single">
<Label>With Avatars</Label>
<TagGroup.List>
<Tag>
<Avatar className="size-4">
<Avatar.Image src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg" />
<Avatar.Fallback>F</Avatar.Fallback>
</Avatar>
Fred
</Tag>
<Tag>
<Avatar className="size-4">
<Avatar.Image src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />
<Avatar.Fallback>M</Avatar.Fallback>
</Avatar>
Michael
</Tag>
<Tag>
<Avatar className="size-4">
<Avatar.Image src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/purple.jpg" />
<Avatar.Fallback>J</Avatar.Fallback>
</Avatar>
Jane
</Tag>
</TagGroup.List>
<Description>Tags with avatars</Description>
</TagGroup>
</div>
)
}