← ui-lab

Tree Reorder

A tree whose nodes can be re-ordered and re-parented from the keyboard — the outline-move interaction. Arrow keys navigate, expand, and collapse as usual; with Altheld, ArrowUp/ArrowDown reorder a node among its siblings, ArrowRight indents it under its preceding sibling, and ArrowLeft outdents it to its parent's level.

Preview

  • Documents
    • Report.pdf
    • Photos
      • Beach.jpg
  • Music
    • Song.mp3

Installation

npx shadcn@latest add https://ui.publictheta.com/r/tree-reorder.json

Conformance

This component conforms to the @publictheta/ui-spec tree-reorder specification. Run the suite against any implementation with pnpm conformance.