Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Tree View Plugin API

Headless, unstyled tree view plugin built with JavaScript and TypeScript, including installation, usage, options, methods, events, and selectors.

JavaScript Typescript

Installation

To get started, install Tree View plugin via npm, else you can skip this step if you are already using Preline UI as a package.

  1. Install the plugin

    Install @preline/tree-view via npm

    Terminal 
                              
                            npm i @preline/tree-view @preline/accordion

  2. Add the plugin CSS

    Use @source to register the plugin's JavaScript path for Tailwind CSS scanning, then @import the plugin's CSS files into your Tailwind CSS file.

    main.css 
                              
                            @import "tailwindcss";
                            
                            /* @preline/accordion */
                            /* [!code highlight:2] */
                            @source "../node_modules/@preline/accordion/*.js";
                            @import "./node_modules/@preline/accordion/variants.css";

                            /* @preline/tree-view */
                            /* [!code highlight:2] */
                            @source "../node_modules/@preline/tree-view/*.js";
                            @import "./node_modules/@preline/tree-view/variants.css";
                            
                            /* [!code highlight:1] */
                            @import "./node_modules/@preline/tree-view/theme.css";

  3. Add the plugin JavaScript

    Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

    HTML

    Additional Initialization Options

    Use the non-auto entry if you need manual initialization. Tree View depends on Accordion for expand/collapse behavior — call HSAccordion.autoInit() first so all accordion nodes inside the tree are initialized automatically, then initialize the specific Tree View element manually.

    HTML (non-auto)

    Via bundler

    When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module. Initialize HSAccordion first — it powers the expand/collapse nodes inside the tree.

    JavaScript (auto) 
                              
                            import "@preline/accordion";
                            import "@preline/tree-view";
    JavaScript (non-auto) 
                              
                            import HSAccordion from "@preline/accordion/non-auto";
                            import HSTreeView from "@preline/tree-view/non-auto";
                            
                            HSAccordion.autoInit();
                            HSTreeView.autoInit();
                            
                            // Or initialize a specific element manually
                            const el = document.querySelector("#tree-view");
                            if (el) new HSTreeView(el);

Example

Here is a basic example of a Tree View.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

HTML

JavaScript behavior

Data Options

Name Description Options Default value
data-hs-tree-view Activate a Tree View by specifying on an element. Should be added to the wrapper. — —
:controlBy Tells the plugin which mode is active and processes events accordingly for that mode. "checkbox" | "button" button
:autoSelectChildren This option is available if the parameter controlBy is set to checkbox and if the item is a directory (isDir: true). Then if the item is selected, all nested items receive the value of the parent. boolean false
:isIndeterminate Adds indeterminate visual style, if parameter controlBy is set to checkbox. boolean true
data-hs-tree-view-item Determines which element inside the initialized component is the item. Should be added to the item itself. — —
:id Optional. Desired identifier. string —
:value The value that will then be passed to the resulting array. string —
:isDir Determines that the element is a directory and processes it accordingly. boolean false

Tailwind Modifiers

Name Description
hs-tree-view-selected:* A modifier that allows you to set Tailwind classes when item has been selected.
hs-tree-view-disabled:* A modifier that allows you to set Tailwind classes when item has "disabled" class.

Methods

The HSTreeView object is contained within the global window object

Method Description
Public methods
update() Updates the element. This is suitable, for example, in case of changing the order of elements.
getSelectedItems() Returns a list of selected items.
destroy() Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
HSTreeView.getInstance(target, isInstance) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
  • isInstance boolean. Returns the instance instead of Node if true

Update element.

JavaScript 
                      
                        const treeView = HSTreeView.getInstance('#tree-view', true);
                        const updateBtn = document.querySelector('#update-btn');

                        updateBtn.addEventListener('click', () => {
                          treeView.element.update();
                        });

Get selected items.

JavaScript 
                      
                        const treeView = HSTreeView.getInstance('#tree-view', true);
                        const getItemsBtn = document.querySelector('#get-items-btn');

                        getItemsBtn.addEventListener('click', () => {
                          console.log(treeView.element.getSelectedItems());
                        });

Events

Method Description Returning value
on:click Called when any item was selected. 
{
  id: string;
  value: string;
  isDir: boolean;
  path: string;
  isSelected: boolean;
}

When select changes event example.

JavaScript 
                      
                        const el = HSTreeView.getInstance('#tree-view', true);

                        el.element.on('click', (data) => {...});

Ready to use Components

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Tree View

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Tree View examples

Tree View

© 2026 Preline Labs.