Folder Tree, animated React component

A project tree that behaves like the Finder sidebar. Open a folder and its files pour out from underneath it on springs, one after another; close it and they are drawn back in, and Option-click opens everything inside in a wave. Drag a file and it lifts off and leans with your speed, hold it over a closed folder and the folder springs open, drop it and it flies into place, sorted, while the folder bounces. New files and folders slide out of the folder they are made in, named untitled and ready to rename; delete one and it is flung off the list with an Undo. Arrow keys, Option with the arrows, Return to rename, Delete, Cmd-Z and type-to-find all work. Until you touch it, it opens, selects and moves things by itself.

Pro
Inputs & Controls
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

my-app22 items

app4 items

(marketing)2 items

globals.css2.1 KB

layout.tsx1.8 KB

page.tsx3.4 KB

components3 items

lib1 item

public2 items

package.json1.2 KB

README.md3.1 KB

tailwind.config.ts910 B

Return renames, Delete removes, Option-click opens everything inside. Drag onto a folder, or hold over a closed one and it springs open.

Folder Tree

Root folder

Drag into folders

New, rename and delete

Play by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
tree	TreeNode[]	A small app project	The folders and files. A node with children is a folder; give files a size in bytes to show it.
name	string	"my-app"	The root folder's name in the header.
defaultOpen	string[]	["app"]	Ids of the folders that start open.
draggable	boolean	true	Lets files and folders be dragged into other folders.
editable	boolean	true	Allows new files and folders, renaming and deleting.
autoplay	boolean	false	Opens, selects and moves things by itself until the first interaction.
onSelect	(node: TreeNode) => void	—	Called when a row is chosen.
onMove	(node: TreeNode, folderId: string \| null, tree: TreeNode[]) => void	—	Called after a drop, with the updated tree.
onCreate	(node: TreeNode, folderId: string \| null, tree: TreeNode[]) => void	—	Called when a new file or folder is made.
onRename	(node: TreeNode, previous: string, tree: TreeNode[]) => void	—	Called when a name is changed.
onDelete	(node: TreeNode, tree: TreeNode[]) => void	—	Called when an item is deleted (an Undo restores it).
className	string	—	Extra classes for the outer wrapper.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Folder Tree is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Pro
New
Liquid Send
Pro
New
Context Menu
Pro
New
Consent Dock
Pro
New
Liquid Pagination

Folder Tree, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Folder Tree, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls