Status & loading

Empty State

Q: How do people describe a Empty State in plain words?

what you see when there's nothing in the list yet the 'no results' screen after a search that illustration and button when my inbox is empty

Q: How do I implement a Empty State?

Design an empty state for a zero-item project list: short headline, one sentence of guidance, and a single primary 'New project' button; if filters are active, show 'Clear filters' instead.

A deliberate screen when a list or view has no items—guidance, not a blank void.

Also known as blank state · zero data · no results

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Empty State".

Design an empty state for a zero-item project list: short headline, one sentence of guidance, and a single primary 'New project' button; if filters are active, show 'Clear filters' instead.

Anatomy:
- illustration / icon: Light glyph or art; avoid guilt-tripping empty inboxes.
- message: Say what's missing and why it matters in plain language.
- action: One clear next step: Create, Import, Clear filters…

Preferred API / pattern: `custom empty panel / shadcn patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Same empty for no data and failed load
○Avoid: Empty state with no action
○Avoid: Filtered empty that says 'Create first item'

In plain wordsHow people search for it

“what you see when there's nothing in the list yet”“the 'no results' screen after a search”“that illustration and button when my inbox is empty”

AnatomyOpen for part names

illustration / icon: Light glyph or art; avoid guilt-tripping empty inboxes.
message: Say what's missing and why it matters in plain language.
action: One clear next step: Create, Import, Clear filters…

How to write itOpen for stack patterns

Web (HTML/CSS)semantic empty region + primary action link

React + Tailwind + shadcn/uicustom empty panel / shadcn patterns

SwiftUIContentUnavailableView

Ant Design<Empty>

Notes

Empty states teach the product. Distinguish first-use empty, filtered-to-zero, and error. Filtered empty should offer 'Clear filters', not 'Create your first item'. Keep copy short; one primary action beats three equal buttons.

Help me choose: Empty vs Skeleton →

Common mistakesHumans and models trip here

Same empty for no data and failed load: separate error with retry.
Empty state with no action: users don't know the next step.
Filtered empty that says 'Create first item': offer clear filters first.

More failure symptoms on AI broke it.

Related patterns

Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.Spinner / Activity IndicatorA compact motion indicator that something is busy—usually circular or system-native.Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.

Spotted a wrong name or missing pattern?

Message on X