# FileTree

> This File Tree component is a fully interactive explorer built using shadcn/ui and lucide-react icons. It mimics the structure of an IDE file browser, allowing you to expand and collapse folders, select files or folders, and perform quick actions like adding, renaming, or deleting items. The component demonstrates recursive rendering for nested structures, contextual controls with tooltips, and smooth UI styling powered by shadcn. It’s flexible enough to serve as a base for a project navigator, documentation tree, or any hierarchical data display, while remaining consistent with the shadcn design system.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/file-tree

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/file-tree?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt