Styling

Every visual property is a CSS custom property scoped to .tk-tree — override what you need in a plain stylesheet.

No Tailwind config, no CSS-in-JS runtime, no build-time theming step — set these on .tk-tree globally, scope them to one instance with a wrapper class or inline style, or set them per-instance via the style prop directly:

<TreeKit
  data={data}
  style={{ "--tk-accent": "#f43f5e", "--tk-radius": "10px" } as React.CSSProperties}
/>

CSS variable reference

Variable	Default	Controls
--tk-font	system font stack	Font family for the whole tree.
--tk-font-size	13.5px	Base text size.
--tk-row-height	32px	Height of each row. Matches rowHeight when virtualized.
--tk-indent	18px	Horizontal space added per nesting level.
--tk-radius	6px	Corner radius for rows and the connector-line branch.
--tk-gap	6px	Space between chevron / checkbox / icon / label.
--tk-fg	#1e1e24 / #e5e7eb	Primary text color (light / dark).
--tk-fg-muted	#6b7280 / #9ca3af	Secondary text — chevron, icons.
--tk-label-color	var(--tk-fg)	Node label text specifically — override this alone to restyle labels without touching icon/chevron color.
--tk-bg-hover	translucent black/white	Row background on hover.
--tk-bg-selected	translucent accent	Row background for the active/selected row.
--tk-accent	#6366f1 / #818cf8	Checked checkbox fill and highlight accents.
--tk-border	#e5e7eb / #2b2d33	Connector lines, dividers, and the unchecked checkbox border.
--tk-checkbox-size	16px	Width and height of the checkbox.
--tk-checkbox-radius	5px	Corner radius of the checkbox, independent of --tk-radius.
--tk-disabled-opacity	0.45	Opacity applied to disabled rows and checkboxes.
--tk-highlight-bg / --tk-highlight-fg	#fef08a / #1e1e24	Search match <mark> colors.
--tk-focus-ring	2px ring in --tk-accent	box-shadow used for the focus-visible outline.
--tk-transition-fast	120ms ease	Duration for hover/selection/chevron transitions.

Overriding just the label color

Labels read from --tk-label-color specifically (it defaults to --tk-fg, the same color everything else uses) — override it alone to restyle label text without also changing icon or chevron color. Give it different values per theme exactly like any other variable, scoped under your own light/dark selectors:

.tk-tree {
  --tk-label-color: #1e3a8a; /* light mode: navy */
}

.dark .tk-tree {
  --tk-label-color: #bfdbfe; /* dark mode: pale blue */
}

Need per-node control instead of a single site-wide color — e.g. color-coding rows by category? Use renderNode and set the color directly from your own data; see Custom Rendering.

Structural overrides with classNames

When a CSS variable isn't enough — you need to target a specific part with more than color/spacing tweaks — pass classNames to attach your own class to each internal part:

<TreeKit
  data={data}
  classNames={{
    root: "my-tree",
    node: "my-tree-row",
    checkbox: "my-checkbox",
    label: "my-tree-label",
  }}
/>

Need full control over markup?

classNames only adds classes to TreeKit's existing DOM structure. For different markup entirely — reordering elements, adding new ones — use renderNode instead; see Custom Rendering.

Dark mode

The default stylesheet includes a @media (prefers-color-scheme: dark) block out of the box — no configuration needed if your app follows the OS theme. If your app toggles a .dark class manually (as this documentation site does with next-themes), override the same variables under your own dark-mode selector; see Themes & Variants.

← PreviousLarge Trees Next →Themes & Variants