shadcn.io is not affiliated with official shadcn/ui
No Departments Empty State Block for React
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 React with Base 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.
Related
- Pro
No Roles Empty State
Team and accessAn access-management tool's first-role page: a name field, five permission switches, a sentence that rewrites itself, and a key ring whose next free tag is dashed and shows the role you are building.
- Pro
Invite Team Empty State
First runA full-height invite page for a team chat app: a drawn round table with five chairs that fill as email chips are added, a role select with a sentence per role, and one button that counts the invites and lists them.
- Pro
No Team Members Empty State
Team and accessA team directory's empty state as a bulk paste: a box for one person per line, a table that previews every line it reads and flags the ones it cannot, and an isometric office floor where a desk fills for each person.
- Pro
Organization Settings Account
OrganizationsWhat it means that an employer manages an account, written for the person it belongs to: six things admins can or cannot do, the facts, and a way to leave that asks for the export first and the company's domain.
- Pro
No Audit Trail Empty State
Team and accessA compliance tool's empty ledger: retention policy radio cards beside a vault door whose dial turns to the choice, and an empty table of Time, Actor, Action and Resource whose first row is written when the policy is saved.
- Pro
No Contacts Empty State
Team and accessA contacts book's empty state with two tabs: Add one, a name, email and company form, and Import CSV, a drop zone that reads the file's header in your browser; one button for the active tab and an address-card tray whose dashed place turns solid.