shadcn.io is not affiliated with official shadcn/ui
No Departments Empty State Block for Solid
An 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.
Installation
Overview
Let people grow the chart instead of describing it, with this no departments empty state for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the departments page of Orgvine, an org-chart tool, in three bands. The first is a toolbar with the Shine Button, the only colored control, which says Add department until there is one and then Add sub-department, with Remove and Start over beside it. The second is the chart: before the first department it is a dashed picture of a root box and two children; Add department turns the root into an Input (Enter keeps the name, Escape drops it), and every box after that is a real button you can select, joined to its children by CSS borders. The third is the heading and a polite status line. Departments go three levels deep, three to a department and seven in all. The frame is ruled by Guides, the chart keeps one height and scrolls sideways inside itself on a phone, and the transitions are CSS only. For the org structure page of any HR, directory or admin tool.
FAQ
What stays in the page, and how do I make it real?
The departments live in the page's state: reload and the chart is empty, and Start over empties it without a reload. Nothing is saved or sent. To wire it for real, create the department with your API where the code says so, add its box from the response with the server's id, and load the existing tree into the same list, where each department names its parent.
How does adding a department work?
Add department turns the dashed root into a name field with focus in it. Enter keeps the name, Escape drops it and puts focus back on the button, and pressing the button again while the field is open keeps the name too. An empty name, or a name already used next to it, is refused with a line that says so. After the first department, the button adds under whichever box is selected; selecting a box says so in the status line.
Why three levels, three to a box and seven in all?
They are the demo's limits, so the chart can keep its frame and its connectors stay readable. Past a limit the button stays in the tab order and says which limit it hit, instead of doing nothing. They are the constants at the top of the file; with your own data let the frame grow and scroll.
What does Remove do?
It deletes the selected box when it has no children, selects the box above it and moves focus there, or back to the button when the root goes. A box with children refuses, with a line telling you to remove its sub-departments first, so nobody is orphaned.
Is the chart usable with a keyboard and a screen reader?
The chart is nested lists, so a screen reader hears how many departments sit at each level, and every box is a button named with its name, how many sub-departments it has and, for the picked one, "selected". Tab moves through the boxes in reading order. The lines are decoration, the empty chart is hidden from assistive technology, and one polite status line says each change.
How does it look on a phone?
The buttons wrap onto two rows, with Add department first, and the chart scrolls sideways inside its own frame when it is wider than the screen, so the page never scrolls sideways, even at 320 px. The chart is drawn left to right in every language, and the names inside the boxes follow the page's direction.