DEV Community: Justin Clark

Building Swipeable Views with react-swipeable-views in React

Justin Clark — Mon, 19 Jan 2026 18:43:46 +0000

react-swipeable-views is a React component for creating swipeable views with touch and mouse support. It's optimized for performance with lazy loading and provides a small footprint, making it perfect for creating carousels, image galleries, tab panels, and mobile-friendly swipe interfaces. This guide walks through setting up and creating swipeable views using react-swipeable-views with React, from installation to a working implementation.

Simple example

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript
Understanding of touch events and gestures

Installation

Install react-swipeable-views using your preferred package manager:

npm install react-swipeable-views

Or with yarn:

yarn add react-swipeable-views

Or with pnpm:

pnpm add react-swipeable-views

After installation, your package.json should include:

{
  "dependencies": {
    "react-swipeable-views": "^0.14.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-swipeable-views requires minimal setup. Import the SwipeableViews component and use it in your application.

First Example / Basic Usage

Let's create a simple swipeable carousel. Create a new file src/SwipeableExample.jsx:

// src/SwipeableExample.jsx
import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '24px'
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

function SwipeableExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>Basic Swipeable Views</h2>
      <SwipeableViews>
        <div style={Object.assign({}, styles.slide, styles.slide1)}>
          Slide 1
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide2)}>
          Slide 2
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide3)}>
          Slide 3
        </div>
      </SwipeableViews>
    </div>
  );
}

export default SwipeableExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import SwipeableExample from './SwipeableExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <SwipeableExample />
    </div>
  );
}

export default App;

This creates a basic swipeable carousel with three slides.

Understanding the Basics

react-swipeable-views provides swipeable components:

SwipeableViews: Main component for swipeable views
Index control: Use index prop to control active slide
Change handler: Use onChangeIndex to handle slide changes
Touch and mouse: Supports both touch gestures and mouse dragging

Key concepts:

Swipeable slides: Each child becomes a swipeable slide
Index management: Control which slide is active with index state
Change events: Handle slide changes with onChangeIndex
Touch support: Works with touch gestures on mobile devices
Mouse support: Also works with mouse dragging on desktop

Here's an example with index control:

// src/AdvancedSwipeableExample.jsx
import React, { useState } from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,
    minHeight: 200,
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '24px'
  },
  slide1: { background: '#FEA900' },
  slide2: { background: '#B3DC4A' },
  slide3: { background: '#6AC0FF' },
  slide4: { background: '#FF6B6B' },
};

function AdvancedSwipeableExample() {
  const [index, setIndex] = useState(0);

  const handleChangeIndex = (index) => {
    setIndex(index);
    console.log('Switched to slide:', index);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>Advanced Swipeable Views</h2>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setIndex(Math.max(0, index - 1))}
          disabled={index === 0}
          style={{ padding: '8px 16px', marginRight: '10px' }}
        >
          Previous
        </button>
        <span style={{ margin: '0 10px' }}>Slide {index + 1} of 4</span>
        <button
          onClick={() => setIndex(Math.min(3, index + 1))}
          disabled={index === 3}
          style={{ padding: '8px 16px' }}
        >
          Next
        </button>
      </div>
      <SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
        <div style={Object.assign({}, styles.slide, styles.slide1)}>
          Slide 1
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide2)}>
          Slide 2
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide3)}>
          Slide 3
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide4)}>
          Slide 4
        </div>
      </SwipeableViews>
    </div>
  );
}

export default AdvancedSwipeableExample;

Practical Example / Building Something Real

Let's build an image gallery with swipeable views:

// src/ImageGallery.jsx
import React, { useState } from 'react';
import SwipeableViews from 'react-swipeable-views';

const images = [
  { id: 1, url: 'https://via.placeholder.com/600x400/FEA900/fff?text=Image+1', title: 'Image 1' },
  { id: 2, url: 'https://via.placeholder.com/600x400/B3DC4A/fff?text=Image+2', title: 'Image 2' },
  { id: 3, url: 'https://via.placeholder.com/600x400/6AC0FF/fff?text=Image+3', title: 'Image 3' },
  { id: 4, url: 'https://via.placeholder.com/600x400/FF6B6B/fff?text=Image+4', title: 'Image 4' }
];

function ImageGallery() {
  const [index, setIndex] = useState(0);

  const handleChangeIndex = (index) => {
    setIndex(index);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Image Gallery</h2>
      <div style={{ position: 'relative' }}>
        <SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
          {images.map((image) => (
            <div
              key={image.id}
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                height: '400px',
                backgroundColor: '#f0f0f0'
              }}
            >
              <img
                src={image.url}
                alt={image.title}
                style={{
                  maxWidth: '100%',
                  maxHeight: '100%',
                  objectFit: 'contain'
                }}
              />
            </div>
          ))}
        </SwipeableViews>
        <div style={{
          position: 'absolute',
          bottom: '20px',
          left: '50%',
          transform: 'translateX(-50%)',
          display: 'flex',
          gap: '8px'
        }}>
          {images.map((_, i) => (
            <div
              key={i}
              onClick={() => setIndex(i)}
              style={{
                width: '12px',
                height: '12px',
                borderRadius: '50%',
                backgroundColor: index === i ? '#fff' : 'rgba(255,255,255,0.5)',
                cursor: 'pointer',
                transition: 'background-color 0.3s'
              }}
            />
          ))}
        </div>
      </div>
      <div style={{ marginTop: '20px', textAlign: 'center' }}>
        <p>{images[index].title}</p>
        <p>Slide {index + 1} of {images.length}</p>
      </div>
    </div>
  );
}

export default ImageGallery;

Now create a tab panel with swipeable tabs:

// src/SwipeableTabs.jsx
import React, { useState } from 'react';
import SwipeableViews from 'react-swipeable-views';

const tabs = [
  { id: 1, label: 'Tab 1', content: 'Content for Tab 1' },
  { id: 2, label: 'Tab 2', content: 'Content for Tab 2' },
  { id: 3, label: 'Tab 3', content: 'Content for Tab 3' }
];

function SwipeableTabs() {
  const [index, setIndex] = useState(0);

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>Swipeable Tabs</h2>
      <div style={{ display: 'flex', borderBottom: '2px solid #ddd', marginBottom: '20px' }}>
        {tabs.map((tab, i) => (
          <button
            key={tab.id}
            onClick={() => setIndex(i)}
            style={{
              flex: 1,
              padding: '10px',
              border: 'none',
              backgroundColor: index === i ? '#007bff' : 'transparent',
              color: index === i ? '#fff' : '#333',
              cursor: 'pointer',
              transition: 'all 0.3s'
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <SwipeableViews index={index} onChangeIndex={setIndex}>
        {tabs.map((tab) => (
          <div
            key={tab.id}
            style={{
              padding: '20px',
              minHeight: '200px',
              backgroundColor: '#f9f9f9',
              borderRadius: '4px'
            }}
          >
            <h3>{tab.label}</h3>
            <p>{tab.content}</p>
          </div>
        ))}
      </SwipeableViews>
    </div>
  );
}

export default SwipeableTabs;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ImageGallery from './ImageGallery';
import SwipeableTabs from './SwipeableTabs';
import './App.css';

function App() {
  return (
    <div className="App">
      <ImageGallery />
      <SwipeableTabs />
    </div>
  );
}

export default App;

This example demonstrates:

Image gallery with swipeable navigation
Tab panel with swipeable tabs
Index control and navigation
Touch and mouse support
Indicator dots
Smooth transitions

Common Issues / Troubleshooting

Swipe not working: Make sure SwipeableViews has children. Check that touch events are not being blocked by other elements.
Index not updating: Ensure onChangeIndex handler is provided and updates state. Check that index prop matches the current slide.
Slides not visible: Verify that slides have proper dimensions. Check CSS for overflow or display issues.
Performance issues: For many slides, consider using lazy loading. Optimize images and content for better performance.
Touch not working on mobile: Check that touch events are enabled. Verify viewport meta tag is set correctly.
Mouse drag not working: Ensure mouse events are not being prevented. Check for CSS that might block pointer events.

Next Steps

Now that you have an understanding of react-swipeable-views:

Explore animation options
Learn about resistance and spring behavior
Implement auto-play functionality
Add keyboard navigation
Create custom slide transitions
Integrate with routing
Check the official repository: https://github.com/oliviertassinari/react-swipeable-views

Summary

You've successfully set up react-swipeable-views in your React application and created swipeable carousels, image galleries, and tab panels with touch and mouse support. react-swipeable-views provides a performant solution for building mobile-friendly swipe interfaces in React applications.

SEO Keywords

react-swipeable-views
react-swipeable-views carousel
React swipeable component
react-swipeable-views installation
React touch swipe
react-swipeable-views tutorial
React swipeable gallery
react-swipeable-views example
React mobile swipe
react-swipeable-views setup
React swipeable tabs
react-swipeable-views getting started
React gesture navigation
react-swipeable-views advanced usage

Building Smooth Scrolling with react-scroll in React

Justin Clark — Mon, 19 Jan 2026 18:42:08 +0000

react-scroll is a React library that provides smooth scrolling functionality, scroll spy, and animated scrolling to specific elements on a page. It's perfect for creating single-page applications with navigation menus, smooth scroll-to-section behavior, and scroll-based animations. This guide walks through setting up and implementing smooth scrolling using react-scroll with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of DOM scrolling

Installation

Install react-scroll using your preferred package manager:

npm install react-scroll

Or with yarn:

yarn add react-scroll

Or with pnpm:

pnpm add react-scroll

After installation, your package.json should include:

{
  "dependencies": {
    "react-scroll": "^1.9.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-scroll requires minimal setup. Import the components and use them in your application.

First Example / Basic Usage

Let's create a simple smooth scrolling navigation. Create a new file src/ScrollExample.jsx:

// src/ScrollExample.jsx
import React from 'react';
import { Link, Element } from 'react-scroll';

function ScrollExample() {
  return (
    <div>
      <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}>
        <Link to="section1" smooth={true} duration={500}>
          Section 1
        </Link>
        {' '}
        <Link to="section2" smooth={true} duration={500}>
          Section 2
        </Link>
        {' '}
        <Link to="section3" smooth={true} duration={500}>
          Section 3
        </Link>
      </nav>
      <div style={{ marginTop: '60px' }}>
        <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}>
          <h2>Section 1</h2>
          <p>This is the first section</p>
        </Element>
        <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}>
          <h2>Section 2</h2>
          <p>This is the second section</p>
        </Element>
        <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}>
          <h2>Section 3</h2>
          <p>This is the third section</p>
        </Element>
      </div>
    </div>
  );
}

export default ScrollExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ScrollExample from './ScrollExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ScrollExample />
    </div>
  );
}

export default App;

This creates a navigation menu with smooth scrolling to different sections.

Understanding the Basics

react-scroll provides scrolling components:

Link: Component for triggering smooth scroll to an element
Element: Wrapper component that defines scrollable sections
animateScroll: Function for programmatic scrolling
scroller: Utility for scroll operations

Key concepts:

Smooth scrolling: Animated scroll to target elements
Scroll spy: Highlight active section in navigation
Element names: Use name prop to identify scroll targets
Duration: Control scroll animation speed
Offset: Adjust scroll position offset

Here's an example with scroll spy:

// src/AdvancedScrollExample.jsx
import React, { useState } from 'react';
import { Link, Element, scroller } from 'react-scroll';

function AdvancedScrollExample() {
  const [activeSection, setActiveSection] = useState('section1');

  const handleSetActive = (to) => {
    setActiveSection(to);
  };

  const scrollToTop = () => {
    scroller.scrollTo('section1', {
      smooth: true,
      duration: 500
    });
  };

  return (
    <div>
      <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}>
        <Link 
          to="section1" 
          smooth={true} 
          duration={500}
          spy={true}
          onSetActive={handleSetActive}
          style={{ marginRight: '20px', color: activeSection === 'section1' ? '#007bff' : '#333' }}
        >
          Section 1
        </Link>
        <Link 
          to="section2" 
          smooth={true} 
          duration={500}
          spy={true}
          onSetActive={handleSetActive}
          style={{ marginRight: '20px', color: activeSection === 'section2' ? '#007bff' : '#333' }}
        >
          Section 2
        </Link>
        <Link 
          to="section3" 
          smooth={true} 
          duration={500}
          spy={true}
          onSetActive={handleSetActive}
          style={{ marginRight: '20px', color: activeSection === 'section3' ? '#007bff' : '#333' }}
        >
          Section 3
        </Link>
        <button onClick={scrollToTop} style={{ padding: '5px 10px' }}>
          Scroll to Top
        </button>
      </nav>
      <div style={{ marginTop: '60px' }}>
        <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}>
          <h2>Section 1</h2>
          <p>This is the first section</p>
        </Element>
        <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}>
          <h2>Section 2</h2>
          <p>This is the second section</p>
        </Element>
        <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}>
          <h2>Section 3</h2>
          <p>This is the third section</p>
        </Element>
      </div>
    </div>
  );
}

export default AdvancedScrollExample;

Practical Example / Building Something Real

Let's build a landing page with smooth scrolling navigation:

// src/LandingPage.jsx
import React, { useState } from 'react';
import { Link, Element } from 'react-scroll';

function LandingPage() {
  const [activeSection, setActiveSection] = useState('home');

  const sections = [
    { id: 'home', title: 'Home' },
    { id: 'about', title: 'About' },
    { id: 'services', title: 'Services' },
    { id: 'contact', title: 'Contact' }
  ];

  return (
    <div>
      <header style={{ 
        position: 'fixed', 
        top: 0, 
        width: '100%', 
        backgroundColor: '#fff', 
        padding: '15px 20px', 
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        zIndex: 1000 
      }}>
        <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: '24px', fontWeight: 'bold' }}>MyApp</div>
          <div>
            {sections.map(section => (
              <Link
                key={section.id}
                to={section.id}
                smooth={true}
                duration={500}
                spy={true}
                onSetActive={() => setActiveSection(section.id)}
                style={{
                  marginLeft: '20px',
                  textDecoration: 'none',
                  color: activeSection === section.id ? '#007bff' : '#333',
                  fontWeight: activeSection === section.id ? 'bold' : 'normal',
                  cursor: 'pointer'
                }}
              >
                {section.title}
              </Link>
            ))}
          </div>
        </nav>
      </header>
      <div style={{ marginTop: '70px' }}>
        <Element name="home" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ textAlign: 'center' }}>
            <h1 style={{ fontSize: '48px', marginBottom: '20px' }}>Welcome to MyApp</h1>
            <p style={{ fontSize: '20px' }}>A modern React application</p>
          </div>
        </Element>
        <Element name="about" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div>
            <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>About Us</h2>
            <p style={{ fontSize: '18px', maxWidth: '600px' }}>
              We are a team of developers creating amazing React applications.
            </p>
          </div>
        </Element>
        <Element name="services" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div>
            <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Our Services</h2>
            <ul style={{ fontSize: '18px' }}>
              <li>Web Development</li>
              <li>Mobile Apps</li>
              <li>Consulting</li>
            </ul>
          </div>
        </Element>
        <Element name="contact" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div>
            <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Contact Us</h2>
            <p style={{ fontSize: '18px' }}>Get in touch with us</p>
          </div>
        </Element>
      </div>
    </div>
  );
}

export default LandingPage;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import LandingPage from './LandingPage';
import './App.css';

function App() {
  return (
    <div className="App">
      <LandingPage />
    </div>
  );
}

export default App;

This example demonstrates:

Landing page navigation
Smooth scrolling between sections
Active section highlighting
Fixed navigation header
Scroll spy functionality
Professional layout

Common Issues / Troubleshooting

Scrolling not working: Make sure Element components have unique name props that match Link to props. Check that elements are properly rendered in the DOM.
Scroll position incorrect: Use offset prop to adjust scroll position. Check for fixed headers that might affect positioning.
Scroll spy not updating: Ensure spy={true} and onSetActive handler are provided. Check that sections are properly sized and visible.
Smooth scroll not smooth: Adjust duration prop for animation speed. Check browser compatibility for smooth scrolling.
Links not clickable: Ensure Link components are properly rendered. Check for CSS that might be blocking clicks (pointer-events, z-index).
Performance issues: For long pages, consider using offset to limit scroll distance. Optimize re-renders with React.memo if needed.

Next Steps

Now that you have an understanding of react-scroll:

Explore scroll animations
Learn about scroll events
Implement parallax effects
Add scroll progress indicators
Create scroll-triggered animations
Integrate with routing libraries
Check the official repository: https://github.com/fisshy/react-scroll

Summary

You've successfully set up react-scroll in your React application and created smooth scrolling navigation with scroll spy and animated transitions. react-scroll provides a powerful solution for building single-page applications with elegant navigation in React.

SEO Keywords

react-scroll
react-scroll smooth scroll
React smooth scrolling
react-scroll installation
React scroll navigation
react-scroll tutorial
React scroll spy
react-scroll example
React animated scroll
react-scroll setup
React scroll to element
react-scroll getting started
React single page navigation
react-scroll advanced usage

Building Drag-and-Drop Tree Views with he-tree-react in React

Justin Clark — Mon, 19 Jan 2026 18:40:19 +0000

he-tree-react is a powerful React library for building tree components with drag-and-drop functionality, sorting, and flexible data manipulation. It provides an intuitive API for creating interactive tree structures where users can reorder nodes, move items between branches, and organize hierarchical data. This guide walks through setting up and creating drag-and-drop tree views using he-tree-react with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of tree data structures and drag-and-drop

Installation

Install he-tree-react using your preferred package manager:

npm install he-tree-react

Or with yarn:

yarn add he-tree-react

Or with pnpm:

pnpm add he-tree-react

After installation, your package.json should include:

{
  "dependencies": {
    "he-tree-react": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

he-tree-react requires minimal setup. Import the Tree component and provide tree data structure.

First Example / Basic Usage

Let's create a simple drag-and-drop tree. Create a new file src/TreeExample.jsx:

// src/TreeExample.jsx
import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialData = [
  {
    id: 1,
    text: 'Item 1',
    children: [
      { id: 2, text: 'Child 1' },
      { id: 3, text: 'Child 2' }
    ]
  },
  {
    id: 4,
    text: 'Item 2',
    children: [
      { id: 5, text: 'Child 3' }
    ]
  },
  { id: 6, text: 'Item 3' }
];

function TreeExample() {
  const [data, setData] = useState(initialData);

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Basic Drag-and-Drop Tree</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <Tree
          data={data}
          onChange={setData}
          draggable={true}
          droppable={true}
        />
      </div>
    </div>
  );
}

export default TreeExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TreeExample from './TreeExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TreeExample />
    </div>
  );
}

export default App;

This creates a basic tree with drag-and-drop functionality.

Understanding the Basics

he-tree-react provides tree components:

Tree: Main tree component with drag-and-drop
Node structure: Each node has id, text, and optional children
Drag and drop: Enable with draggable and droppable props
Change handler: Use onChange to update tree data

Key concepts:

Tree data structure: Each node has id, text, and optional children array
Drag and drop: Move nodes by dragging to reorder or move between branches
State management: Update tree data through onChange callback
Nested structure: Support for multiple levels of nesting

Here's an example with more features:

// src/AdvancedTreeExample.jsx
import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const advancedData = [
  {
    id: 1,
    text: 'Documents',
    children: [
      { id: 2, text: 'Project 1' },
      { id: 3, text: 'Project 2' }
    ]
  },
  {
    id: 4,
    text: 'Images',
    children: [
      { id: 5, text: 'Vacation' },
      { id: 6, text: 'Family' }
    ]
  },
  { id: 7, text: 'Downloads' }
];

function AdvancedTreeExample() {
  const [data, setData] = useState(advancedData);
  const [selectedNode, setSelectedNode] = useState(null);

  const handleNodeClick = (node) => {
    setSelectedNode(node);
    console.log('Selected node:', node);
  };

  return (
    <div style={{ display: 'flex', padding: '20px' }}>
      <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <h3>File Tree</h3>
        <Tree
          data={data}
          onChange={setData}
          draggable={true}
          droppable={true}
          onNodeClick={handleNodeClick}
        />
      </div>
      <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <h3>Selected Node</h3>
        {selectedNode ? (
          <div>
            <p><strong>Text:</strong> {selectedNode.text}</p>
            <p><strong>ID:</strong> {selectedNode.id}</p>
            <p><strong>Has Children:</strong> {selectedNode.children ? 'Yes' : 'No'}</p>
          </div>
        ) : (
          <p>No node selected</p>
        )}
      </div>
    </div>
  );
}

export default AdvancedTreeExample;

Practical Example / Building Something Real

Let's build a task organizer with drag-and-drop:

// src/TaskOrganizer.jsx
import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialTasks = [
  {
    id: 1,
    text: '📋 Project Planning',
    children: [
      { id: 2, text: '✅ Define requirements' },
      { id: 3, text: '⏳ Create timeline' },
      { id: 4, text: '📝 Write proposal' }
    ]
  },
  {
    id: 5,
    text: '💻 Development',
    children: [
      { id: 6, text: '✅ Setup project' },
      { id: 7, text: '⏳ Implement features' },
      { id: 8, text: '📝 Write tests' }
    ]
  },
  {
    id: 9,
    text: '🚀 Deployment',
    children: [
      { id: 10, text: '📝 Prepare release' }
    ]
  }
];

function TaskOrganizer() {
  const [tasks, setTasks] = useState(initialTasks);

  const handleChange = (newData) => {
    setTasks(newData);
    console.log('Tasks updated:', newData);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px' }}>
      <h2>Task Organizer</h2>
      <p>Drag and drop tasks to reorganize them</p>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px', backgroundColor: '#f9f9f9' }}>
        <Tree
          data={tasks}
          onChange={handleChange}
          draggable={true}
          droppable={true}
        />
      </div>
    </div>
  );
}

export default TaskOrganizer;

Now create a file manager:

// src/FileManager.jsx
import React, { useState } from 'react';
import { Tree } from 'he-tree-react';

const initialFiles = [
  {
    id: 1,
    text: '📁 Documents',
    children: [
      { id: 2, text: '📄 report.pdf' },
      { id: 3, text: '📄 presentation.pptx' }
    ]
  },
  {
    id: 4,
    text: '📁 Images',
    children: [
      { id: 5, text: '🖼️ photo1.jpg' },
      { id: 6, text: '🖼️ photo2.png' }
    ]
  },
  { id: 7, text: '📄 readme.txt' }
];

function FileManager() {
  const [files, setFiles] = useState(initialFiles);

  return (
    <div style={{ padding: '20px', maxWidth: '500px' }}>
      <h2>File Manager</h2>
      <p>Drag files and folders to reorganize</p>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <Tree
          data={files}
          onChange={setFiles}
          draggable={true}
          droppable={true}
        />
      </div>
    </div>
  );
}

export default FileManager;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TaskOrganizer from './TaskOrganizer';
import FileManager from './FileManager';
import './App.css';

function App() {
  return (
    <div className="App">
      <TaskOrganizer />
      <FileManager />
    </div>
  );
}

export default App;

This example demonstrates:

Task organizer interface
Drag-and-drop functionality
File manager
Node reorganization
State management
Interactive tree structure

Common Issues / Troubleshooting

Tree not rendering: Make sure your data structure is correct. Each node needs id and text properties. Check that the data is an array.
Drag and drop not working: Ensure draggable and droppable props are set to true. Check browser console for errors.
State not updating: Make sure onChange handler is provided and updates state correctly. Use functional updates if needed.
Nodes not moving: Verify that nodes have unique id values. Check that onChange is properly updating the tree data.
Styling issues: he-tree-react provides default styles. Override with custom CSS. Check that styles aren't being overridden by global CSS.
Performance with large trees: For large trees, consider virtualizing or limiting the initial depth. Optimize re-renders with React.memo if needed.

Next Steps

Now that you have an understanding of he-tree-react:

Explore custom node rendering
Learn about drag constraints
Implement search and filtering
Add context menus
Create custom drag handles
Integrate with state management
Check the official repository: https://github.com/phphe/he-tree-react

Summary

You've successfully set up he-tree-react in your React application and created drag-and-drop tree views with reorderable nodes and flexible data manipulation. he-tree-react provides a powerful solution for building interactive hierarchical data displays in React applications.

SEO Keywords

he-tree-react
he-tree-react drag and drop
React drag and drop tree
he-tree-react installation
React tree component
he-tree-react tutorial
React hierarchical data
he-tree-react example
React sortable tree
he-tree-react setup
React tree view library
he-tree-react getting started
React interactive tree
he-tree-react advanced usage

Building Tree Views with react-treeview in React

Justin Clark — Mon, 19 Jan 2026 18:39:25 +0000

react-treeview is a simple and lightweight React component for creating tree views with expandable and collapsible nodes. It provides an easy-to-use API for displaying hierarchical data structures like file systems, directory trees, and nested menus. This guide walks through setting up and creating tree views using react-treeview with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript
Understanding of tree data structures

Installation

Install react-treeview using your preferred package manager:

npm install react-treeview

Or with yarn:

yarn add react-treeview

Or with pnpm:

pnpm add react-treeview

After installation, your package.json should include:

{
  "dependencies": {
    "react-treeview": "^0.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-treeview requires minimal setup. Import the TreeView component and provide tree data.

First Example / Basic Usage

Let's create a simple tree view. Create a new file src/TreeViewExample.jsx:

// src/TreeViewExample.jsx
import React from 'react';
import TreeView from 'react-treeview';

const treeData = {
  label: 'Root',
  collapsed: false,
  children: [
    {
      label: 'Child 1',
      collapsed: false,
      children: [
        { label: 'Grandchild 1' },
        { label: 'Grandchild 2' }
      ]
    },
    {
      label: 'Child 2',
      collapsed: true,
      children: [
        { label: 'Grandchild 3' }
      ]
    },
    { label: 'Child 3' }
  ]
};

function TreeViewExample() {
  const [data, setData] = React.useState(treeData);

  const handleClick = (node) => {
    node.collapsed = !node.collapsed;
    setData({ ...data });
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Basic Tree View Example</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <TreeView
          data={data}
          onClick={handleClick}
        />
      </div>
    </div>
  );
}

export default TreeViewExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TreeViewExample from './TreeViewExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TreeViewExample />
    </div>
  );
}

export default App;

This creates a basic tree view with expandable and collapsible nodes.

Understanding the Basics

react-treeview provides tree view components:

TreeView: Main tree component
Node structure: Each node has label and optional children and collapsed properties
Click handler: Handle node clicks to toggle expansion
Custom styling: Style nodes with CSS

Key concepts:

Tree data structure: Each node has label and optional children array
Collapsed state: Control node expansion with collapsed property
Click events: Use onClick to handle node interactions
Nested structure: Support for multiple levels of nesting

Here's an example with more features:

// src/AdvancedTreeViewExample.jsx
import React, { useState } from 'react';
import TreeView from 'react-treeview';

const advancedTreeData = {
  label: 'Documents',
  collapsed: false,
  children: [
    {
      label: 'Projects',
      collapsed: false,
      children: [
        { label: 'Project 1' },
        { label: 'Project 2' }
      ]
    },
    {
      label: 'Images',
      collapsed: true,
      children: [
        { label: 'Vacation' },
        { label: 'Family' }
      ]
    },
    { label: 'Downloads' }
  ]
};

function AdvancedTreeViewExample() {
  const [data, setData] = useState(advancedTreeData);
  const [selectedNode, setSelectedNode] = useState(null);

  const handleClick = (node) => {
    if (node.children) {
      node.collapsed = !node.collapsed;
      setData({ ...data });
    }
    setSelectedNode(node);
  };

  return (
    <div style={{ display: 'flex', padding: '20px' }}>
      <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <h3>File Tree</h3>
        <TreeView
          data={data}
          onClick={handleClick}
        />
      </div>
      <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <h3>Selected Node</h3>
        {selectedNode && (
          <div>
            <p><strong>Label:</strong> {selectedNode.label}</p>
            <p><strong>Has Children:</strong> {selectedNode.children ? 'Yes' : 'No'}</p>
            <p><strong>Collapsed:</strong> {selectedNode.collapsed ? 'Yes' : 'No'}</p>
          </div>
        )}
      </div>
    </div>
  );
}

export default AdvancedTreeViewExample;

Practical Example / Building Something Real

Let's build a directory browser with file icons:

// src/DirectoryBrowser.jsx
import React, { useState } from 'react';
import TreeView from 'react-treeview';

const directoryData = {
  label: '📁 My Files',
  collapsed: false,
  children: [
    {
      label: '📁 Documents',
      collapsed: false,
      children: [
        { label: '📄 Report.pdf' },
        { label: '📄 Presentation.pptx' }
      ]
    },
    {
      label: '📁 Images',
      collapsed: false,
      children: [
        { label: '🖼️ photo1.jpg' },
        { label: '🖼️ photo2.png' }
      ]
    },
    {
      label: '📁 Downloads',
      collapsed: true,
      children: [
        { label: '📄 file1.zip' }
      ]
    },
    { label: '📄 readme.txt' }
  ]
};

function DirectoryBrowser() {
  const [data, setData] = useState(directoryData);
  const [selectedPath, setSelectedPath] = useState('');

  const handleClick = (node, path = '') => {
    const currentPath = path ? `${path} > ${node.label}` : node.label;

    if (node.children) {
      node.collapsed = !node.collapsed;
      setData({ ...data });
    }

    setSelectedPath(currentPath);
  };

  const renderTree = (node, path = '') => {
    return (
      <TreeView
        key={node.label}
        data={node}
        onClick={(n) => handleClick(n, path)}
      />
    );
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px' }}>
      <h2>Directory Browser</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
        <p><strong>Selected:</strong> {selectedPath || 'None'}</p>
      </div>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        {renderTree(data)}
      </div>
    </div>
  );
}

export default DirectoryBrowser;

Now create a menu tree:

// src/MenuTree.jsx
import React, { useState } from 'react';
import TreeView from 'react-treeview';

const menuData = {
  label: 'Main Menu',
  collapsed: false,
  children: [
    {
      label: 'Home',
      collapsed: false
    },
    {
      label: 'Products',
      collapsed: false,
      children: [
        { label: 'Product 1' },
        { label: 'Product 2' },
        { label: 'Product 3' }
      ]
    },
    {
      label: 'Services',
      collapsed: true,
      children: [
        { label: 'Service 1' },
        { label: 'Service 2' }
      ]
    },
    { label: 'About' },
    { label: 'Contact' }
  ]
};

function MenuTree() {
  const [data, setData] = useState(menuData);

  const handleClick = (node) => {
    if (node.children) {
      node.collapsed = !node.collapsed;
      setData({ ...data });
    } else {
      console.log('Navigating to:', node.label);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Navigation Menu</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <TreeView
          data={data}
          onClick={handleClick}
        />
      </div>
    </div>
  );
}

export default MenuTree;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DirectoryBrowser from './DirectoryBrowser';
import MenuTree from './MenuTree';
import './App.css';

function App() {
  return (
    <div className="App">
      <DirectoryBrowser />
      <MenuTree />
    </div>
  );
}

export default App;

This example demonstrates:

Directory browser interface
File and folder icons
Node selection
Path tracking
Menu navigation
Expandable nodes

Common Issues / Troubleshooting

Tree not rendering: Make sure your data structure is correct. Each node needs a label property. Check that the root node is properly formatted.
Nodes not expanding: Verify that nodes with children have a children array. Check that collapsed property is being toggled correctly.
Click events not working: Ensure onClick handler is provided. Check that the handler updates the state to trigger re-render.
Styling issues: react-treeview provides default styles. Override with custom CSS. Check that styles aren't being overridden by global CSS.
Performance with large trees: For large trees, consider lazy loading children or virtualizing the tree. Limit the initial depth of expanded nodes.
State management: Make sure to create a new object when updating state to trigger React re-renders. Use spread operator to create new state objects.

Next Steps

Now that you have an understanding of react-treeview:

Explore custom node rendering
Learn about styling options
Implement search and filtering
Add context menus
Create dynamic tree loading
Integrate with routing
Check the official repository: https://github.com/chenglou/react-treeview

Summary

You've successfully set up react-treeview in your React application and created tree views with expandable nodes, click handlers, and custom styling. react-treeview provides a simple solution for building hierarchical data displays in React applications.

SEO Keywords

react-treeview
react-treeview tree component
React tree view
react-treeview installation
React hierarchical data
react-treeview tutorial
React directory tree
react-treeview example
React expandable tree
react-treeview setup
React tree component library
react-treeview getting started
React nested tree
react-treeview advanced usage

Building Complex Tree Views with react-complex-tree in React

Justin Clark — Mon, 19 Jan 2026 18:38:11 +0000

react-complex-tree is an unopinionated, accessible, and feature-rich tree component for React with multi-select and drag-and-drop capabilities. It offers full keyboard controls, zero dependencies, and a flexible API for building complex tree structures like file explorers, directory browsers, and hierarchical data displays. This guide walks through setting up and creating complex tree views using react-complex-tree with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of tree data structures

Installation

Install react-complex-tree using your preferred package manager:

npm install react-complex-tree

Or with yarn:

yarn add react-complex-tree

Or with pnpm:

pnpm add react-complex-tree

After installation, your package.json should include:

{
  "dependencies": {
    "react-complex-tree": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-complex-tree requires wrapping your tree in an environment component and providing a data provider.

First Example / Basic Usage

Let's create a simple tree view. Create a new file src/TreeExample.jsx:

// src/TreeExample.jsx
import React from 'react';
import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree';

const treeData = {
  items: {
    root: {
      index: 'root',
      canMove: true,
      canRename: false,
      data: 'Root',
      children: ['child1', 'child2']
    },
    child1: {
      index: 'child1',
      canMove: true,
      canRename: true,
      data: 'Child 1',
      children: ['grandchild1']
    },
    child2: {
      index: 'child2',
      canMove: true,
      canRename: true,
      data: 'Child 2'
    },
    grandchild1: {
      index: 'grandchild1',
      canMove: true,
      canRename: true,
      data: 'Grandchild 1'
    }
  }
};

function TreeExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Basic Tree Example</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <UncontrolledTreeEnvironment
          dataProvider={new StaticTreeDataProvider(treeData.items, (item, data) => ({ ...item, data }))}
          getItemTitle={item => item.data}
          viewState={{}}
        >
          <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
        </UncontrolledTreeEnvironment>
      </div>
    </div>
  );
}

export default TreeExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TreeExample from './TreeExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TreeExample />
    </div>
  );
}

export default App;

This creates a basic tree view with expandable nodes and keyboard navigation.

Understanding the Basics

react-complex-tree provides tree view components:

UncontrolledTreeEnvironment: Environment wrapper for uncontrolled trees
Tree: Main tree component
StaticTreeDataProvider: Data provider for static tree data
ControlledTreeEnvironment: Environment for controlled trees
TreeItem: Individual tree item component

Key concepts:

Data provider: Provides tree data to the environment
Tree ID: Unique identifier for each tree instance
Root item: Starting point of the tree
Item structure: Each item has index, data, and optional children
View state: Controls expanded/collapsed state

Here's an example with more features:

// src/AdvancedTreeExample.jsx
import React, { useState } from 'react';
import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree';

const advancedTreeData = {
  items: {
    root: {
      index: 'root',
      canMove: true,
      canRename: false,
      data: 'Documents',
      children: ['folder1', 'folder2', 'file1']
    },
    folder1: {
      index: 'folder1',
      canMove: true,
      canRename: true,
      data: 'Projects',
      children: ['project1', 'project2']
    },
    folder2: {
      index: 'folder2',
      canMove: true,
      canRename: true,
      data: 'Images'
    },
    file1: {
      index: 'file1',
      canMove: true,
      canRename: true,
      data: 'readme.txt'
    },
    project1: {
      index: 'project1',
      canMove: true,
      canRename: true,
      data: 'Project 1'
    },
    project2: {
      index: 'project2',
      canMove: true,
      canRename: true,
      data: 'Project 2'
    }
  }
};

function AdvancedTreeExample() {
  const [viewState, setViewState] = useState({});

  return (
    <div style={{ padding: '20px', maxWidth: '500px' }}>
      <h2>Advanced Tree Example</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <UncontrolledTreeEnvironment
          dataProvider={new StaticTreeDataProvider(advancedTreeData.items, (item, data) => ({ ...item, data }))}
          getItemTitle={item => item.data}
          viewState={viewState}
          onViewStateChange={setViewState}
        >
          <Tree treeId="tree-1" rootItem="root" treeLabel="File Explorer" />
        </UncontrolledTreeEnvironment>
      </div>
    </div>
  );
}

export default AdvancedTreeExample;

Practical Example / Building Something Real

Let's build a file explorer with selection and actions:

// src/FileExplorer.jsx
import React, { useState } from 'react';
import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree';

const fileExplorerData = {
  items: {
    root: {
      index: 'root',
      canMove: true,
      canRename: false,
      data: 'My Files',
      children: ['docs', 'images', 'downloads']
    },
    docs: {
      index: 'docs',
      canMove: true,
      canRename: true,
      data: 'Documents',
      children: ['doc1', 'doc2']
    },
    images: {
      index: 'images',
      canMove: true,
      canRename: true,
      data: 'Images',
      children: ['img1', 'img2']
    },
    downloads: {
      index: 'downloads',
      canMove: true,
      canRename: true,
      data: 'Downloads'
    },
    doc1: {
      index: 'doc1',
      canMove: true,
      canRename: true,
      data: 'Report.pdf'
    },
    doc2: {
      index: 'doc2',
      canMove: true,
      canRename: true,
      data: 'Presentation.pptx'
    },
    img1: {
      index: 'img1',
      canMove: true,
      canRename: true,
      data: 'photo1.jpg'
    },
    img2: {
      index: 'img2',
      canMove: true,
      canRename: true,
      data: 'photo2.png'
    }
  }
};

function FileExplorer() {
  const [viewState, setViewState] = useState({});
  const [selectedItems, setSelectedItems] = useState([]);

  const handleSelectItems = (items) => {
    setSelectedItems(items);
    console.log('Selected items:', items);
  };

  return (
    <div style={{ display: 'flex', height: '500px', padding: '20px' }}>
      <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <h3>File Explorer</h3>
        <UncontrolledTreeEnvironment
          dataProvider={new StaticTreeDataProvider(fileExplorerData.items, (item, data) => ({ ...item, data }))}
          getItemTitle={item => item.data}
          viewState={viewState}
          onViewStateChange={setViewState}
          onSelectItems={handleSelectItems}
        >
          <Tree treeId="tree-1" rootItem="root" treeLabel="Files" />
        </UncontrolledTreeEnvironment>
      </div>
      <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <h3>Selected Items</h3>
        {selectedItems.length > 0 ? (
          <ul>
            {selectedItems.map(item => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        ) : (
          <p>No items selected</p>
        )}
      </div>
    </div>
  );
}

export default FileExplorer;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FileExplorer from './FileExplorer';
import './App.css';

function App() {
  return (
    <div className="App">
      <FileExplorer />
    </div>
  );
}

export default App;

This example demonstrates:

File explorer interface
Item selection
View state management
Keyboard navigation
Expandable folders
Custom data provider

Common Issues / Troubleshooting

Tree not rendering: Make sure your data structure is correct. Each item needs index and data properties. Check that rootItem matches an item index in your data.
Items not expanding: Verify that items with children have a children array. Check that viewState is being managed correctly.
Selection not working: Ensure onSelectItems handler is provided. Check that items have canMove or canRename set to true.
Drag and drop not working: Make sure drag and drop is enabled in the environment. Check browser console for errors related to drag events.
Performance issues: For large trees, consider using virtual rendering. Ensure you're not rendering too many items at once.
Styling issues: react-complex-tree provides default styles. Override with custom CSS or use the className prop. Check that styles aren't being overridden by global CSS.

Next Steps

Now that you have an understanding of react-complex-tree:

Explore controlled tree environments
Learn about custom data providers
Implement drag and drop
Add search and filtering
Create custom item renderers
Integrate with state management
Check the official repository: https://github.com/lukasbach/react-complex-tree

Summary

You've successfully set up react-complex-tree in your React application and created complex tree views with multi-select, drag-and-drop, and keyboard navigation. react-complex-tree provides a powerful, accessible solution for building hierarchical data displays in React applications.

SEO Keywords

react-complex-tree
react-complex-tree tree view
React complex tree component
react-complex-tree installation
React tree view library
react-complex-tree tutorial
React hierarchical data
react-complex-tree example
React drag and drop tree
react-complex-tree setup
React multi-select tree
react-complex-tree getting started
React accessible tree
react-complex-tree advanced usage

Building Tree Views with react-arborist in React

Justin Clark — Mon, 19 Jan 2026 18:35:29 +0000

react-arborist is a comprehensive React library for building tree view components with features like drag-and-drop, inline renaming, virtual rendering, and keyboard navigation. It provides a powerful API for creating file explorers, directory structures, and hierarchical data displays similar to VS Code's sidebar or Finder. This guide walks through setting up and creating tree views using react-arborist with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of tree data structures

Installation

Install react-arborist using your preferred package manager:

npm install react-arborist

Or with yarn:

yarn add react-arborist

Or with pnpm:

pnpm add react-arborist

After installation, your package.json should include:

{
  "dependencies": {
    "react-arborist": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-arborist requires minimal setup. Import the Tree component and provide tree data structure.

First Example / Basic Usage

Let's create a simple tree view. Create a new file src/TreeExample.jsx:

// src/TreeExample.jsx
import React from 'react';
import { Tree } from 'react-arborist';

const data = [
  { id: "1", name: "Unread" },
  { id: "2", name: "Threads" },
  {
    id: "3",
    name: "Chat Rooms",
    children: [
      { id: "c1", name: "General" },
      { id: "c2", name: "Random" },
      { id: "c3", name: "Open Source Projects" },
    ],
  },
  {
    id: "4",
    name: "Direct Messages",
    children: [
      { id: "d1", name: "Alice" },
      { id: "d2", name: "Bob" },
      { id: "d3", name: "Charlie" },
    ],
  },
];

function TreeExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Basic Tree Example</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <Tree initialData={data} />
      </div>
    </div>
  );
}

export default TreeExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TreeExample from './TreeExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TreeExample />
    </div>
  );
}

export default App;

This creates a basic tree view with expandable folders and nodes. The tree automatically handles:

Create (Press A for leaf, Shift+A for folder)
Rename (Press Enter on selected node)
Delete (Press Delete/Backspace)
Move (Drag and drop)
Open/Close (Click folder or press Space)
Navigate (Arrow keys)

Understanding the Basics

react-arborist provides tree view components:

Tree: Main tree component
NodeApi: API for interacting with nodes
Virtual rendering: Efficient rendering of large trees
Keyboard navigation: Full keyboard support
Drag and drop: Move nodes by dragging

Key concepts:

Tree data structure: Each node has id, name, and optional children array
Node selection: Click to select, arrow keys to navigate
Folder expansion: Click folder icon or press Space to toggle
Inline editing: Press Enter to rename nodes
Event handlers: Use callbacks to respond to user actions

Here's an example with event handlers:

// src/AdvancedTreeExample.jsx
import React from 'react';
import { Tree, NodeApi } from 'react-arborist';

const data = [
  {
    id: "1",
    name: "Documents",
    children: [
      { id: "1-1", name: "Project1" },
      { id: "1-2", name: "Project2" },
    ],
  },
  {
    id: "2",
    name: "Pictures",
    children: [
      { id: "2-1", name: "Vacation" },
      { id: "2-2", name: "Family" },
    ],
  },
  { id: "3", name: "Downloads" },
];

function AdvancedTreeExample() {
  const handleActivate = (node: NodeApi) => {
    console.log("Activated:", node.data);
    // Typically used for "open" action (double-click or Enter)
  };

  const handleSelect = (nodes: NodeApi[]) => {
    console.log("Selected:", nodes.map(n => n.data));
    // Called whenever selection changes
  };

  const handleFocus = (node: NodeApi) => {
    console.log("Focused:", node.data);
    // Called when focus moves to a different node
  };

  const handleToggle = (id: string) => {
    console.log("Toggled node:", id);
    // Called when a folder opens or closes
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>Advanced Tree Example</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <Tree
          initialData={data}
          onActivate={handleActivate}
          onSelect={handleSelect}
          onFocus={handleFocus}
          onToggle={handleToggle}
        />
      </div>
    </div>
  );
}

export default AdvancedTreeExample;

Practical Example / Building Something Real

Let's build a file explorer with custom styling and actions:

// src/FileExplorer.jsx
import React, { useState } from 'react';
import { Tree, NodeApi } from 'react-arborist';

const fileData = [
  {
    id: "root",
    name: "My Files",
    children: [
      {
        id: "docs",
        name: "Documents",
        children: [
          { id: "doc1", name: "Report.pdf" },
          { id: "doc2", name: "Presentation.pptx" },
        ],
      },
      {
        id: "images",
        name: "Images",
        children: [
          { id: "img1", name: "photo1.jpg" },
          { id: "img2", name: "photo2.png" },
        ],
      },
      { id: "file1", name: "readme.txt" },
    ],
  },
];

function FileExplorer() {
  const [selectedNode, setSelectedNode] = useState(null);
  const [treeData, setTreeData] = useState(fileData);

  const handleActivate = (node: NodeApi) => {
    console.log("Opened:", node.data.name);
    setSelectedNode(node.data);
  };

  const handleSelect = (nodes: NodeApi[]) => {
    if (nodes.length > 0) {
      setSelectedNode(nodes[0].data);
    } else {
      setSelectedNode(null);
    }
  };

  const handleRename = ({ id, name }: { id: string; name: string }) => {
    const updateNode = (nodes: any[]): any[] => {
      return nodes.map(node => {
        if (node.id === id) {
          return { ...node, name };
        }
        if (node.children) {
          return { ...node, children: updateNode(node.children) };
        }
        return node;
      });
    };
    setTreeData(updateNode(treeData));
  };

  const handleDelete = (id: string) => {
    const deleteNode = (nodes: any[]): any[] => {
      return nodes
        .filter(node => node.id !== id)
        .map(node => {
          if (node.children) {
            return { ...node, children: deleteNode(node.children) };
          }
          return node;
        });
    };
    setTreeData(deleteNode(treeData));
  };

  return (
    <div style={{ display: 'flex', height: '500px', padding: '20px' }}>
      <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}>
        <h3>File Explorer</h3>
        <Tree
          initialData={treeData}
          onActivate={handleActivate}
          onSelect={handleSelect}
          onRename={handleRename}
          onDelete={handleDelete}
        />
      </div>
      <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <h3>File Details</h3>
        {selectedNode ? (
          <div>
            <p><strong>Name:</strong> {selectedNode.name}</p>
            <p><strong>ID:</strong> {selectedNode.id}</p>
            <p><strong>Type:</strong> {selectedNode.children ? 'Folder' : 'File'}</p>
          </div>
        ) : (
          <p>Select a file or folder to view details</p>
        )}
      </div>
    </div>
  );
}

