CollapsibleFileTree() — ui Function Reference

Architecture documentation for the CollapsibleFileTree() function in collapsible-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ CollapsibleFileTree() — ui Function Reference

Dependency Diagram

graph TD
  591116f6_130d_7dd0_cc72_2f8fffb4c4eb["CollapsibleFileTree()"]
  9c2f8751_9cee_835d_4c31_60aeed473c38["collapsible-example.tsx"]
  591116f6_130d_7dd0_cc72_2f8fffb4c4eb -->|defined in| 9c2f8751_9cee_835d_4c31_60aeed473c38
  style 591116f6_130d_7dd0_cc72_2f8fffb4c4eb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/collapsible-example.tsx lines 38–165

function CollapsibleFileTree() {
  const fileTree: FileTreeItem[] = [
    {
      name: "components",
      items: [
        {
          name: "ui",
          items: [
            { name: "button.tsx" },
            { name: "card.tsx" },
            { name: "dialog.tsx" },
            { name: "input.tsx" },
            { name: "select.tsx" },
            { name: "table.tsx" },
          ],
        },
        { name: "login-form.tsx" },
        { name: "register-form.tsx" },
      ],
    },
    {
      name: "lib",
      items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }],
    },
    {
      name: "hooks",
      items: [
        { name: "use-media-query.ts" },
        { name: "use-debounce.ts" },
        { name: "use-local-storage.ts" },
      ],
    },
    {
      name: "types",
      items: [{ name: "index.d.ts" }, { name: "api.d.ts" }],
    },
    {
      name: "public",
      items: [
        { name: "favicon.ico" },
        { name: "logo.svg" },
        { name: "images" },
      ],
    },
    { name: "app.tsx" },
    { name: "layout.tsx" },
    { name: "globals.css" },
    { name: "package.json" },
    { name: "tsconfig.json" },
    { name: "README.md" },
    { name: ".gitignore" },
  ]

  const renderItem = (fileItem: FileTreeItem) => {
    if ("items" in fileItem) {
      return (
        <Collapsible key={fileItem.name}>
          <CollapsibleTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none"
            >
              <IconPlaceholder
                lucide="ChevronRightIcon"
                tabler="IconChevronRight"
                hugeicons="ArrowRight01Icon"
                phosphor="CaretRightIcon"
                remixicon="RiArrowRightSLine"
                className="transition-transform group-data-[state=open]:rotate-90"
              />
              <IconPlaceholder
                lucide="FolderIcon"
                tabler="IconFolder"
                hugeicons="Folder01Icon"
                phosphor="FolderIcon"
                remixicon="RiFolderLine"
              />
              {fileItem.name}
            </Button>
          </CollapsibleTrigger>