File Tree

Nested file explorer with amber folder icons, chevrons, and a primary fill under the active file.

app

page.tsx

layout.tsx

components

tailwind.config.ts

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Nav26 } from "@/components/beste/piece/nav26";

<Nav26
  items={[
    {
      "label": "app",
      "type": "folder",
      "open": true,
      "children": [
        {
          "label": "page.tsx",
          "type": "file"
        },
        {
          "label": "layout.tsx",
          "type": "file",
          "active": true
        }
      ]
    },
    {
      "label": "components",
      "type": "folder",
      "open": false
    },
    {
      "label": "tailwind.config.ts",
      "type": "file"
    }
  ]}
/>