export default FileExplorer;

Now create a directory structure viewer:

// src/DirectoryViewer.jsx
import React, { useState } from 'react';
import { Tree, NodeApi } from 'react-arborist';

const directoryData = [
  {
    id: "src",
    name: "src",
    children: [
      {
        id: "components",
        name: "components",
        children: [
          { id: "Button.jsx", name: "Button.jsx" },
          { id: "Card.jsx", name: "Card.jsx" },
        ],
      },
      {
        id: "utils",
        name: "utils",
        children: [
          { id: "helpers.js", name: "helpers.js" },
        ],
      },
      { id: "App.jsx", name: "App.jsx" },
      { id: "index.js", name: "index.js" },
    ],
  },
  {
    id: "public",
    name: "public",
    children: [
      { id: "index.html", name: "index.html" },
    ],
  },
  { id: "package.json", name: "package.json" },
];

function DirectoryViewer() {
  const [expandedIds, setExpandedIds] = useState<string[]>(['src', 'components']);

  const handleToggle = (id: string) => {
    setExpandedIds(prev => 
      prev.includes(id) 
        ? prev.filter(expandedId => expandedId !== id)
        : [...prev, id]
    );
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px' }}>
      <h2>Directory Structure</h2>
      <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px', backgroundColor: '#f9f9f9' }}>
        <Tree
          initialData={directoryData}
          onToggle={handleToggle}
          openByDefault={false}
        />
      </div>
    </div>
  );
}

export default DirectoryViewer;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FileExplorer from './FileExplorer';
import DirectoryViewer from './DirectoryViewer';
import './App.css';

function App() {
  return (
    <div className="App">
      <FileExplorer />
      <DirectoryViewer />
    </div>
  );
}

export default App;

This example demonstrates:

File explorer interface
Node selection and activation
Rename functionality
Delete functionality
Custom event handlers
Tree data management
Directory structure display

Common Issues / Troubleshooting

Tree not rendering: Make sure your data structure is correct. Each node needs id and name properties. Check that initialData is an array.
Nodes not expanding: Verify that nodes with children have a children array. Check that onToggle handler is working correctly.
Selection not working: Ensure onSelect handler is provided. Check that nodes are clickable and not disabled.
Drag and drop not working: Make sure drag and drop is enabled. Check browser console for errors related to drag events.
Performance issues: For large trees, react-arborist uses virtual rendering. Ensure you're not rendering too many nodes at once. Consider lazy loading children.
Styling issues: react-arborist provides default styles. Override with custom CSS or use the className prop. Check that styles aren't being overridden by global CSS.

Next Steps

Now that you have an understanding of react-arborist:

Explore custom node rendering
Learn about virtual rendering optimization
Implement search and filtering
Add context menus
Create nested drag and drop
Integrate with state management
Check the official repository: https://github.com/brimdata/react-arborist

Summary

You've successfully set up react-arborist in your React application and created tree views with drag and drop, inline editing, and keyboard navigation. react-arborist provides a powerful solution for building file explorers and hierarchical data displays in React applications.

SEO Keywords

react-arborist
react-arborist tree view
React tree component
react-arborist installation
React file explorer
react-arborist tutorial
React directory tree
react-arborist example
React hierarchical data
react-arborist setup
React tree view library
react-arborist getting started
React drag and drop tree
react-arborist advanced usage

Building Command Palettes with kbar in React

Justin Clark — Mon, 19 Jan 2026 18:33:07 +0000

kbar is a fast, portable, and extensible ⌘K interface for React applications. It provides a complete command palette solution with keyboard shortcuts, search functionality, and customizable UI components. kbar makes it easy to create powerful command menus similar to those found in VS Code, Linear, and other modern applications. This guide walks through setting up and creating command palettes using kbar with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of keyboard shortcuts

Installation

Install kbar using your preferred package manager:

npm install kbar

Or with yarn:

yarn add kbar

Or with pnpm:

pnpm add kbar

After installation, your package.json should include:

