shadcn.io is not affiliated with official shadcn/ui
First Project Empty State Block for React
A 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.
Installation
Overview
Give a new account a first step instead of a blank screen, with this first project empty state for React with Base UI. It's the first-run page of Hazelmark, a weekly planner: 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. At the start of the band sit the heading, one sentence, a Field with an Input for the project's name and the Shine Button that creates it, the only colored control. At the end a greyscale drawing of a drafting table stands where a product's mark would: a T-square, a pencil on the tray and a blank sheet drawn only in dashes, because nothing is on the table yet. Creating the project turns the sheet solid, rules it, tapes it down and pins the name in its title block, while the form gives way to the result in the same space with a Start over that puts everything back. It's built from Field, Input, Button, Shine Button and Guides, with CSS transitions only. For a first-run screen in any app that starts from a project, a workspace or a board.
FAQ
What happens when I press Create project, and what stays in the page?
Nothing leaves the page. The name is kept in the page's state, the sheet in the drawing turns solid with the name in its title block, and a polite status message says "Created … in this demo. Nothing was saved." Start over blanks the field and the sheet again. To wire it for real, send the trimmed name to your API where the code says so, keep the form until it answers, then open the new project; show a failure under the field.
Why does Create project look off when the name is empty?
A button that is simply disabled can't explain itself, so this one stays in the tab order and keeps its reason: it points at the line under the field, which reads "Type a name to create the project." Pressing it, or Enter in the field, with no name writes a problem under the field and moves focus there instead of creating anything. Typing a name turns the button on and swaps the line for the character limit.
How does the drawing react without moving anything?
It is one inline SVG that never swaps: the dashed sheet fades out while a solid sheet, the ruled lines and two pieces of tape fade in, all with opacity transitions that are switched off under reduced motion. The name is not drawn in the SVG but laid over it as real text in a title block, so it follows your font and never blurs. The drawing is decorative and hidden from screen readers; the heading and the status message say what happened.
How does it look on a phone?
The drawing moves above the heading and shrinks to 140 px tall, the field and the button are full width, and the button stays on the first screen. From the large breakpoint the drawing sits at the end of the band beside the form, divided by a rule that meets the band's rules at plus marks.
Is it usable with a keyboard and a screen reader?
Tab runs through the name field, Create project and the sample project link; Enter in the field creates. The form is named by the heading and the field's label, the hint and any problem are tied to it, and after a create focus moves to the result's heading while the status message announces it. Start over returns focus to the field.
Does the page change height when the project is created?
No. The form and the result share one grid cell, so the cell is as tall as the taller of the two, and the sample project link keeps its space (hidden from every user) while the result shows. 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
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
Welcome Workspace Empty State
First runA 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.
- 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
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.