React-Dockable

React-Dockable is a React library to create beautiful dockable tabbed interfaces for tools, dashboards, and more.

• Live Demo: dockable.netlify.app
• Github Repo: github.com/DanFessler/react-dockable

Motivation

Writing tools is hard, and half the battle is constantly redesigning your UI to accommodate for new features. This is why many companies implement robust dockable UI systems in tools like Unity, Unreal, and Photoshop, which ensures every new feature has a home and puts the user in control of their workflow.

React-Dockable was originally created for my own projects and tools such as Index Painter and CTX Game Engine, but after many requests from friends and collegues I open-sourced the proejct for others to use as well. It was also used by our agentic UGC platform, Incite Worlds.

Key features

• Beautifully polished
  React-dockable prioritizes the user experience by staying intuitive and unobtrusive. It gets out of the way of the user and what they want to do.

• Fully customizable layouts
  Layouts are fully dynamic and user customizable right out of the box. No work necessary.

• Simple declarative configuration
  No complicated data structures to learn, define your Layouts the React Way™ with a simple declarative component API

• Color Theme Presets
  Dockable provides 4 beautiful color themes: Light, Medium, Dark, and Darker.