react-responsive-overflow-list

shadcn/ui Integration

Install the OverflowList component via the shadcn CLI. See the API Reference for props documentation.

Installation

npx shadcn@latest add https://eliav2.github.io/react-responsive-overflow-list/r/styles/radix-vega/overflow-list.json

Uses shadcn radix primitives

Live Preview

Responsive list with overflow items in a dropdown menu. Resize the container to see items move to the dropdown.

Primitive:
import { OverflowList } from "@/components/ui/overflow-list"

const tags = ["React", "TypeScript", "Tailwind CSS", "shadcn/ui", ...]

<OverflowList
  items={tags}
  renderItem={(tag) => (
    <span className="px-3 py-1 bg-secondary text-secondary-foreground rounded-full text-sm">
      {tag}
    </span>
  )}
/>
ReactTypeScriptTailwind CSSshadcn/uiRadix UINext.jsViteNode.jsGraphQLREST APIPostgreSQLRedis