Treeview with 8 visual variants, tri-state checkboxes, inline editing + full CRUD, sortable-grade drag, lazy loading, filtering, colored tiles and keyboard nav.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-tree/latest/gs-tree.min.css"> <script src="https://cdn.get-set.it/gs-tree/latest/gs-tree.min.js"></script>
import Tree from '@get-set/gs-tree'; export default function App() { return ( <Tree> <div className="content">Your Tree content</div> </Tree> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| nodes | GSTreeNode[] | none | The node tree. |
| expandedKeys | GSTreeKey[] | none | Controlled expanded keys. |
| defaultExpanded | GSTreeKey[] | none | Uncontrolled initial expanded keys. |
| defaultExpandAll | boolean | false | Expand every parent on mount. |
| accordion | boolean | false | Only one branch open at a time. Default false. |
| checkable | boolean | false | Show checkboxes. Default false. |
| checkedKeys | GSTreeKey[] | none | Controlled checked keys. |
| defaultChecked | GSTreeKey[] | none | Uncontrolled initial checked keys. |
| checkStrictly | boolean | false | Parent/child checkboxes are independent (no cascade). Default false. |
| selectable | GSTreeSelectable | 'single' | Selection mode. false | 'single' (default) | 'multiple'. |
| selectedKeys | GSTreeKey[] | none | Controlled selected keys. |
| defaultSelected | GSTreeKey[] | none | Uncontrolled initial selected keys. |
| draggable | boolean | false | Enable node drag-reorder. Default false. |
| dragHandle | GSTreeDragHandle | false | Drag handle: `false` = whole-row drag (default), or a grip style. |
| cancel | string | none | CSS selector; a pointer-down on a matching element (or its descendants) in a node does NOT start a drag. Use for custom interactive content inside node labels. The built-in twisty/checkbox/row-actions/rename-input are already excluded. Works for whole-row and dragHandle modes, mouse and touch. Example: `'button, input, a, [data-no-drag]'`. |
| dragGhost | boolean | true | Show a floating clone of the row that follows the cursor. Default true. |
| lift | boolean | true | Lift the grabbed row (shadow + slight scale/tilt). Default true. |
| dropIndicator | GSTreeDropIndicator | 'pill' | Drop-position indicator style. Default 'pill'. |
| dropZoneHighlight | boolean | true | Highlight the tree while a drag is in progress. Default true. |
| autoScroll | boolean | true | Auto-scroll the tree when the cursor nears its top/bottom edge. Default true. |
| dragClass | string | none | Extra class on the grabbed row (and its ghost) while dragging. |
| ghostClass | string | none | Extra class on the ghost / drop indicator. |
| sortAnimation | number | 200 | Drop-settle (FLIP) reflow duration in ms. Default 200. |
| sortEasing | string | none | CSS easing for the drop-settle reflow. |
| editable | boolean | none | Inline-rename a node on double-click / F2. Default false. |
| nodeActions | boolean | GSTreeAction[] | none | Hover row-action buttons. `true` shows the built-ins add + rename + delete; an array picks/orders built-ins and adds custom buttons. Default false. |
| addNodeLabel | string | none | Label given to a node created by the built-in "add" action. |
| confirmDelete | boolean | none | Confirm before the built-in "delete" removes a node. Default false. |
| filter | string | none | Filter string — non-matching nodes are hidden, ancestors kept + expanded. |
| animation | boolean | true | Expand/collapse height animation. `false` disables it. Default true. |
| animationDuration | number | 200 | Animation duration in ms. Default 200. |
| animationEasing | string | 'cubic-bezier(0.16, 1, 0.3, 1)' | CSS easing for the expand/collapse animation. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor prefers-reduced-motion. 'auto' | true | false. Default 'auto'. |
| variant | GSTreeVariant | 'default' | Visual variant (row/container skin). Default 'default'. |
| twisty | GSTreeTwisty | 'chevron' | Twisty (expander) glyph style. Default 'chevron'. |
| defaultIcons | GSTreeDefaultIcons | false | Built-in icons for nodes without an `icon`. Default false. |
| iconTiles | boolean | false | Wrap each icon in a rounded, tinted tile (uses the node's `color`, else the accent). The Notion/macOS/Linear look. Default false. |
| childAnimation | GSTreeChildAnimation | 'fade' | Staggered entrance animation for children on expand. Default 'fade'. |
| showCount | boolean | false | Show a child-count badge on parents (static children only). Default false. |
| emptyText | string | none | Message shown when no nodes are visible (empty data or filter miss). |
| theme | GSTreeTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default 'auto'. |
| accentColor | string | none | Accent color (CSS var --gstree-accent) for selection / focus. |
| rtl | boolean | false | Right-to-left layout. Default false. |
| size | GSTreeSize | 'md' | Size preset. Default 'md'. |
| indent | number | 20 | Indent per depth level (px). Default 20. |
| showLines | boolean | false | Draw connector/guide lines. Default false. |
| showIcons | boolean | true | Show a leading icon per node. Default true. |
| className | string | none | Extra class name applied to the tree root. |
Rail, pills, cards, glass, minimal and more.
Parent/child cascade with indeterminate.
Add, rename, delete and duplicate nodes.
Sortable-grade drag with a lifted ghost.