dockview-react

React bindings for dockview, a zero dependency layout manager supporting tabs, groups, grids and splitviews

Please see the website: https://dockview.dev

Features

• Serialization / deserialization with full layout management
• Support for split-views, grid-views and 'dockable' views
• Themeable and customizable
• Tab and Group docking / Drag n' Drop
• Touch & mobile support
• Popout Windows
• Floating Groups
• Edge Groups
• Tab Groups
• Extensive API
• Supports Shadow DOMs
• High test coverage
• Documentation website with live examples
• Transparent builds and Code Analysis
• Security in mind - verified publishing and builds through GitHub Actions

Quick Start

Dockview has a peer dependency on react and react-dom, versions 16.8 to 19. Install from npm:

npm install dockview-react
Copy

Import the stylesheet:

@import 'dockview-react/dist/styles/dockview.css';
Copy

Pass a theme and render the component:

import { DockviewReact, themeDark } from 'dockview-react';

const components = {
    myComponent: (props) => <div>Hello World</div>,
};

function App() {
    return (
        <div style={{ height: '400px' }}>
            <DockviewReact
                theme={themeDark}
                components={components}
                onReady={(event) => {
                    event.api.addPanel({
                        id: 'panel_1',
                        component: 'myComponent',
                    });
                }}
            />
        </div>
    );
}
Copy

See the documentation for full examples.

Want to verify our builds? Go here.