Tree
A file tree: folders before files, natural order, a cursor the arrow keys move, chains of single folders shown as one row.
docs/specs
site.md
icons
public/scene
src
package.json
README.md
Features
- Folders before files, natural order (icon2 before icon10), chains of single folders as one row.
- Indent guides and a springing chevron.
Use it for
- File browsers, outlines.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Tree } from 'runets'
<Tree label="Files" nodes={fileTree(paths)} />API
| Prop | Type | What it does |
|---|---|---|
nodes | Node[] | From fileTree(paths). |
label | string | Name of the tree. |
Accessibility
- role tree; arrows move, Right opens, Left closes or climbs, typing jumps.
Source
The code is in src/kit/surfaces.tsx in runets, MIT licensed.