Tree Select

Component 8

About

A dropdown select whose options are organized as a hierarchy, like teams inside departments or categories inside a catalogue, with search and tri-state checkbox multi-select.

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

Code

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

Usage.tsx

"use client";

import { TreeSelect, type TreeSelectNode } from "@/components/ui/tree-select";

const departments: TreeSelectNode[] = [
  {
    id: "engineering",
    label: "Engineering",
    children: [
      { id: "eng-platform", label: "Platform" },
      { id: "eng-frontend", label: "Frontend" },
      { id: "eng-mobile", label: "Mobile" },
      { id: "eng-infra", label: "Infrastructure" },
    ],
  },
  {
    id: "design",
    label: "Design",
    children: [
      { id: "design-product", label: "Product Design" },
      { id: "design-brand", label: "Brand" },
    ],
  },
  {
    id: "data",
    label: "Data",
    children: [
      { id: "data-science", label: "Data Science" },
      { id: "data-eng", label: "Data Engineering" },
      { id: "data-analytics", label: "Analytics", disabled: true },
    ],
  },
];

export default function TreeSelectDemo() {
  return (
    <div className="flex min-h-[360px] w-full items-start justify-center bg-background p-10 text-foreground">
      <TreeSelect
        nodes={departments}
        multiple
        label="Notify teams"
        defaultValue={["eng-platform", "eng-frontend", "data-science"]}
        defaultExpanded={["engineering"]}
      />
    </div>
  );
}