{
  "dependencies": {
    "kbar": "^0.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

kbar requires wrapping your application with KBarProvider and including the UI components. Let's set up the basic structure.

First Example / Basic Usage

Let's create a simple command palette. Update your src/App.jsx:

// src/App.jsx
import React from 'react';
import {
  KBarProvider,
  KBarPortal,
  KBarPositioner,
  KBarAnimator,
  KBarSearch,
  KBarResults,
  useMatches
} from 'kbar';
import './App.css';

// Define actions for the command palette
const actions = [
  {
    id: 'blog',
    name: 'Blog',
    shortcut: ['b'],
    keywords: 'writing words articles',
    perform: () => {
      console.log('Navigate to blog');
      window.location.pathname = '/blog';
    }
  },
  {
    id: 'contact',
    name: 'Contact',
    shortcut: ['c'],
    keywords: 'email message',
    perform: () => {
      console.log('Navigate to contact');
      window.location.pathname = '/contact';
    }
  },
  {
    id: 'github',
    name: 'Open GitHub',
    shortcut: ['g', 'h'],
    keywords: 'code repository',
    perform: () => {
      window.open('https://github.com', '_blank');
    }
  }
];

// Component to render search results
function RenderResults() {
  const { results } = useMatches();

  return (
    <KBarResults
      items={results}
      onRender={({ item, active }) =>
        typeof item === 'string' ? (
          <div style={{ padding: '8px 16px', fontSize: '12px', opacity: 0.5 }}>
            {item}
          </div>
        ) : (
          <div
            style={{
              padding: '12px 16px',
              background: active ? '#eee' : 'transparent',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '12px'
            }}
          >
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <span>{item.name}</span>
              {item.subtitle && (
                <span style={{ fontSize: '12px', opacity: 0.6 }}>
                  {item.subtitle}
                </span>
              )}
            </div>
          </div>
        )
      }
    />
  );
}

// Main app component
function App() {
  return (
    <KBarProvider actions={actions}>
      <KBarPortal>
        <KBarPositioner>
          <KBarAnimator>
            <KBarSearch />
            <RenderResults />
          </KBarAnimator>
        </KBarPositioner>
      </KBarPortal>
      <div className="App">
        <h1>My Application</h1>
        <p>Press ⌘K (or Ctrl+K) to open the command palette</p>
      </div>
    </KBarProvider>
  );
}

export default App;

This creates a basic command palette that opens with ⌘K (or Ctrl+K) and displays searchable actions.

Understanding the Basics

kbar provides command palette components:

KBarProvider: Context provider that wraps your app
KBarPortal: Portal for rendering the command palette
KBarPositioner: Positions the palette on screen
KBarAnimator: Animates the palette appearance
KBarSearch: Search input field
KBarResults: Displays filtered results
useMatches: Hook to get filtered results

Key concepts:

Actions: Array of command objects with id, name, shortcut, keywords, and perform function
Keyboard shortcuts: Press ⌘K (Mac) or Ctrl+K (Windows/Linux) to open
Search: Automatically filters actions based on name and keywords
Custom rendering: Use onRender prop to customize result appearance

Here's an example with more features:

// src/AdvancedCommandPalette.jsx
import React from 'react';
import {
  KBarProvider,
  KBarPortal,
  KBarPositioner,
  KBarAnimator,
  KBarSearch,
  KBarResults,
  useMatches
} from 'kbar';

const advancedActions = [
  {
    id: 'home',
    name: 'Home',
    shortcut: ['h'],
    keywords: 'home page',
    perform: () => console.log('Navigate to home')
  },
  {
    id: 'settings',
    name: 'Settings',
    shortcut: ['s'],
    keywords: 'preferences config',
    perform: () => console.log('Open settings'),
    icon: '⚙️',
    subtitle: 'Configure your preferences'
  },
  {
    id: 'theme',
    name: 'Toggle Theme',
    shortcut: ['t'],
    keywords: 'dark light mode',
    perform: () => console.log('Toggle theme'),
    icon: '🌓'
  }
];

function AdvancedRenderResults() {
  const { results } = useMatches();

  return (
    <KBarResults
      items={results}
      onRender={({ item, active }) =>
        typeof item === 'string' ? (
          <div style={{
            padding: '8px 16px',
            fontSize: '12px',
            textTransform: 'uppercase',
            color: '#666',
            fontWeight: 600
          }}>
            {item}
          </div>
        ) : (
          <div
            style={{
              padding: '12px 16px',
              background: active ? '#f0f0f0' : 'transparent',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              borderLeft: active ? '3px solid #007bff' : '3px solid transparent'
            }}
          >
            {item.icon && <span style={{ fontSize: '20px' }}>{item.icon}</span>}
            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
              <span style={{ fontWeight: 500 }}>{item.name}</span>
              {item.subtitle && (
                <span style={{ fontSize: '12px', opacity: 0.6 }}>
                  {item.subtitle}
                </span>
              )}
            </div>
            {item.shortcut && (
              <div style={{ display: 'flex', gap: '4px' }}>
                {item.shortcut.map((key) => (
                  <kbd
                    key={key}
                    style={{
                      padding: '4px 8px',
                      backgroundColor: '#ddd',
                      borderRadius: '4px',
                      fontSize: '11px'
                    }}
                  >
                    {key}
                  </kbd>
                ))}
              </div>
            )}
          </div>
        )
      }
    />
  );
}

function AdvancedCommandPalette() {
  return (
    <KBarProvider actions={advancedActions}>
      <KBarPortal>
        <KBarPositioner>
          <KBarAnimator>
            <KBarSearch placeholder="Type a command or search..." />
            <AdvancedRenderResults />
          </KBarAnimator>
        </KBarPositioner>
      </KBarPortal>
      <div style={{ padding: '40px' }}>
        <h1>Advanced Command Palette</h1>
        <p>Press ⌘K to open</p>
      </div>
    </KBarProvider>
  );
}

export default AdvancedCommandPalette;

Practical Example / Building Something Real

Let's build a comprehensive command palette with grouped actions and navigation:

// src/ComprehensiveCommandPalette.jsx
import React from 'react';
import {
  KBarProvider,
  KBarPortal,
  KBarPositioner,
  KBarAnimator,
  KBarSearch,
  KBarResults,
  useMatches
} from 'kbar';

const comprehensiveActions = [
  {
    id: 'home',
    name: 'Home',
    shortcut: ['h'],
    keywords: 'home page main',
    perform: () => console.log('Navigate to home'),
    icon: '🏠'
  },
  {
    id: 'blog',
    name: 'Blog',
    shortcut: ['b'],
    keywords: 'writing articles posts',
    perform: () => console.log('Navigate to blog'),
    icon: '📝'
  },
  {
    id: 'contact',
    name: 'Contact',
    shortcut: ['c'],
    keywords: 'email message reach',
    perform: () => console.log('Navigate to contact'),
    icon: '📧',
    subtitle: 'Get in touch with us'
  },
  {
    id: 'settings',
    name: 'Settings',
    shortcut: ['s'],
    keywords: 'preferences config',
    perform: () => console.log('Open settings'),
    icon: '⚙️',
    subtitle: 'Configure your preferences'
  },
  {
    id: 'theme',
    name: 'Toggle Theme',
    shortcut: ['t'],
    keywords: 'dark light mode',
    perform: () => console.log('Toggle theme'),
    icon: '🌓'
  },
  {
    id: 'github',
    name: 'Open GitHub',
    shortcut: ['g', 'h'],
    keywords: 'code repository',
    perform: () => window.open('https://github.com', '_blank'),
    icon: '🐙'
  },
  {
    id: 'docs',
    name: 'Documentation',
    shortcut: ['d'],
    keywords: 'docs help guide',
    perform: () => window.open('https://docs.example.com', '_blank'),
    icon: '📚'
  }
];

function ComprehensiveRenderResults() {
  const { results } = useMatches();

  return (
    <KBarResults
      items={results}
      maxHeight={400}
      onRender={({ item, active }) =>
        typeof item === 'string' ? (
          <div style={{
            padding: '8px 20px',
            fontSize: '11px',
            textTransform: 'uppercase',
            color: '#666',
            letterSpacing: '1px',
            fontWeight: 600,
            backgroundColor: '#f8f9fa'
          }}>
            {item}
          </div>
        ) : (
          <div
            style={{
              padding: '12px 20px',
              backgroundColor: active ? '#e7f3ff' : 'transparent',
              borderLeft: active ? '3px solid #007bff' : '3px solid transparent',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              cursor: 'pointer',
              transition: 'all 0.2s ease'
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
              {item.icon && (
                <div style={{ fontSize: '20px', width: '24px', textAlign: 'center' }}>
                  {item.icon}
                </div>
              )}
              <div>
                <div style={{ color: '#333', fontSize: '14px', fontWeight: 500 }}>
                  {item.name}
                </div>
                {item.subtitle && (
                  <div style={{ color: '#666', fontSize: '12px', marginTop: '2px' }}>
                    {item.subtitle}
                  </div>
                )}
              </div>
            </div>
            {item.shortcut && (
              <div style={{ display: 'flex', gap: '4px' }}>
                {item.shortcut.map((key) => (
                  <kbd
                    key={key}
                    style={{
                      padding: '4px 8px',
                      backgroundColor: '#f0f0f0',
                      borderRadius: '4px',
                      fontSize: '11px',
                      color: '#666',
                      fontFamily: 'monospace',
                      border: '1px solid #ddd'
                    }}
                  >
                    {key}
                  </kbd>
                ))}
              </div>
            )}
          </div>
        )
      }
    />
  );
}

function ComprehensiveCommandPalette() {
  return (
    <KBarProvider actions={comprehensiveActions}>
      <KBarPortal>
        <KBarPositioner
          style={{
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            zIndex: 9999
          }}
        >
          <KBarAnimator
            style={{
              maxWidth: '600px',
              width: '100%',
              backgroundColor: 'white',
              borderRadius: '12px',
              overflow: 'hidden',
              boxShadow: '0 16px 70px rgba(0, 0, 0, 0.3)'
            }}
          >
            <KBarSearch
              style={{
                padding: '16px 20px',
                fontSize: '16px',
                width: '100%',
                boxSizing: 'border-box',
                outline: 'none',
                border: 'none',
                borderBottom: '1px solid #eee'
              }}
              placeholder="Type a command or search..."
            />
            <ComprehensiveRenderResults />
          </KBarAnimator>
        </KBarPositioner>
      </KBarPortal>
      <div style={{ padding: '40px', minHeight: '100vh' }}>
        <h1>Comprehensive Command Palette</h1>
        <p>Press ⌘K (or Ctrl+K) to open the command palette</p>
        <div style={{ marginTop: '20px' }}>
          <h2>Available Commands:</h2>
          <ul>
            <li><strong>h</strong> - Navigate to Home</li>
            <li><strong>b</strong> - Navigate to Blog</li>
            <li><strong>c</strong> - Navigate to Contact</li>
            <li><strong>s</strong> - Open Settings</li>
            <li><strong>t</strong> - Toggle Theme</li>
            <li><strong>g h</strong> - Open GitHub</li>
            <li><strong>d</strong> - Open Documentation</li>
          </ul>
        </div>
      </div>
    </KBarProvider>
  );
}

export default ComprehensiveCommandPalette;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ComprehensiveCommandPalette from './ComprehensiveCommandPalette';
import './App.css';

function App() {
  return (
    <div className="App">
      <ComprehensiveCommandPalette />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple actions with icons
Keyboard shortcuts display
Grouped results
Custom styling
Search functionality
Action execution
Responsive design

Common Issues / Troubleshooting

Command palette not opening: Make sure you've wrapped your app with KBarProvider. The default shortcut is ⌘K (Mac) or Ctrl+K (Windows/Linux). Check browser console for errors.
Actions not showing: Verify that your actions array is properly formatted with required fields (id, name, perform). Check that KBarResults is inside KBarAnimator.
Search not working: Ensure KBarSearch is included and useMatches hook is used correctly. Actions are filtered by name and keywords automatically.
Styling issues: kbar is unstyled by default. Add custom styles to KBarPositioner, KBarAnimator, and result items. Use inline styles or CSS classes.
Keyboard shortcuts not working: Check that no other components are intercepting keyboard events. Ensure KBarProvider is at the root level of your app.
Portal rendering issues: Make sure KBarPortal is included. The portal renders the command palette outside the normal DOM hierarchy.

Next Steps

Now that you have an understanding of kbar:

Explore action groups and nested actions
Learn about custom action handlers
Implement dynamic actions based on app state
Add animations and transitions
Create context-aware commands
Integrate with routing libraries
Check the official repository: https://github.com/timc1/kbar

Summary

You've successfully set up kbar in your React application and created command palettes with keyboard shortcuts, search functionality, and customizable actions. kbar provides a fast, portable solution for building ⌘K interfaces in React applications.

SEO Keywords

kbar
kbar React
kbar command palette
React ⌘K menu
kbar installation
React command menu
kbar tutorial
React command palette library
kbar example
React keyboard shortcuts
kbar setup
React cmd+k interface
kbar getting started
React searchable menu
kbar advanced usage

Building Command Menus with cmdk in React

Justin Clark — Mon, 19 Jan 2026 18:31:51 +0000

cmdk is a fast, unstyled command menu React component that provides a composable API for building command palettes, search interfaces, and accessible comboboxes. It automatically handles filtering, sorting, keyboard navigation, and accessibility, making it perfect for creating ⌘K-style command menus. This guide walks through setting up and creating command menus using cmdk with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of keyboard navigation

Installation

Install cmdk using your preferred package manager:

npm install cmdk

Or with yarn:

yarn add cmdk

Or with pnpm:

pnpm add cmdk

After installation, your package.json should include:

{
  "dependencies": {
    "cmdk": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

cmdk requires minimal setup. Import the components and you're ready to use them. You may want to add some basic styling for a better appearance.

First Example / Basic Usage

Let's create a simple command menu. Create a new file src/CommandMenuExample.jsx:

// src/CommandMenuExample.jsx
import React, { useState } from 'react';
import { Command } from 'cmdk';

function CommandMenuExample() {
  const [open, setOpen] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          padding: '8px 16px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Open Command Menu
      </button>
      {open && (
        <div style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '500px',
          backgroundColor: 'white',
          borderRadius: '8px',
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
          zIndex: 1000
        }}>
          <Command>
            <Command.Input placeholder="Type a command or search..." />
            <Command.List>
              <Command.Empty>No results found.</Command.Empty>
              <Command.Group heading="Suggestions">
                <Command.Item>Calendar</Command.Item>
                <Command.Item>Search Emoji</Command.Item>
                <Command.Item>Calculator</Command.Item>
              </Command.Group>
              <Command.Group heading="Settings">
                <Command.Item>Profile</Command.Item>
                <Command.Item>Billing</Command.Item>
                <Command.Item>Settings</Command.Item>
              </Command.Group>
            </Command.List>
          </Command>
        </div>
      )}
      {open && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0,0,0,0.5)',
            zIndex: 999
          }}
          onClick={() => setOpen(false)}
        />
      )}
    </div>
  );
}

export default CommandMenuExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import CommandMenuExample from './CommandMenuExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <CommandMenuExample />
    </div>
  );
}

export default App;

This creates a basic command menu with searchable items grouped by category.

Understanding the Basics

cmdk provides command menu components:

Command: Main container component
Command.Input: Search input field
Command.List: Container for command items
Command.Item: Individual command item
Command.Group: Group of related items
Command.Empty: Message when no results found
Command.Separator: Visual separator between groups

Key concepts:

Automatic filtering: Items are filtered as you type
Keyboard navigation: Arrow keys, Enter, Escape work automatically
Composable API: Build complex menus with nested components
Accessibility: Built-in ARIA attributes and keyboard support
Unstyled: You provide all styling

Here's an example with more features:

// src/AdvancedCommandMenuExample.jsx
import React, { useState } from 'react';
import { Command } from 'cmdk';

function AdvancedCommandMenuExample() {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState('');

  const items = [
    { id: '1', label: 'New File', group: 'File' },
    { id: '2', label: 'Open File', group: 'File' },
    { id: '3', label: 'Save', group: 'File' },
    { id: '4', label: 'Cut', group: 'Edit' },
    { id: '5', label: 'Copy', group: 'Edit' },
    { id: '6', label: 'Paste', group: 'Edit' },
    { id: '7', label: 'Undo', group: 'Edit' },
    { id: '8', label: 'Redo', group: 'Edit' }
  ];

  const filteredItems = items.filter(item =>
    item.label.toLowerCase().includes(search.toLowerCase())
  );

  const groupedItems = filteredItems.reduce((acc, item) => {
    if (!acc[item.group]) {
      acc[item.group] = [];
    }
    acc[item.group].push(item);
    return acc;
  }, {});

  return (
    <div style={{ padding: '20px' }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          padding: '8px 16px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Open Command Menu (⌘K)
      </button>
      {open && (
        <div style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '500px',
          backgroundColor: 'white',
          borderRadius: '8px',
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
          zIndex: 1000
        }}>
          <Command>
            <Command.Input
              placeholder="Type a command or search..."
              value={search}
              onValueChange={setSearch}
            />
            <Command.List>
              <Command.Empty>No results found.</Command.Empty>
              {Object.entries(groupedItems).map(([group, groupItems]) => (
                <Command.Group key={group} heading={group}>
                  {groupItems.map(item => (
                    <Command.Item
                      key={item.id}
                      onSelect={() => {
                        console.log(`Selected: ${item.label}`);
                        setOpen(false);
                      }}
                    >
                      {item.label}
                    </Command.Item>
                  ))}
                </Command.Group>
              ))}
            </Command.List>
          </Command>
        </div>
      )}
      {open && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0,0,0,0.5)',
            zIndex: 999
          }}
          onClick={() => setOpen(false)}
        />
      )}
    </div>
  );
}

export default AdvancedCommandMenuExample;

Practical Example / Building Something Real

Let's build a comprehensive command palette with keyboard shortcuts and actions:

// src/CommandPalette.jsx
import React, { useState, useEffect } from 'react';
import { Command } from 'cmdk';

