shadcn.io is not affiliated with official shadcn/ui
No Categories Empty State Block for React
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 React with Base 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.
Related
- Pro
A tagging tool with no tags: a Tags popover drawn open over a list of items, a string with three tags hung on it, a name field and four patterns (solid, dashed, dotted, hatched) that tell tags apart without colour, and one Create tag button.
- Pro
A custom fields page with none yet: a row of five field types, a label input with a live drawing of the control, and a sketch of the contact form where each added field fills the next dashed slot.
- Pro
No Departments Empty State
Team and accessAn org-chart tool's empty departments page: a dashed chart of a root and two children, an Add department button that turns the root into a name field, sub-departments joined by CSS lines, and Remove for a box with no children.
- Pro
No Folders Empty State
Files and docsA file organiser's empty folder view: a breadcrumb with an Up button, a shelf of four slots that fill with folders you name, each one opening onto its own empty folder, and a drawn stack of three folders with the top one dashed.
- Pro
Connect Tools Empty State
Apps and integrationsA full-height first-run screen for an integration hub: six tool cards with checkboxes at the end, and at the start a drawn hub whose spokes turn from dashed to solid, and whose sockets take a lettermark, as each tool is ticked.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.