shadcn.io is not affiliated with official shadcn/ui
Welcome Workspace Empty State Block for React
A full-height welcome page for a fresh workspace: an isometric plan of an empty studio whose four rooms are a choice group, one sentence about the room you picked, and one Create your first project link.
Installation
Overview
Greet a new workspace with a picture of what it will become, with this welcome empty state for React with Base UI. It's the welcome page of Juniperdesk, a team workspace: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. In the band a greyscale isometric plan of an empty studio stands where a product's mark would, with four rooms (Projects, Docs, Team and Tools) on a ground plate. The rooms' names are a Toggle Group laid over the plan: pressing one lifts that room, draws it in a full line and turns its dashed doorway solid while the others stay quiet, and one sentence under the plan says what lives there. The heading, a sentence and the Shine Button, the only colored control, follow as a link to wherever your first project starts. The frame is ruled by Guides, and everything moves with CSS transitions only. For the first screen of any workspace, team space or app that is organised in a few areas.
FAQ
What stays in the page, and what does the link do?
Only the choice of room, which is kept in the page's state and spoken through a polite status line. Nothing is saved or sent. The Create your first project button is a link: point its href at the page, dialog route or setup flow where your first project starts. Because it is a link, a visitor can also open it in a new tab.
How do the rooms work, and can I change them?
The rooms are the ROOMS list: an id, a name, the sentence that says what lives there and the percentage position of its label on the plan. The plan itself is one inline SVG in which each room is the same floor and two low walls drawn around its own centre and placed with a translate, so renaming a room needs only the list, while adding a fifth means placing another floor on the plate. The group always has one room chosen: pressing the chosen one again does nothing.
How does the drawing react without moving anything else?
The picked room moves up by a few units and its lines go from quiet to full, and its doorway fades from a dashed line to a solid one. Those are CSS transitions on the same SVG, switched off under reduced motion, and the drawing is hidden from screen readers: the choice group, the status sentence and the heading carry the meaning. The room names are real buttons laid over the SVG, not SVG text, so they follow your font and scale.
Is it usable with a keyboard and a screen reader?
Tab reaches the group of rooms, then the link. Inside the group the arrow keys move between rooms in the order Projects, Docs, Team, Tools, and Space or Enter picks one. The group is named Rooms, the chosen room is announced as pressed or checked, and each pick updates a polite status line with the sentence for that room.
How does it look on a phone?
The plan shrinks to 140 px tall and stays above the heading with the room names on it, so the heading and the link both sit on the first screen. From the small breakpoint the plan grows to 200 px tall.
Does the page change height when I pick a room?
No. The sentence under the plan reserves its lines, so rooms with longer or shorter sentences never move the heading or the link. The page is at least a screen tall (min-h-svh, which doesn't jump when a phone's toolbars hide) and keeps the content a little above the middle.
Related
- 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.
- Pro
Getting Started Empty State
First runA getting-started card for an empty dashboard: four setup steps as real checkboxes, a headline that counts down with a progress bar, and a drawn trail up a hill with a flag that stands at the done count.
- 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 Projects Empty State
Projects and tasksA projects table with nothing in it yet: a dashed, editable first row where you type a name and press Enter, three drawn ghost rows fading into the card, and a message band with one Create project button.
- Pro
Centered Sign In Login
Centered formA full-height sign-in page for a team chat app: the product's mark, Google and GitHub rows with lettermark tiles, an or rule, email and password checked on submit, and one Sign in button with a simulated wait and its result.
- 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.