function CommandPalette() {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState('');

  useEffect(() => {
    const down = (e) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) => !open);
      }
      if (e.key === 'Escape') {
        setOpen(false);
      }
    };

    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  const commands = [
    {
      id: 'new-file',
      label: 'New File',
      shortcut: '⌘N',
      group: 'File',
      action: () => console.log('New file created')
    },
    {
      id: 'open-file',
      label: 'Open File',
      shortcut: '⌘O',
      group: 'File',
      action: () => console.log('Open file dialog')
    },
    {
      id: 'save',
      label: 'Save',
      shortcut: '⌘S',
      group: 'File',
      action: () => console.log('File saved')
    },
    {
      id: 'cut',
      label: 'Cut',
      shortcut: '⌘X',
      group: 'Edit',
      action: () => console.log('Cut to clipboard')
    },
    {
      id: 'copy',
      label: 'Copy',
      shortcut: '⌘C',
      group: 'Edit',
      action: () => console.log('Copied to clipboard')
    },
    {
      id: 'paste',
      label: 'Paste',
      shortcut: '⌘V',
      group: 'Edit',
      action: () => console.log('Pasted from clipboard')
    },
    {
      id: 'settings',
      label: 'Settings',
      shortcut: '⌘,',
      group: 'Preferences',
      action: () => console.log('Open settings')
    },
    {
      id: 'theme',
      label: 'Toggle Theme',
      shortcut: '⌘T',
      group: 'Preferences',
      action: () => console.log('Theme toggled')
    }
  ];

  const filteredCommands = commands.filter(cmd =>
    cmd.label.toLowerCase().includes(search.toLowerCase()) ||
    cmd.group.toLowerCase().includes(search.toLowerCase())
  );

  const groupedCommands = filteredCommands.reduce((acc, cmd) => {
    if (!acc[cmd.group]) {
      acc[cmd.group] = [];
    }
    acc[cmd.group].push(cmd);
    return acc;
  }, {});

  const handleSelect = (command) => {
    command.action();
    setOpen(false);
    setSearch('');
  };

  return (
    <>
      {open && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0,0,0,0.5)',
            zIndex: 999,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          onClick={() => setOpen(false)}
        >
          <div
            style={{
              width: '600px',
              maxWidth: '90vw',
              backgroundColor: 'white',
              borderRadius: '8px',
              boxShadow: '0 10px 25px rgba(0,0,0,0.2)',
              overflow: 'hidden'
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <Command>
              <Command.Input
                placeholder="Type a command or search..."
                value={search}
                onValueChange={setSearch}
                style={{
                  width: '100%',
                  padding: '12px',
                  border: 'none',
                  outline: 'none',
                  fontSize: '16px',
                  borderBottom: '1px solid #eee'
                }}
              />
              <Command.List style={{ maxHeight: '400px', overflow: 'auto' }}>
                <Command.Empty style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
                  No results found.
                </Command.Empty>
                {Object.entries(groupedCommands).map(([group, groupCommands]) => (
                  <Command.Group
                    key={group}
                    heading={group}
                    style={{
                      padding: '8px 0',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      color: '#666',
                      textTransform: 'uppercase',
                      paddingLeft: '12px'
                    }}
                  >
                    {groupCommands.map(cmd => (
                      <Command.Item
                        key={cmd.id}
                        onSelect={() => handleSelect(cmd)}
                        style={{
                          padding: '12px',
                          cursor: 'pointer',
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center'
                        }}
                      >
                        <span>{cmd.label}</span>
                        <span style={{ fontSize: '12px', color: '#999' }}>
                          {cmd.shortcut}
                        </span>
                      </Command.Item>
                    ))}
                  </Command.Group>
                ))}
              </Command.List>
            </Command>
          </div>
        </div>
      )}
    </>
  );
}

export default CommandPalette;

Now create a full application with the command palette:

// src/AppWithCommandPalette.jsx
import React from 'react';
import CommandPalette from './CommandPalette';

function AppWithCommandPalette() {
  return (
    <div style={{ padding: '40px', minHeight: '100vh' }}>
      <h1>My Application</h1>
      <p>Press ⌘K (or Ctrl+K) to open the command palette</p>
      <CommandPalette />
    </div>
  );
}

export default AppWithCommandPalette;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AppWithCommandPalette from './AppWithCommandPalette';
import './App.css';

function App() {
  return (
    <div className="App">
      <AppWithCommandPalette />
    </div>
  );
}

export default App;

This example demonstrates:

Keyboard shortcut (⌘K) to open menu
Searchable command items
Grouped commands
Keyboard shortcuts display
Action handlers
Modal overlay
Escape key to close
Click outside to close

Common Issues / Troubleshooting

Menu not opening: Make sure you're handling the keyboard event correctly. Check that open state is being set properly.
Items not filtering: Ensure Command.Input has onValueChange handler that updates search state. Items are automatically filtered based on their text content.
Styling issues: cmdk is unstyled by default. Add your own CSS or inline styles. Use Command.List with maxHeight and overflow: auto for scrollable lists.
Keyboard navigation not working: Make sure Command.Item components are properly nested inside Command.List. Check that no other elements are intercepting keyboard events.
Accessibility issues: cmdk includes ARIA attributes by default. Ensure your custom styling doesn't break accessibility. Test with screen readers.
Performance with many items: For large lists, consider virtualizing items or implementing pagination. cmdk handles filtering efficiently, but rendering many DOM elements can be slow.

Next Steps

Now that you have an understanding of cmdk:

Explore advanced filtering options
Learn about custom item rendering
Implement nested command groups
Add icons to command items
Create context-aware commands
Integrate with routing libraries
Check the official documentation: https://cmdk.paco.me/

Summary

You've successfully set up cmdk in your React application and created command menus with keyboard shortcuts, search functionality, and grouped commands. cmdk provides a fast, accessible, and composable solution for building command palettes in React applications.

SEO Keywords

cmdk
cmdk React
cmdk command menu
React command palette
cmdk installation
React ⌘K menu
cmdk tutorial
React command menu component
cmdk example
React command palette library
cmdk setup
React keyboard navigation
cmdk getting started
React searchable menu
cmdk advanced usage

Building Interactive Dashboards with React Dashboard

Justin Clark — Mon, 19 Jan 2026 18:30:39 +0000

React Dashboard is a comprehensive dashboard framework for React that provides pre-built components and layouts for creating professional admin dashboards. It offers a complete solution with navigation, widgets, charts, and responsive design out of the box. This guide walks through setting up and creating dashboards using React Dashboard with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of dashboard concepts

Installation

Install React Dashboard using your preferred package manager:

npm install react-dashboard

Or with yarn:

yarn add react-dashboard

Or with pnpm:

pnpm add react-dashboard

After installation, your package.json should include:

{
  "dependencies": {
    "react-dashboard": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Dashboard requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple dashboard. Create a new file src/DashboardExample.jsx:

// src/DashboardExample.jsx
import React from 'react';
import { Dashboard, Widget, Grid } from 'react-dashboard';

function DashboardExample() {
  const widgets = [
    {
      id: '1',
      title: 'Sales',
      value: '1,234',
      icon: '💰',
      color: '#4CAF50'
    },
    {
      id: '2',
      title: 'Revenue',
      value: '$12,345',
      icon: '💵',
      color: '#2196F3'
    },
    {
      id: '3',
      title: 'Users',
      value: '567',
      icon: '👥',
      color: '#FF9800'
    },
    {
      id: '4',
      title: 'Orders',
      value: '89',
      icon: '📦',
      color: '#9C27B0'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Basic Dashboard Example</h2>
      <Dashboard>
        <Grid columns={4} gap={20}>
          {widgets.map(widget => (
            <Widget key={widget.id}>
              <div style={{
                padding: '20px',
                backgroundColor: '#fff',
                borderRadius: '8px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                textAlign: 'center'
              }}>
                <div style={{ fontSize: '32px', marginBottom: '10px' }}>
                  {widget.icon}
                </div>
                <div style={{
                  fontSize: '24px',
                  fontWeight: 'bold',
                  marginBottom: '5px',
                  color: widget.color
                }}>
                  {widget.value}
                </div>
                <div style={{ color: '#666', fontSize: '14px' }}>
                  {widget.title}
                </div>
              </div>
            </Widget>
          ))}
        </Grid>
      </Dashboard>
    </div>
  );
}

export default DashboardExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardExample from './DashboardExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardExample />
    </div>
  );
}

export default App;

This creates a basic dashboard with four metric widgets.

Understanding the Basics

React Dashboard provides dashboard components:

Dashboard: Main dashboard container
Widget: Individual dashboard widgets
Grid: Grid layout system
Navigation: Sidebar navigation
Responsive: Automatic responsive behavior

Key concepts:

Dashboard structure: Dashboard contains Grid and Widgets
Grid system: Use Grid with columns prop for layout
Widget components: Individual dashboard elements
Responsive design: Automatic responsive behavior
Customization: Extensive styling options

Here's an example with a more complex layout:

// src/AdvancedDashboardExample.jsx
import React from 'react';
import { Dashboard, Widget, Grid } from 'react-dashboard';

function AdvancedDashboardExample() {
  const metrics = [
    { id: '1', title: 'Total Sales', value: '$50,000', trend: '+12%' },
    { id: '2', title: 'Active Users', value: '1,234', trend: '+5%' },
    { id: '3', title: 'Orders', value: '567', trend: '+8%' },
    { id: '4', title: 'Revenue', value: '$25,000', trend: '+15%' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h2>Advanced Dashboard Example</h2>
      <Dashboard>
        <Grid columns={4} gap={20}>
          {metrics.map(metric => (
            <Widget key={metric.id}>
              <div style={{
                padding: '20px',
                backgroundColor: '#fff',
                borderRadius: '8px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
              }}>
                <div style={{ fontSize: '14px', color: '#666', marginBottom: '10px' }}>
                  {metric.title}
                </div>
                <div style={{
                  fontSize: '28px',
                  fontWeight: 'bold',
                  marginBottom: '5px'
                }}>
                  {metric.value}
                </div>
                <div style={{ fontSize: '12px', color: '#4CAF50' }}>
                  {metric.trend}
                </div>
              </div>
            </Widget>
          ))}
        </Grid>
        <Grid columns={2} gap={20} style={{ marginTop: '20px' }}>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '300px'
            }}>
              <h3>Chart Placeholder</h3>
              <p>Chart would go here</p>
            </div>
          </Widget>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '300px'
            }}>
              <h3>Table Placeholder</h3>
              <p>Table would go here</p>
            </div>
          </Widget>
        </Grid>
      </Dashboard>
    </div>
  );
}

export default AdvancedDashboardExample;

Practical Example / Building Something Real

Let's build a comprehensive analytics dashboard:

// src/AnalyticsDashboard.jsx
import React, { useState } from 'react';
import { Dashboard, Widget, Grid } from 'react-dashboard';

function AnalyticsDashboard() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const metrics = [
    { id: '1', title: 'Total Sales', value: '$50,000', trend: '+12%', color: '#4CAF50' },
    { id: '2', title: 'Active Users', value: '1,234', trend: '+5%', color: '#2196F3' },
    { id: '3', title: 'Orders', value: '567', trend: '+8%', color: '#FF9800' },
    { id: '4', title: 'Revenue', value: '$25,000', trend: '+15%', color: '#9C27B0' }
  ];

  const chartData = selectedPeriod === 'monthly' 
    ? 'Monthly chart data would be displayed here'
    : 'Quarterly chart data would be displayed here';

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <Dashboard>
        <Grid columns={4} gap={20}>
          {metrics.map(metric => (
            <Widget key={metric.id}>
              <div style={{
                padding: '20px',
                backgroundColor: '#fff',
                borderRadius: '8px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                borderLeft: `4px solid ${metric.color}`
              }}>
                <div style={{ fontSize: '14px', color: '#666', marginBottom: '10px' }}>
                  {metric.title}
                </div>
                <div style={{
                  fontSize: '28px',
                  fontWeight: 'bold',
                  marginBottom: '5px',
                  color: metric.color
                }}>
                  {metric.value}
                </div>
                <div style={{ fontSize: '12px', color: '#4CAF50' }}>
                  {metric.trend}
                </div>
              </div>
            </Widget>
          ))}
        </Grid>
        <Grid columns={2} gap={20} style={{ marginTop: '20px' }}>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '400px'
            }}>
              <h3>Sales Chart</h3>
              <p>{chartData}</p>
            </div>
          </Widget>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '400px'
            }}>
              <h3>Revenue Chart</h3>
              <p>Revenue visualization would go here</p>
            </div>
          </Widget>
        </Grid>
        <Grid columns={1} gap={20} style={{ marginTop: '20px' }}>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '300px'
            }}>
              <h3>Recent Activity</h3>
              <ul style={{ listStyle: 'none', padding: 0 }}>
                <li style={{ padding: '10px', borderBottom: '1px solid #eee' }}>Order #1234 completed</li>
                <li style={{ padding: '10px', borderBottom: '1px solid #eee' }}>New user registered</li>
                <li style={{ padding: '10px', borderBottom: '1px solid #eee' }}>Payment received</li>
                <li style={{ padding: '10px' }}>Report generated</li>
              </ul>
            </div>
          </Widget>
        </Grid>
      </Dashboard>
    </div>
  );
}

