Empty state

The designed screen for when a list has nothing in it: says why it's blank and gives you the one action that fills it.

what you see before there's any datathe zero-items screenno results screenblank slatenothing here yet pageempty list messagezero data viewfirst run screen

See it

Live demo coming soon

What it is

An empty state is the screen you design for zero items: no projects yet, no search results, an inbox that is finally clear. Three different screens hide under one name and each needs different copy: first run (you have not made anything yet), user cleared (you finished everything), and no results (your search or filter matched nothing).

The first-run one is the most valuable screen in a product, because it is where somebody decides whether to start. Give it a short heading in plain words, one sentence saying why the space is blank, and exactly one obvious button that fills it. A no-results state is different work: echo back what was searched and offer a way out, like clearing filters or a spelling suggestion.

Gotcha: the blank screen that is really a loading state or a failure. If data is still in flight, show a skeleton. If the request errored, say so and offer a retry. Telling somebody 'No projects yet' when the API just timed out sends them off to recreate work they already have.

Ask AI for it

Design a first-run empty state for a projects list: centered in the content area, max width 420px, with a simple line illustration or a muted icon inside a soft circle, a short heading ('No projects yet'), one supporting sentence explaining what a project is for, a primary 'Create project' button, and a quiet secondary text link to the docs. Keep it calm and low contrast so it never reads as an error. Then give me two more variants: a no-results version that echoes the search query and offers 'Clear filters', and a cleared version for when everything is done.

You might have meant

skeleton screencalloutcoach markdropzone