Empty state design examples

What is an empty state in UI design?

An empty state is the screen or panel a user sees when there is nothing to display. It appears in four situations: first use, before any content exists; a search or filter that returns nothing; a list the user has cleared; and an error that stops content from loading. Each needs different copy, because the user's next step is different.

What should an empty state include?

Three things: a plain sentence that says why the space is empty, one primary action that fills it, and a visual only if it helps. "No projects yet. Create your first project" does more than an illustration with no button. For a search with no results, keep the search term visible and suggest a way to widen it.

Do empty states need illustrations?

No. An illustration gives a first-use screen some character, but the sentence and the button do the work. In dense tools such as tables and dashboards, a one-line message inside the component often reads better than a large drawing.

Where do these empty state examples come from?

Most are screens from live products documented by Mobbin, plus explorations and UI kit components published on Layers and UI8. Muzli follows more than 200 design sources and lists up to 60 matching pieces here, favouring recent work.