SuperAPI AI Directory

empty-states

Design & creation

View repository

Updated 10-16 08:36

About this skill

Empty States

Types

  1. First-use: User hasn't created anything yet. This is onboarding.
  2. No results: Search or filter returned nothing. Help them adjust.
  3. Cleared: User deleted everything. Celebrate or guide next action.
  4. Error: Data failed to load. Explain and offer retry.

Structure

[Optional illustration]
Headline: What belongs here (not "Nothing here")
Body: Why it's valuable to add something (one sentence)
CTA: Single clear action to fix the empty state

Examples

Bad

"No projects yet."

Good

"Create your first project. Projects help you organize your work into focused spaces." [Create Project] button

Rules

  • Every empty state needs a CTA
  • The CTA should be the primary action for that area
  • Empty states should feel inviting, not broken
  • Don't use sad face illustrations (it's not the user's fault)
  • Empty states are temporary, design them to be replaced by content