shadcn.io is not affiliated with official shadcn/ui
Category Setup Onboarding Block for Radix UI
A setup panel with a tree of categories beside a drawn sidebar that mirrors it live, with rename, add, move up, move down, delete and undo for the picked category.
Installation
Overview
Let a new user shape the categories their content will live in and see the result as they go, with this categories step for React with Radix UI. It is a setup panel of Shelfmoor, a knowledge-base tool, ruled by Guides in bands. The first band holds the catalog Tree View, three categories of two topics each in a frame of fixed height, beside “How it appears”: a drawn sidebar that mirrors the tree as it is edited, names and all. Pick a category and the second band edits it: a field renames it, another adds a topic under it (with nothing picked it adds a top-level category), Add top level makes a new top-level category ready to be renamed, and Move up, Move down and Delete work on the picked one with the topics under it. Every change can be undone, one step at a time. Save categories is the one Shine Button, quiet until something changed, with Discard beside it.
FAQ
How is the tree kept, and why is there no recursion?
As one flat list of categories, each with an id, a name and the parent it sits under (an empty string for the top level). The tree's nodes, the drawn sidebar and every count are worked out from that list by small helpers for each level, so there are no recursive components or types, which is what keeps the block portable to Vue, Svelte and Solid. The tree goes three levels deep (DEPTH); a fourth is refused in words. Reordering swaps a category with its next or previous sibling in the list and its topics follow, because they refer to it by parent.
What does it refuse?
An empty name, one over 32 characters, a name that already exists under the same parent (ignoring capitals), a fourth level, a 25th category, moving the first category up or the last one down, and renaming to the same name. Each says why in the line above the edit buttons, which is always reserved so nothing moves, and focus goes to the control that needs fixing.
How does Undo work?
Each add, rename, move and delete keeps the list and the pick as they were. Undo, which is always on the screen and quiet while there is nothing to undo, puts back the last one and the status says what was undone (“Undid deleting.”), so a deleted category with its topics can be recovered one step at a time. Save categories and Discard work on the whole list, not on single steps.
How does it work with the keyboard?
The tree is one tab stop: the arrow keys walk it and open and close its branches, Home and End jump, and the picked category follows. Rename, Add, the three actions and Undo follow in the tab order; Enter in the name field renames and Enter in the add field adds, without sending the whole form.
What stays local in the demo, and how do I wire it?
Everything: the categories live in the tab and Save categories only says they were kept in this demo. In your app save the list on your server where submit says so, keep the same parent links, and check the rules again on the server (the screen only checks what it shows).