shadcn.io is not affiliated with official shadcn/ui
Category Tree CRUD Block for Solid
A shop's category tree on three levels in a scrolling frame, where a picked category can be renamed, reordered, moved under another one with named refusals, extended, and deleted after a cascade that shows what goes with it.
Installation
Overview
Grow and prune a catalogue where every change shows its reach, with this category tree for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the Tree View of Shelfwick, a homeware shop: ten categories on three levels with the number of products in each, in a frame that scrolls inside itself, and Uncategorised built in at the end. Picking a category opens its cell beside the tree: an Editable name, its level, what is inside it and its products, Up and Down among its siblings, a Native Select to move it under another category, an Input to add a subcategory or a top-level one, and Delete. A move into the category's own subtree, onto its own level, or down to a fourth level is refused by name in a reserved line. Delete opens an Alert Dialog that spells out the cascade ("Also removes 4 subcategories. 22 products move to Uncategorised."), and the foot then says what went beside an Undo that restores the whole subtree and the products' categories. Deleting everything shows an Empty state without the frame changing height. Add is the only Shine Button, and the bands are ruled by Guides. For product catalogues, help-centre sections, document folders and any hierarchy people edit.
FAQ
How do I fill it with my own categories?
Edit CATS. Each has an id, a name, a parent (empty for the top level) and a count of products filed directly in it, and sibling order is the order of the list. The tree, the levels, the counts in each row, the cascade sentence and the category count are all derived from that one list, and new categories take their id from a counter held in state.
Which moves are refused, and how do I move with the keyboard?
Every move has a keyboard route: Up and Down reorder among siblings, and the Move under select plus its Move button re-parent. A category cannot move into itself or into anything inside it, cannot sit below level three, cannot move to where it already is, and cannot take the name of a sibling at the new place. Each refusal names the categories involved in the line under the select, which is always reserved, and focus returns to the select.
What does Delete take with it, and what does Undo bring back?
The category, every subcategory under it, and their place in the tree. The products filed in any of them move to Uncategorised, and the dialog says how many before you confirm. Undo restores the catalogue exactly as it was before the delete, including each product count, and selects the restored category. Any other change replaces the Undo, so it never reaches further back than what you see.
How does renaming work?
The name is an Editable: click it or press the pencil, Enter or the check saves, Escape or the cross puts the old name back. An empty name, one over 28 characters, or one a sibling already uses is refused with its reason under the field, and the save button stays off until the name is valid.
What stays local, and how do I wire a real save?
The categories live in React state in this tab and a reload brings the original ten back; nothing is sent. In your app call your API in rename, addUnder, shift, moveUnder and remove, take the new tree from the response, and show a server refusal in the same reserved lines. Keep the cascade in the dialog as the server's own count, so the sentence never promises more than will happen.
How does it look on a phone?
The tree comes first in a frame of its own height, and the category's cell stacks under it with the same controls: the Up and Down pair, the move row with its select, the add form and Delete. Tree rows are 32 px tall with the product count at the end, and the page stays within a few screens.