esc
navigate select
Browse documentation

Layout

rowHeight and indent give you numeric control beyond what a variant preset covers.

PropTypeDefaultDescription
rowHeightnumber32Pixel height of each row. Also the unit used for virtualization's scroll math — required to be accurate when virtualized is true.
indentnumber18Pixels of indentation added per tree level, when not using the connected variant's guide lines.
<TreeKit data={data} rowHeight={28} indent={14} />

Keep rowHeight and --tk-row-height in sync

rowHeight the prop and --tk-row-height the CSS variable both need to agree — the prop drives virtualization math (JS-computed pixel offsets), the CSS variable drives the actual rendered row height. Setting only one will make a virtualized tree's rows visually mismatch their computed scroll position. If you're not using virtualized, setting only the CSS variable is fine.

For everything else — colors, radius, font, transition speed — see Styling. For the five built-in layout presets that combine several of these values at once, see Themes & Variants.