Styling

Headless Tree is designed to be as unopinionated as possible when it comes to styling. This means that both rendering and styling is generally up to you. The tree does not come with any default styles, and you can use whatever styling framework you have already set up in your project.

Headless Tree provides several methods on the item instance variable that you can use to derive information about each item and how it should be styled, such as

• isFolder()
• isExpanded()
• isSelected()
• isFocused()
• isDragTarget()
• isDraggingOver()
• isRenaming()
• isLoading()
• isMatchingSearch()

In the following example, and default styles that are typically used in other samples are omitted, and just some basic inline styles are used to demonstrate how HT looks without styling:

If you want to use the default styles that are used in other samples, you can copy their CSS code from here:

• https://github.com/lukasbach/headless-tree/blob/main/packages/sb-react/.storybook/style.css