RsTree-UI

A high-performance React tree component with virtual scrolling, fuzzy search, multi-select, checkboxes, and full Tailwind CSS customization. Perfect for file explorers, navigation menus, and hierarchical data visualization.

Basic Tree

Documents

Pictures

Music

Selected: None

Custom Icons Tree

Documents

Pictures

Music

Features custom expand/collapse icons with rounded style. Selected: None

Custom Node Renderer

This demo showcases the renderNode feature which allows complete customization of node content while automatically maintaining proper indentation, tree lines, and interactive elements.

Projects(15 files)

2.3 MB

Documentation(6 files)

145 KB

Selected: None

● Active Projects● Completed Projects📁 Folders with file counts📄 Files with metadata

Custom Styling Examples

Customize tree appearance with treeLineClassName and treeNodeClassName props. Create themes, adjust colors, and style tree lines and nodes to match your design system.

Elegant Blue Theme

Documents

Pictures

treeLineClassName="border-blue-400 border-dashed"

Selected: None

Nature Green Theme

Documents

Pictures

treeLineClassName="border-dotted border-2"

Selected: None

Available Customizations:

treeLineClassName:

• Border colors, styles (solid, dashed, dotted)
• Opacity and thickness
• Custom animations

treeNodeClassName:

• Hover effects and transitions
• Borders, shadows, and backgrounds
• Text colors and transformations

Multi-Select Tree

Documents

Pictures

Music

Selected: None

Checkable Tree

Documents

Pictures

Music

Checked: None

VSCode Style

Enhanced Tree with Search & Virtualization

Large Dataset

Search Demo Data

⚡ This tree demonstrates virtualization for large datasets (500+ items) and fuzzy search functionality. The tree automatically expands to show search results and highlights matching text.

Disabled Tree

Documents

Pictures

Music

No Icons Tree

Documents

Pictures

Music

Installation & Usage

1Install the package

npm install rstree-ui react react-dom

2Install peer dependencies

npm install tailwindcss # Optional for styling

3Configure Tailwind CSS

Three styling options available:

Tailwind CSS v4:

@import "tailwindcss";
@source "../node_modules/rstree-ui";

Tailwind CSS v3:

// tailwind.config.js
content: ["./node_modules/rstree-ui/**/*.{js,ts,jsx,tsx}"]

Standalone CSS:

import 'rstree-ui/style.css'

4Use the component

import { RsTree } from 'rstree-ui'
import { useState } from 'react'

const data = [
  {
    id: '1',
    label: 'Documents',
    children: [
      { id: '1-1', label: 'Resume.pdf' },
      { id: '1-2', label: 'Project.zip' }
    ]
  },
  { id: '2', label: 'Pictures' }
]

function App() {
  const [selectedIds, setSelectedIds] = useState([])
  const [searchTerm, setSearchTerm] = useState('')
  
  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <RsTree 
        data={data}
        selectedIds={selectedIds}
        onSelect={setSelectedIds}
        searchTerm={searchTerm}
        showIcons={true}
        virtualizeEnabled={true}
        multiSelect={true}
        checkable={true}
      />
    </div>
  )
}