📖 Step 3: Design - UI Components & Patterns#82 / 291

Empty State

Empty State

📖One-line summary

A helpful screen shown when there is no data to display.

Example

Screen shown when there is no data

📭

No posts yet

Write your first post!

Vibe coding prompt examples

>_

Build empty states to show when there is no data. Include illustration, guidance message, and action button. Build per-context variants for no search results, empty cart, etc.

>_

Build error empty states. Show a retry button on network errors and a 'Go home' button on 404.

>_

Build a first-user empty state. Use feature explanation and a 'Get started' button to lead users into the onboarding flow.

Try these prompts in your AI coding assistant!