Chip Group

A primitive component that automatically collapses overflowing chips, exposing the hidden set via renderMore / onOverflowChange for consumer-side composition

Installation

$npx litefy@latest add chip-group
$pnpm dlx litefy@latest add chip-group
$yarn dlx litefy@latest add chip-group
$bun --bun litefy@latest add chip-group

Usage

Renders chips and collapses the overflow; hidden items go to onOverflowChange / renderMore(hidden), which mounts your trigger inline (Popover, Tooltip or plain text — your choice).

ReactTypeScriptTailwind CSSViteNext.jsWeb ComponentsAccessibilityDesign SystemCSSPerformance

React
TypeScript
Tailwind CSS
Vite
Next.js
Web Components
Accessibility
Design System
CSS
Performance

Container width: 240px

"use client";

import { useState } from "react";
import { ChipGroup, Popover, Slider } from "@/ui";
import type { ChipItem } from "@/ui";

const tags: ChipItem[] = [
  { value: "react", label: "React" },
  { value: "typescript", label: "TypeScript" },
  { value: "tailwindcss", label: "Tailwind CSS" },
  { value: "vite", label: "Vite" },
  { value: "next-js", label: "Next.js" },
  { value: "web-components", label: "Web Components" },
  { value: "accessibility", label: "Accessibility" },
  { value: "design-system", label: "Design System" },
  { value: "css", label: "CSS" },
  { value: "performance", label: "Performance" },
];

export default function ChipGroupBasicDemo() {
  const [width, setWidth] = useState(240);

  return (
    <div className="flex w-80 max-w-full flex-col gap-3">
      <div style={{ width }}>
        <ChipGroup
          items={tags}
          className="max-w-full"
          renderMore={(hidden) => (
            <Popover
              trigger={`+${hidden.length}`}
              classNames={{
                trigger:
                  "cursor-pointer rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-colors hover:bg-primary hover:text-primary-foreground",
              }}
            >
              <ul className="flex max-w-60 flex-col">
                {tags.map((item) => (
                  <li
                    key={item.value}
                    className="truncate px-2 py-1.5 text-sm text-muted-foreground"
                  >
                    {item.label}
                  </li>
                ))}
              </ul>
            </Popover>
          )}
        />
      </div>
      <Slider
        min={120}
        max={320}
        step={4}
        value={width}
        onChange={setWidth}
        aria-label="Container width"
      />
      <p className="text-sm text-muted-foreground">Container width: {width}px</p>
    </div>
  );
}

Returning a Tooltip-wrapped button from renderMore gives hover preview of the collapsed content:

ReactTypeScriptTailwind CSSViteNext.jsWeb ComponentsAccessibilityDesign SystemCSSPerformance

"use client";

import { ChipGroup, Tooltip, TooltipContent, TooltipTrigger } from "@/ui";
import type { ChipItem } from "@/ui";

const tags: ChipItem[] = [
  { value: "react", label: "React" },
  { value: "typescript", label: "TypeScript" },
  { value: "tailwindcss", label: "Tailwind CSS" },
  { value: "vite", label: "Vite" },
  { value: "next-js", label: "Next.js" },
  { value: "web-components", label: "Web Components" },
  { value: "accessibility", label: "Accessibility" },
  { value: "design-system", label: "Design System" },
  { value: "css", label: "CSS" },
  { value: "performance", label: "Performance" },
];

export default function ChipGroupTooltipDemo() {
  return (
    <ChipGroup
      items={tags}
      className="max-w-xs"
      renderMore={(hidden) =>
        hidden.length > 0 && (
          <Tooltip>
            <TooltipTrigger className="shrink-0 cursor-pointer rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium whitespace-nowrap">
              +{hidden.length}
            </TooltipTrigger>
            <TooltipContent>
              <span className="flex max-w-60 flex-wrap gap-1">
                {hidden.map((item) => (
                  <span
                    key={item.value}
                    className="rounded-full bg-muted px-2 py-0.5 text-xs whitespace-nowrap"
                  >
                    {item.label}
                  </span>
                ))}
              </span>
            </TooltipContent>
          </Tooltip>
        )
      }
    />
  );
}

API Reference

ChipGroup

Prop	Type	Default	Description
`items`	`ChipItem[]`	-	All chip items
`onOverflowChange`	`(hidden: ChipItem[]) => void`	-	Fired when the hidden set changes, carrying the hidden items
`renderMore`	`(hidden: ChipItem[]) => React.ReactNode`	-	Renders a custom trigger inline; `hidden` is the collapsed items
`className`	`ClassNameValue`	-	Custom class names, applied to the outer container (set `max-width` here)
`classNames`	`chip`	-	Custom class names per slot

ChipItem

Field	Type	Default	Description
`value`	`string`	-	Unique identity
`label`	`React.ReactNode`	-	Chip text

Installation

Usage

Tooltip Composition

API Reference

ChipGroup

ChipItem

On this page