HeroUI Tag Group

Component 5

About

HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Tag Group to your project and fits it to your theme.

Code

How HeroUI Tag Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  )
}