Empty state
Also called blank state or zero state
What a screen shows when there is nothing in it yet: a short message, often a simple illustration, and one clear action to add the first item.
type Props = { query: string; onCreate: () => void; onClearSearch: () => void };
// Two kinds: nothing created yet (invite action) and no search results (offer a way out).
export function ProjectsEmptyState({ query, onCreate, onClearSearch }: Props) {
if (query) {
return (
<div className='flex flex-col items-center py-16 text-center'>
<h2 className='font-semibold'>No projects match “{query}”</h2>
<p className='mt-1 text-sm text-muted-foreground'>
Check the spelling or try a shorter search.
</p>
<button
type='button'
onClick={onClearSearch}
className='mt-6 rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted'
>
Clear search
</button>
</div>
);
}
return (
<div className='flex flex-col items-center py-16 text-center'>
<svg
viewBox='0 0 48 48'
fill='none'
stroke='currentColor'
strokeWidth={1.5}
aria-hidden='true'
className='size-12 text-muted-foreground/60'
>
<path d='M6 14a4 4 0 0 1 4-4h9l4 5h15a4 4 0 0 1 4 4v15a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V14Z' />
<path d='M24 22v8M20 26h8' />
</svg>
<h2 className='mt-4 font-semibold'>No projects yet</h2>
<p className='mt-1 text-sm text-muted-foreground'>
Projects you create will show up here.
</p>
<button
type='button'
onClick={onCreate}
className='mt-6 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90'
>
New project
</button>
</div>
);
}Design the empty state for the projects page: when the user has no projects, show a simple outlined folder illustration, the heading "No projects yet", the line "Projects you create will show up here.", and a primary "New project" button. When a search matches nothing, show "No projects match “query”" with a Clear search button instead. When the first project is created, fade it into the list over 250ms.
Paste into Layerwise or any AI coding tool.
What is Empty state?
An empty state fills the space where a list, table, or dashboard would be when there is no content. A good one says what will appear here and what to do next, with a single primary button such as “New project”.
Plan for three kinds. First use, when nothing has been created yet, should invite action. No results, when a search or filter matches nothing, should offer to clear the search. Cleared, such as an inbox with every message handled, can simply say so and celebrate a little.
Keep it short: one heading, one sentence, one button. A light illustration or icon helps, as long as it keeps the button easy to see. When someone creates the first item, animate it into the list so they see where their work went.
Often confused with
- Skeleton screen
- A skeleton screen holds the place of content that is still loading. An empty state appears after loading finishes and there is truly nothing to show.
Related terms
All termsSkeleton screen
A loading placeholder made of gray blocks shaped like the content on its way, often with a soft shimmer, that the real content replaces.
Loading state
The view a screen shows while its data is on the way, designed together with the outcomes that follow: loaded, empty, or error.
Button variants
A set of button styles, such as primary, secondary, outline, ghost, destructive, and link, that shows which action on a screen matters most.
Card
A bordered, rounded container that groups one item’s image, title, details, and actions so it can sit in a list or grid with others.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.