shadcn.io is not affiliated with official shadcn/ui
No Categories Empty State Block for Vue
A catalog tool with no categories: one field for a path such as Clothing / Shoes / Boots, a tree of boxes under All categories that grows as you type with dashed boxes for what is new, and one Add category button.
Installation
Overview
Let the first category grow the tree it belongs to, with this no categories empty state for Vue with Ark UI. A header sits over one framed panel for Branchcase, a catalog tool, and the panel has two cells. The first holds one Field with an Input for a path, "Clothing / Shoes / Boots", and a line that says how many levels it reads as. The second draws the category tree as boxes joined by elbows under a root called All categories: as you type, the path grows under it in dashed boxes, one per level, and a level that already exists is solid, so shared parents merge instead of repeating. The Shine Button, the only colored control, adds the category, and so does Enter: the dashed boxes turn solid and the field clears. The frame's corners and band rules come from Guides, and the whole block uses CSS transitions only.
FAQ
What happens when I press Add category, and what stays in the page?
The path is added to the page's state and drawn in the tree, and the status line says how many categories it added under which top level. Nothing is saved: reload and the tree is empty again, and Start over clears it without a reload. To wire it for real, send the levels to your API where the code says so and render the tree it returns.
How do shared parents merge?
Every level is keyed by its path in lowercase, so "Clothing / Shoes" and "clothing / Hats" share one Clothing box, and typing a path that is already in the tree shows its boxes solid. Pressing Add on a path that adds nothing says so ("That category is already there.").
How deep can it go?
Three levels, with a name of 24 characters or fewer on each. A longer path is drawn to its third level and the line under the field says how many levels it reads as; pressing Add refuses it in words. The tree sits in a frame of one height that scrolls inside itself, so a bigger tree never moves the panel.
Is it usable with a keyboard and a screen reader?
The field is the only control besides the buttons; Enter adds. Each box is a list item that reads its level and whether it is not added yet ("Level 2, not added yet: Shoes"), and the scrolling frame takes the keyboard so a long tree can be scrolled. The status line announces every addition.