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 { Tag, TagGroup } from "@/components/ui/heroui-tag-group"
export default function TagGroupBasic() {
return (
<TagGroup aria-label="Tags" selectionMode="single">
<TagGroup.List>
<Tag id="default-news">
<Newspaper />
News
</Tag>
<Tag id="default-travel">
<Globe />
Travel
</Tag>
<Tag id="default-gaming">
<Rocket />
Gaming
</Tag>
<Tag id="default-shopping">
<ShoppingBag />
Shopping
</Tag>
</TagGroup.List>
</TagGroup>
)
}