Tree

Design a tree component for navigating nested data in a product UI. Use it for structures like folders, permissions, org charts, or category taxonomies — not a decorative nature theme. The core interaction is expand, collapse, and select. Depth, parent-child relationships, and current focus should be obvious at a glance.

Show how the tree behaves at scale. Include indentation, disclosure controls, icons or badges where useful, and a clear selected state. Add search or filtering for large hierarchies, plus states for loading branches, empty results, and failed fetches. If a node has children, it should be clear before the user opens it.

Design for real use, not just the happy path. Long labels should truncate or wrap cleanly. Keyboard navigation and focus states should work through nested levels. Keep the active branch visible while users move around, and make it easy to understand where they are in the hierarchy and what changed after each action.

Branch out with creativity by utilizing tree textures or natural palettes for your design's background and elements to evoke an organic, cohesive feel.