# Tree Node Tooltip

> This TreeView component is a modern, lightweight file explorer built with React, Framer Motion, and shadcn/ui. It displays a hierarchical structure of folders and files, where users can expand or collapse folders by clicking on either the folder icon or the name. Each item shows a tooltip on hover, making it easy to identify long or truncated file names. The design follows shadcn UI styling principles with clean hover effects, accent colors, and rounded corners, while Framer Motion adds smooth expand/collapse animations. This makes the component both visually appealing and intuitive to use, ideal for dashboards, code editors, or any application that needs a structured tree navigation 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, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/tree-node-tooltip

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/tree-node-tooltip?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