Treeview

Hierarchical tree components for displaying nested data structures, file explorers, and organizational content.

Basic Treeview

Hierarchical tree structure with expand/collapse functionality.

Treeview with Checkboxes

Tree nodes with checkbox selection. Parent checkboxes reflect child state (checked, unchecked, indeterminate).

Treeview with Icons

Different node types display distinct colored icons: folder (yellow), file (blue), image (green), music (purple), video (red), code (orange).

Selectable Treeview

Click any node to select it with an accent highlight. Single-select mode with selected node displayed below.

Draggable Treeview

Drag handle (grip dots) appears on hover for each node. Visual demo of reorderable tree nodes.

File Explorer

Realistic file explorer with folder hierarchy, file type icons, and file size indicators.

Connected Lines Treeview

Traditional tree diagram with visible connecting lines between parent and child nodes using CSS borders.

Search Treeview

Filter and highlight matching nodes with a search input. Non-matching nodes are dimmed, and parent nodes auto-expand when they contain matches.