Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA tree whose rows reorder and nest by drag and drop, or from the keyboard with Alt and the arrow keys, with spoken feedback.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
Use it for outlines, menus, navigation and folder structures that people edit by hand.
Do not use it for large trees (every row is a drag source) or when order must not change; use tree-view there.
It uses tree-view, which the CLI installs for you.
It needs @dnd-kit/react.
import { SortableTree } from "@/components/ui/sortable-tree"const [nodes, setNodes] = React.useState(initial)
<SortableTree
aria-label="Document outline"
nodes={nodes}
onNodesChange={setNodes}
canDrop={(source, target, position) => target.id !== "locked"}
/>| Prop | Type | Default | Description |
|---|---|---|---|
nodes | TreeNode[] | - | The tree. You own the state. |
onNodesChange | (nodes) => void | - | Called with the new tree after a drop or a keyboard move. |
canDrop | (source, target, position) => boolean | - | Return false to refuse a move. |
hoverOpenDelay | number | 700 | Milliseconds a dragged row waits over a closed branch before it opens. |
... | - | - | All TreeView props except nodes. |
tree-view still work.Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.
The pointer position over a row decides where the row lands: the top quarter places it before, the bottom quarter after and
the middle inside. getDropPosition(rect, y) is exported if you want to draw your own indicator.
The component ships with a Testing Library test (sortable-tree.test.tsx) that covers its keyboard paths, roles and states.