Folder Tree

File explorer tree with springy expand/collapse, a highlight that glides to the selected row, file-type icons and full keyboard navigation.

acme-web

src
- app
  - layout.tsx
  - page.tsx
  - globals.css
- components
  - ui
  - navbar.tsx
  - footer.tsx
- lib
- hooks
public
package.json
tsconfig.json
README.md

src/app/page.tsx

1export default function Page() {
2  return (
3    <main className="grid">
4      <Hero />
5    </main>
6  );
7}

Open

indent16

showLines

folderColor

Installation

npx shadcn@latest add @glint-ui/folder-tree

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/folder-tree.json

Usage

import { FolderTree } from "@/components/ui/folder-tree";

<FolderTree
  data={[
    { id: "src", name: "src", children: [{ id: "page", name: "page.tsx" }] },
    { id: "readme", name: "README.md" },
  ]}
  defaultExpanded={["src"]}
  onSelect={(node) => open(node.id)}
/>

Props

Prop	Type	Default	Description
data	ReactNode	—	Array of { id, name, children?, icon? }; nodes with children are folders.
indent	number	16	Px of indent per level.
showLines	boolean	true	Draw nesting guide lines.
folderColor	string	"#7dd3fc"	Folder icon tint.
defaultExpanded	string[]	—	Folder ids open at first render.
defaultSelected	string	—	Node id selected at first render.
label	string	—	Accessible name for the tree.
onSelect	ReactNode	—	Called with (node, path) when a row is picked.
className	string	—	Extra classes for the root element.