Chip Group

Component 12

About

A row of selectable filter chips for narrowing a list by facets like topics, statuses, or tags, with an animated check and a "+N more" overflow for long sets.

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

Code

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

Usage.tsx

"use client";

import ChipGroup from "@/components/ui/chip-group";
import { useState } from "react";

const options = [
  { value: "design", label: "Design" },
  { value: "engineering", label: "Engineering" },
  { value: "product", label: "Product" },
  { value: "marketing", label: "Marketing" },
  { value: "sales", label: "Sales" },
  { value: "support", label: "Support" },
];

export default function ChipGroupDemo() {
  const [value, setValue] = useState<string[]>(["design"]);

  return (
    <div className="flex w-full max-w-md items-center justify-center p-8">
      <ChipGroup
        label="Topics"
        options={options}
        value={value}
        onValueChange={setValue}
        maxVisible={4}
      />
    </div>
  );
}