I'll help you create a configurable tree component that's not collapsible. Let me first check the current codebase structure to understand what we're working with.
I can see this is a clean Next.js project with shadcn/ui components. Now I'll create a configurable tree component that meets your requirements. Let me build the tree component and a demo page to showcase it.
I've created a fully configurable tree component that meets all your requirements! The component features:
Key Features:
height propindentation proponNodeClick callback for node interactionsConfiguration Options:
The tree component is built with TypeScript for type safety and uses semantic design tokens for consistent theming across light and dark modes.
Now I'll add separators between the nodes. I'll add a subtle border between each node to create visual separation.
I've added subtle separators between each tree node using a bottom border with reduced opacity (border-b border-border/30). The separators provide clear visual distinction between nodes while maintaining a clean, professional appearance that works well in both light and dark modes.