Empty State
The design of a UI space when it contains no content yet — or when a search returns no results.
Plain English
Empty states are often the first thing new users see. They are either a golden opportunity to guide the user toward value, or an invisible dead end that makes the product feel broken. A great empty state explains why the space is empty, shows what it will look like when filled, and provides a clear action to fill it. "No items found" is a bad empty state. An illustration, a brief explanation, and a "Create your first project" button is a great one.
Technical
Empty state components typically contain: (1) An illustration or icon (48–80px, descriptive, not generic), (2) a heading (what is missing), (3) a brief description (why and what it will look like when filled), (4) a primary CTA. Design considerations: vertically and horizontally centred in the container, max-width: 360px for the content block, generous padding, subtle background. For "no search results," also show the search query and suggest alternatives.
Live Demo
Bad — no guidance
No items found.
Good — guided
No projects yet
Create your first project to get started.
Empty states: icon + heading + description + CTA — guide users to fill the space.
Usage
✓ Good usage
An empty projects list showing a folder icon, "No projects yet", "Create a project to get started with your team", and a blue "New project" button.
✗ Bad usage
A completely blank screen when the data list is empty — users think the page failed to load.
Recommended values
- Icon/illustration: 48–64px, descriptive, same colour family as the content
- Heading: concise, states the absence clearly
- Description: max 2 sentences, explains what belongs here
- CTA: primary button to create the first item
- Max-width: ~360px, centred, generous vertical padding
Common mistakes
- Generic icons (a clock, a smile) unrelated to the missing content.
- No CTA — showing the empty state without guiding the user to fix it.
- Missing context for "no search results" — show the search query and suggest next steps.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Design empty states with: a 64px contextual icon, a 1-line heading stating what is absent, a 2-sentence explanation of what belongs here, and a primary CTA to create the first item. Centre the whole block vertically and horizontally in the container. Max content width 360px.