Tailwind CSS Tree View
Browse free customizable Tailwind CSS Tree View. Choose from basic, nested, bordered, arrowed, and other styles to collapse and expand UI elements.
Default tree view
Use a default tree view to expand and collapse nested folders or items.
Close sibling branches
Remove data-hs-accordion-always-open to keep only one branch open within the same group.
Custom tree styling
Customize the tree with your own icons, spacing, and visual treatments.
Multi-select tree
Hold shift, ctrl, or cmd to select multiple folders or files in the same tree.
Draggable tree
Requires Additional Installation
Also note that some of the demos below have the ability to Drag n' Drop items, this uses the external library Sortable.js, make sure it's also connected on the page.
Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash
Drag and drop tree items to reorder them within the same hierarchy.
Draggable with one-level auto-collapse
Use Sortable.js to drag and drop items while auto-collapsing one branch level.
Tree with checkboxes
Add checkboxes when users need to select folders and files directly from the tree.
Destroy and reinitialize
Use the destroy method to remove a tree view instance and initialize it again when needed.