TreeCN
Open Source · MIT License

Tree View Components
for shadcn/ui

Composable, accessible tree view and file explorer components. Keyboard navigable, dark mode ready, and fully customizable.

DocumentationGitHub

TreeView

  • src
    • app
      • page.tsx
      • layout.tsx
      • globals.css
    • components
      • button.tsx
      • card.tsx
  • package.json
  • README.md

    • Try it out

    Click items to select. Click folders to expand/collapse. Hover for action buttons.

    ArrowNavigate
    EnterSelect & toggle
    SpaceSelect
    Home/EndJump

    Two Components, Endless Possibilities

    Install exactly what you need. Each component works standalone.

    TreeView

    registry:component

    Composable tree with expand/collapse, selection, keyboard navigation, actions, and indent guides. Build any hierarchical UI.

    npx shadcn@latest add …/r/tree-view.json

    FileExplorer

    registry:component

    Pre-styled file/folder tree with automatic file-type icons, color-coded extensions, search/filter, and scroll area.

    npx shadcn@latest add …/r/file-explorer.json

    Built for Production

    Everything you need for production-grade tree components.

    Composable API

    Build trees with TreeView, TreeItem, TreeItemLabel, and TreeItemActions. Mix and match sub-components.

    Keyboard Navigation

    Full arrow key support, Home/End, Enter/Space selection. WAI-ARIA tree pattern compliant.

    Accessible

    Proper ARIA roles, labels, and states. Focus management and screen reader support built in.

    Dark Mode

    Works perfectly in light and dark themes. Uses CSS variables for consistent theming.

    TypeScript

    Full type definitions with exported prop types. IntelliSense for every prop and variant.

    Customizable

    Built on Tailwind CSS. Override any style with className. Controlled and uncontrolled modes.

    Get Started in Seconds

    Install TreeCN components into any shadcn/ui project with a single command.