export default AnalyticsDashboard;

Now create a customizable dashboard with navigation:

// src/CustomizableDashboard.jsx
import React, { useState } from 'react';
import { Dashboard, Widget, Grid, Sidebar, NavItem } from 'react-dashboard';

function CustomizableDashboard() {
  const [activeView, setActiveView] = useState('overview');

  const views = {
    overview: {
      title: 'Overview',
      content: (
        <Grid columns={3} gap={20}>
          <Widget>
            <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
              <h3>Widget 1</h3>
              <p>Overview content</p>
            </div>
          </Widget>
          <Widget>
            <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
              <h3>Widget 2</h3>
              <p>Overview content</p>
            </div>
          </Widget>
          <Widget>
            <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
              <h3>Widget 3</h3>
              <p>Overview content</p>
            </div>
          </Widget>
        </Grid>
      )
    },
    analytics: {
      title: 'Analytics',
      content: (
        <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
          <h3>Analytics View</h3>
          <p>Analytics content would go here</p>
        </div>
      )
    },
    reports: {
      title: 'Reports',
      content: (
        <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
          <h3>Reports View</h3>
          <p>Reports content would go here</p>
        </div>
      )
    }
  };

  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <Sidebar style={{ width: '200px', backgroundColor: '#f8f9fa', padding: '20px' }}>
        <h3>Dashboard</h3>
        <nav style={{ marginTop: '20px' }}>
          {Object.keys(views).map(view => (
            <NavItem
              key={view}
              onClick={() => setActiveView(view)}
              style={{
                padding: '10px',
                marginBottom: '5px',
                cursor: 'pointer',
                backgroundColor: activeView === view ? '#007bff' : 'transparent',
                color: activeView === view ? 'white' : '#333',
                borderRadius: '4px'
              }}
            >
              {views[view].title}
            </NavItem>
          ))}
        </nav>
      </Sidebar>
      <div style={{ flex: 1, padding: '20px' }}>
        <h1>{views[activeView].title}</h1>
        <Dashboard>
          {views[activeView].content}
        </Dashboard>
      </div>
    </div>
  );
}

export default CustomizableDashboard;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AnalyticsDashboard from './AnalyticsDashboard';
import CustomizableDashboard from './CustomizableDashboard';
import './App.css';

function App() {
  return (
    <div className="App">
      <AnalyticsDashboard />
      <CustomizableDashboard />
    </div>
  );
}

export default App;

This example demonstrates:

Analytics dashboard
Multiple widgets
Grid layouts
Navigation
Dynamic views
Custom styling
Responsive design

Common Issues / Troubleshooting

Dashboard not displaying: Make sure you're importing components correctly from 'react-dashboard'. Check that Grid and Widget components are properly nested.
Layout issues: Use Grid component with columns prop to control layout. Adjust gap prop for spacing between widgets.
Widgets not showing: Ensure Widget components are inside Grid. Check that Grid columns match the number of widgets per row.
Styling issues: Customize widget styles through inline styles or CSS. Use boxShadow and borderRadius for card-like appearance.
Responsive not working: Grid component handles responsiveness automatically. Adjust columns prop for different screen sizes.
Navigation not working: Use Sidebar and NavItem components for navigation. Handle view changes with state management.

Next Steps

Now that you have an understanding of React Dashboard:

Explore all available components
Learn about advanced layouts
Add custom widgets
Implement data integration
Create responsive dashboards
Learn about other dashboard libraries
Check the official repository: https://github.com/flatlogic/react-dashboard

Summary

You've successfully set up React Dashboard in your React application and created analytics dashboards, metric widgets, and customizable layouts. React Dashboard provides a comprehensive solution for building professional admin dashboards with minimal configuration.

SEO Keywords

react-dashboard
React Dashboard
react-dashboard tutorial
React admin dashboard
react-dashboard installation
React dashboard framework
react-dashboard example
React dashboard widgets
react-dashboard setup
React analytics dashboard
react-dashboard customization
React dashboard component
react-dashboard grid
React dashboard layout
react-dashboard getting started

Getting Started with Flowchart React: Creating Flowcharts in React

Justin Clark — Mon, 19 Jan 2026 18:29:30 +0000

Flowchart React is a React library for creating interactive flowcharts and diagrams. It provides components for building node-based visualizations with connections, making it easy to create process flows, decision trees, and organizational charts. This guide walks through setting up and creating flowcharts using Flowchart React with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install Flowchart React using your preferred package manager:

npm install flowchart-react

Or with yarn:

yarn add flowchart-react

Or with pnpm:

pnpm add flowchart-react

After installation, your package.json should include:

{
  "dependencies": {
    "flowchart-react": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Flowchart React requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple flowchart. Create a new file src/FlowchartExample.jsx:

// src/FlowchartExample.jsx
import React from 'react';
import { Flowchart } from 'flowchart-react';

function FlowchartExample() {
  const nodes = [
    { id: '1', text: 'Start', x: 100, y: 50 },
    { id: '2', text: 'Process', x: 100, y: 150 },
    { id: '3', text: 'End', x: 100, y: 250 }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '2', to: '3' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Flowchart Example</h2>
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '400px' }}
      />
    </div>
  );
}

export default FlowchartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FlowchartExample from './FlowchartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <FlowchartExample />
    </div>
  );
}

export default App;

This creates a basic flowchart with three nodes connected in sequence.

Understanding the Basics

Flowchart React provides flowchart components:

Flowchart component: Main flowchart container
Nodes array: Array of node objects with id, text, x, y
Connections array: Array of connection objects with from and to
Interactive: Drag and drop, zoom, pan
Customizable: Custom node shapes and styles

Key concepts:

Node structure: Objects with id, text, and position (x, y)
Connection structure: Objects with from and to node IDs
Positioning: Use x and y coordinates for node placement
Styling: Customize node and connection appearance
Interactivity: Built-in drag and drop functionality

Here's an example with a decision flowchart:

// src/DecisionFlowchartExample.jsx
import React from 'react';
import { Flowchart } from 'flowchart-react';

function DecisionFlowchartExample() {
  const nodes = [
    { id: '1', text: 'Start', x: 200, y: 50, shape: 'rectangle' },
    { id: '2', text: 'Decision?', x: 200, y: 150, shape: 'diamond' },
    { id: '3', text: 'Yes Path', x: 100, y: 250, shape: 'rectangle' },
    { id: '4', text: 'No Path', x: 300, y: 250, shape: 'rectangle' },
    { id: '5', text: 'End', x: 200, y: 350, shape: 'rectangle' }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '2', to: '3', label: 'Yes' },
    { from: '2', to: '4', label: 'No' },
    { from: '3', to: '5' },
    { from: '4', to: '5' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Decision Flowchart Example</h2>
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '500px' }}
      />
    </div>
  );
}

export default DecisionFlowchartExample;

Practical Example / Building Something Real

Let's build a process workflow flowchart:

// src/ProcessFlowchart.jsx
import React, { useState } from 'react';
import { Flowchart } from 'flowchart-react';

function ProcessFlowchart() {
  const [selectedNode, setSelectedNode] = useState(null);

  const nodes = [
    { id: '1', text: 'Start', x: 200, y: 50, shape: 'ellipse' },
    { id: '2', text: 'Input Data', x: 200, y: 150, shape: 'parallelogram' },
    { id: '3', text: 'Validate', x: 200, y: 250, shape: 'diamond' },
    { id: '4', text: 'Process', x: 100, y: 350, shape: 'rectangle' },
    { id: '5', text: 'Error Handler', x: 300, y: 350, shape: 'rectangle' },
    { id: '6', text: 'Output', x: 200, y: 450, shape: 'parallelogram' },
    { id: '7', text: 'End', x: 200, y: 550, shape: 'ellipse' }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '2', to: '3' },
    { from: '3', to: '4', label: 'Valid' },
    { from: '3', to: '5', label: 'Invalid' },
    { from: '4', to: '6' },
    { from: '5', to: '6' },
    { from: '6', to: '7' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <h1>Process Workflow</h1>
      {selectedNode && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          Selected: {selectedNode.text}
        </div>
      )}
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '700px', border: '1px solid #ddd', borderRadius: '4px' }}
        onNodeClick={(node) => setSelectedNode(node)}
      />
    </div>
  );
}

export default ProcessFlowchart;

Now create an organizational chart:

// src/OrgChart.jsx
import React from 'react';
import { Flowchart } from 'flowchart-react';

function OrgChart() {
  const nodes = [
    { id: '1', text: 'CEO', x: 300, y: 50 },
    { id: '2', text: 'CTO', x: 150, y: 150 },
    { id: '3', text: 'CFO', x: 300, y: 150 },
    { id: '4', text: 'COO', x: 450, y: 150 },
    { id: '5', text: 'Dev Lead', x: 100, y: 250 },
    { id: '6', text: 'QA Lead', x: 200, y: 250 },
    { id: '7', text: 'Finance Manager', x: 300, y: 250 },
    { id: '8', text: 'Operations Manager', x: 450, y: 250 }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '1', to: '3' },
    { from: '1', to: '4' },
    { from: '2', to: '5' },
    { from: '2', to: '6' },
    { from: '3', to: '7' },
    { from: '4', to: '8' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Organizational Chart</h2>
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '400px', border: '1px solid #ddd', borderRadius: '4px' }}
      />
    </div>
  );
}

export default OrgChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ProcessFlowchart from './ProcessFlowchart';
import OrgChart from './OrgChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <ProcessFlowchart />
      <OrgChart />
    </div>
  );
}

export default App;

This example demonstrates:

Process workflows
Decision trees
Organizational charts
Interactive features
Custom node shapes
Connection labels

Common Issues / Troubleshooting

Flowchart not displaying: Make sure you're importing Flowchart correctly from 'flowchart-react'. Check that nodes and connections arrays are properly formatted.
Nodes not showing: Ensure nodes have id, text, x, and y properties. Check that coordinates are within the visible area.
Connections not working: Verify that connection from and to IDs match node IDs. Check for typos in node IDs.
Styling issues: Customize node and connection styles through component props. Use shape property for different node shapes.
Positioning issues: Adjust x and y coordinates to position nodes. Use larger coordinate values for more spacing.
Interactive not working: Check that onNodeClick and other event handlers are properly configured. Ensure the component supports the events you're using.

Next Steps

Now that you have a basic understanding of Flowchart React:

Explore all available node shapes
Learn about advanced configurations
Add custom styling
Implement drag and drop
Create complex workflows
Learn about other flowchart libraries
Check the official repository: https://github.com/joyceworks/flowchart-react

Summary

You've successfully set up Flowchart React in your React application and created process flowcharts, decision trees, and organizational charts. Flowchart React provides a simple solution for creating interactive flowcharts with minimal configuration.

SEO Keywords

flowchart-react
React Flowchart
flowchart-react tutorial
React diagram library
flowchart-react installation
React process flow
flowchart-react example
React decision tree
flowchart-react setup
React organizational chart
flowchart-react customization
React flowchart component
flowchart-react workflow
React diagram visualization
flowchart-react getting started