Empty states

What to show when there's nothing to show — first use, no results, and errors.

An empty screen is a moment of maximum attention with minimum content. Use it to explain what belongs here and offer the next step.

examples/patterns/empty-states.tsx

No projects yet

Create a project to deploy your first site.

No results for “billng”

Check the spelling or clear filters.

Couldn't load deployments

You appear to be offline. We'll retry when you reconnect.

Three kinds of empty

Kind	Cause	Offer
First use	Nothing has been created yet.	Explain the value in one sentence and give the primary action.
No results	A search or filter excluded everything.	Echo the query, suggest a fix, and offer to clear filters.
Error	Content failed to load.	Say what happened in plain words and offer to retry. Keep the page usable.

Use the Empty component, with an icon in EmptyMedia, a title, a one-sentence description and at most two actions.
Match the container. Inside a card or table, use variant="outline" and compact padding; on a full page, center it with generous space.
Don't blame. No results for “billng” is neutral; You made a typo is not.
Keep the frame. Show table headers, filters and navigation around the empty state so people keep their bearings.
Illustrations are optional. An icon is enough; a large illustration on every empty table becomes noise.