Skip to main content
Version: 1.8.4



dockview requires some CSS to work correctly. The CSS is exported as one file under dockview/dict/styles/dockview.css and should be imported at some point in your application

Example import with .css file
@import './node_modules/dockview/dist/styles/dockview.css';

Provided themes

dockview comes with a number of themes which are all CSS classes and can be found here. To use a dockview theme the CSS must encapsulate the component. The current list of themes is:

  • dockview-theme-dark
  • dockview-theme-light
  • dockview-theme-vs
  • dockview-theme-abyss
  • dockview-theme-dracula
  • dockview-theme-replit

Customizing Theme

dockview supports theming through the use of css properties. You can view the built-in themes at dockview/src/theme.scss and are free to build your own themes based on these css properties.

CSS PropertyDescription

You can further customise the theme through adjusting class properties but this is up you. For example if you wanted to add a bottom border to the tab container for an active group in the DockviewReact component you could write:

Additional CSS to show a bottom border on active groups
.groupview {
&.active-group {
> .tabs-and-actions-container {
border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
&.inactive-group {
> .tabs-and-actions-container {
border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);