Tag Group (Tailwind)

Component

About

A removable, selectable group of tags (chips) built on React Aria Components and styled with Tailwind CSS, for filtering, categorizing or multi-select input.

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

Code

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

Usage.tsx

import { TagGroup, Tag } from "@/components/ui/tailwind-taggroup";

export default function TagGroupDemo() {
  return (
    <TagGroup
      label="Ice cream flavor"
      selectionMode="single"
      defaultSelectedKeys={["chocolate"]}
    >
      <Tag id="chocolate">Chocolate</Tag>
      <Tag id="mint">Mint</Tag>
      <Tag id="strawberry">Strawberry</Tag>
      <Tag id="vanilla">Vanilla</Tag>
    </TagGroup>
  );
}