📖 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!