Folio

Components

File Tree

A file tree presents nested folders and files as an interactive, collapsible hierarchy -- the pattern behind source-control panels and project explorers. It composes from the Sidebar primitives, so every row shares the same hover, selected, and focus styling.

Preview

Changes
Files

Click a folder to expand or collapse it, and a file to select it. Switch the theme -- every surface and the selected-row highlight remap from Folio tokens, no dark: classes.

Variants

With icons (default)

Changes
Files

Without icons

Changes
Files

Checkbox

Changes
Files

Multi-select mode with per-row checkboxes.

variant="no-icons" drops the chevron, folder, and file glyphs so indentation and the guide rail carry the hierarchy; variant="checkbox" adds per-row multi-select with tri-state folders.

States

Default

Selected

Folder -- collapsed

Folder -- expanded

Rows tint on hover and when selected (isActive), both drawn from background-secondary. Folders rotate the chevron 90° when expanded.

Props

Prop
Type
Default
Description
variant"default" | "no-icons" | "checkbox""default"Display mode. default shows icons; no-icons drops all glyphs; checkbox adds per-row multi-select with tri-state folders.
namestring—Display label for a node.
kind"folder" | "file" | "route"—Node type. Picks the icon (Folder, File, or SquareTerminal) and the row height.
badgestring | number—Optional right-aligned status marker, e.g. M, U, or a count.
expandedbooleanfalseWhether a folder starts open.
childrenFileNode[]—Child nodes. Folders only.

variant is the only component prop; the remaining fields describe the FileNode data shape the tree renders.

Don't and Do

Don't

Don't rebuild the tree from raw divs with hardcoded indentation and palette colors. Hand-rolled rows drift from the menu styling, lose their hover and selected states, and break on rebrand.

Do
<SidebarMenu>
  <SidebarMenuItem>
    <SidebarMenuButton className="h-8">
      <Folder className="size-4 text-muted-foreground" />
      <span>app</span>
    </SidebarMenuButton>
    <SidebarMenuSub>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton>
          <File className="size-4 text-muted-foreground" />
          <span>page.tsx</span>
        </SidebarMenuSubButton>
      </SidebarMenuSubItem>
    </SidebarMenuSub>
  </SidebarMenuItem>
</SidebarMenu>
Composed entirely from the Sidebar primitives and lucide-react icons, themed with Folio tokens -- no hardcoded colors and no dark: classes. The file names shown are placeholders for documentation only.