Skip to main content

Styling Customizability

You can change how the rendered tree looks like by providing custom CSS rules or changing CSS variables to customize its looks.


The default styles are declared here.

You can further customize how the tree looks like by providing custom render hooks to provide logic for rendering the individual DOM nodes. This customizability is further documented in the Render Hook Guide.

CSS Variables

The following CSS variables are used by React Complex Tree and can be customized by replacing individual values:

:root {
--rct-color-tree-bg: #f6f8fa;
--rct-color-tree-focus-outline: #0366d6;

--rct-color-focustree-item-selected-bg: #e8eaed;
--rct-color-focustree-item-selected-text: inherit;
--rct-color-focustree-item-focused-border: #0366d6;
--rct-color-focustree-item-draggingover-bg: #ebf0f4;
--rct-color-focustree-item-draggingover-color: inherit;

--rct-color-nonfocustree-item-selected-bg: #e8eaed;
--rct-color-nonfocustree-item-selected-text: inherit;
--rct-color-nonfocustree-item-focused-border: #dbdbdb;

--rct-color-search-highlight-bg: #a2aed2;
--rct-color-drag-between-line-bg: #0366d6;
--rct-color-arrow: #373a3f;

--rct-item-height: 22px;

--rct-color-renaming-input-submitbutton-bg: inherit;
--rct-color-renaming-input-submitbutton-bg-hover: #0366d6;
--rct-color-renaming-input-submitbutton-bg-active: #095fc1;

--rct-color-renaming-input-submitbutton-text: inherit;
--rct-color-renaming-input-submitbutton-text-hover: #ffffff;
--rct-color-renaming-input-submitbutton-text-active: #ffffff;

If you are using the modern styles (i.e. importing style-modern.css instead of style.css), you have additional possibilities:

:root {
--rct-color-tree-bg: transparent;
--rct-item-height: 28px;
--rct-color-search-highlight-bg: #acccf1;

--rct-color-tree-focus-outline: transparent;
--rct-item-margin: 1px;
--rct-item-padding: 8px;
--rct-radius: 4px;
--rct-bar-offset: 6px;
--rct-bar-width: 4px;
--rct-bar-color: #0366d6;
--rct-focus-outline: #000000;

--rct-color-focustree-item-selected-bg: #f0f2f5;
--rct-color-focustree-item-hover-bg: #f0f2f5;
--rct-color-focustree-item-hover-text: inherit;
--rct-color-focustree-item-active-bg: #e4e6eb;
--rct-color-focustree-item-active-text: #4f4f4f;

--rct-arrow-size: 10px;
--rct-arrow-container-size: 16px;
--rct-arrow-padding: 6px;

--rct-cursor: pointer;

--rct-search-width: 120px;
--rct-search-height: 16px;
--rct-search-padding: 8px;
--rct-search-border: #b4b7bd;
--rct-search-border-bottom: #0366d6;
--rct-search-bg: #f8f9fa;
--rct-search-text: #000000;
--rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);

This may not reflect the current possibilities. Look into the source file for the default styles or the source file for the modern styles to see all available variables.


Live Editor

CSS Class Names


The default render logic is declared here. Look into that file to see which classes are used where exactly.

The following classes are defined by the default renderers and attached to DOM nodes if the respective conditions are met:

Tree Container

  • rct-tree-root
  • rct-tree-root-focus
  • rct-tree-root-renaming
  • rct-tree-root-itemsselected

Tree Items

  • rct-tree-item-search-highlight
  • rct-tree-item-arrow
  • rct-tree-item-arrow-isFolder
  • rct-tree-item-li
  • rct-tree-item-li-isFolder
  • rct-tree-item-li-selected
  • rct-tree-item-li-expanded
  • rct-tree-item-li-focused
  • rct-tree-item-li-dragging-over
  • rct-tree-item-li-search-match
  • rct-tree-item-title-container
  • rct-tree-item-button

Tree Item Renaming Form

  • rct-tree-item-renaming-form
  • rct-tree-item-renaming-input
  • rct-tree-item-renaming-submit-button

Container for Tree Items

  • rct-tree-items-container

Drag-Between Line

  • rct-tree-drag-between-line
  • rct-tree-drag-between-line-top
  • rct-tree-drag-between-line-bottom

Search Input

  • rct-tree-search-input-container
  • rct-tree-search-input

This may not reflect the current possibilities. Look into the JS source file to see all available classes.