Empty State Shell
A sidebar and header frame with a first run canvas: a centered empty state with icon, heading, primary and secondary actions, and a starter template row.
A sidebar and header frame with a first run canvas: a centered empty state with icon, heading, primary and secondary actions, and a starter template row.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Empty State Shell is the standard sidebar and header frame caught in its first run state. A 64-wide sidebar carries the Acme badge, a search button, five nav links (Projects active), and the Avery Stone account footer. The main canvas drops the usual table for a centered empty state: a dashed icon tile, a No projects yet heading, primary and secondary actions, and a three-card template row beneath so a brand new workspace still offers a next step.
Sidebar nav and the starter templates are two const arrays. The empty state sits inside the same header frame the populated page uses, so the transition to real content changes only the canvas.
Reach for this shell whenever a list, board, or table view can start empty: a fresh workspace, a filtered result with no matches, or a feature the user has not touched yet. Swap the copy and actions to match the surface, and drop the template row when there is no meaningful starting point to offer.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the first project prompt. Other zero-data canvases:
Tip: keep the empty state inside the real header frame as shown; rendering it on a bare page loses the nav context the user needs once data arrives.