Empty States

Designing helpful empty states that guide users forward instead of leaving them stranded. A well-crafted empty state turns a dead end into an opportunity for engagement and discovery.

Overview

Why empty states matter for user experience and how to approach them thoughtfully.

First Impressions Matter

Empty states are often the first thing users see. A blank screen feels broken; a well-designed empty state feels intentional and welcoming.

Guide the Next Action

Every empty state should answer two questions: "Why is this empty?" and "What should I do next?" Always provide a clear call to action.

Reduce Cognitive Load

Use illustrations and concise copy to explain the state without overwhelming the user. Keep it simple, friendly, and on-brand.

No Data

When a table or list has no items yet. Encourage the user to populate it with their first entry.

Empty Table

NameStatusDateActions

No items yet

Your collection is empty. Create your first item to get started and see it listed here.

No Data Empty State
tsx
<div className="flex flex-col items-center py-12 text-center">
  <EmptyBoxIllustration className="text-(--text-muted) mb-4" />
  <h3 className="text-sm font-semibold text-(--text) mb-1.5">
    No items yet
  </h3>
  <p className="text-xs text-(--text-muted) max-w-xs mb-5">
    Your collection is empty. Create your first item
    to get started.
  </p>
  <button className="inline-flex items-center gap-1.5 px-4 py-2
    text-xs font-medium rounded-lg bg-brand-500/10 text-brand-500
    border border-brand-500/20 hover:bg-brand-500/20">
    <PlusIcon size={14} />
    Create Item
  </button>
</div>

No Results

When a search or filter yields zero matches. Suggest clearing filters or trying different terms.

Search No Results

quantum-flux-capacitor

No results found

We couldn't find anything matching "quantum-flux-capacitor". Try a different search term or clear your filters.

No Results Empty State
tsx
<div className="flex flex-col items-center py-12 text-center">
  <SearchIllustration className="text-(--text-muted) mb-4" />
  <h3 className="text-sm font-semibold text-(--text) mb-1.5">
    No results found
  </h3>
  <p className="text-xs text-(--text-muted) max-w-xs mb-5">
    We couldn't find anything matching your search.
    Try a different term or clear your filters.
  </p>
  <button className="inline-flex items-center gap-1.5 px-4 py-2
    text-xs font-medium rounded-lg bg-brand-500/10 text-brand-500
    border border-brand-500/20">
    <CancelIcon size={14} />
    Clear Filters
  </button>
</div>

First Time

Onboarding empty state that welcomes new users and encourages them to take their first meaningful action.

Onboarding

Welcome to your workspace

This is where all your projects will live. Create your first project to start building something amazing.

It only takes a minute

First Time / Onboarding
tsx
<div className="flex flex-col items-center py-14 px-6
  rounded-xl border border-brand-500/20 bg-brand-500/5
  text-center">
  <RocketIllustration className="text-brand-500 mb-4" />
  <h3 className="text-base font-semibold text-(--text) mb-2">
    Welcome to your workspace
  </h3>
  <p className="text-sm text-(--text-muted) max-w-sm mb-6">
    Create your first project to start building
    something amazing.
  </p>
  <button className="inline-flex items-center gap-2 px-5 py-2.5
    text-sm font-medium rounded-lg bg-brand-500 text-white
    hover:bg-brand-600 shadow-sm">
    <PlusIcon size={16} />
    Create Your First Project
  </button>
</div>

Error Empty

When data fails to load due to a network error, server issue, or timeout. Provide a retry action.

Failed to Load

Unable to load data

Something went wrong while fetching your data. This might be a temporary issue. Please check your connection and try again.

Error Empty State
tsx
<div className="flex flex-col items-center py-12
  rounded-lg border border-danger-500/20 bg-danger-500/5
  text-center">
  <ErrorIllustration className="text-(--text-muted) mb-4" />
  <h3 className="text-sm font-semibold text-(--text) mb-1.5">
    Unable to load data
  </h3>
  <p className="text-xs text-(--text-muted) max-w-xs mb-5">
    Something went wrong. Please check your connection
    and try again.
  </p>
  <button className="inline-flex items-center gap-1.5 px-4 py-2
    text-xs font-medium rounded-lg bg-danger-500/10 text-danger-500
    border border-danger-500/20">
    Try Again
  </button>
</div>

Empty Inbox

Mailbox or notification center with no messages. A positive state that reassures the user.

No Notifications

You're all caught up

No new notifications or messages. When something needs your attention, it will appear here.

Empty Inbox
tsx
<div className="flex flex-col items-center py-12
  rounded-xl border border-(--border)/40 bg-(--surface-sunken)
  text-center">
  <MailboxIllustration className="text-(--text-muted) mb-4" />
  <div className="w-10 h-10 rounded-full bg-success-500/10
    flex items-center justify-center mb-3">
    <CheckIcon size={20} className="text-success-500" />
  </div>
  <h3 className="text-sm font-semibold text-(--text) mb-1.5">
    You're all caught up
  </h3>
  <p className="text-xs text-(--text-muted) max-w-xs">
    No new notifications. When something needs your
    attention, it will appear here.
  </p>
</div>

With Illustration

SVG illustrations add personality and visual clarity to empty states. Use simple geometric shapes that match your brand.

Illustration Gallery

Empty Box
No Results
Get Started
Error
Empty Inbox
Geometric
Tip
Use currentColor for SVG strokes so illustrations automatically adapt to light and dark themes. Keep illustrations under 2KB for performance.
SVG Illustration Component
tsx
function EmptyBoxIllustration({ className = '' }) {
  return (
    <svg className={className} width="120" height="120"
      viewBox="0 0 120 120" fill="none">
      <rect x="25" y="45" width="70" height="50" rx="6"
        stroke="currentColor" strokeWidth="2"
        strokeDasharray="4 3" opacity="0.3" />
      <path d="M25 55L60 35L95 55"
        stroke="currentColor" strokeWidth="2"
        opacity="0.4" />
      <circle cx="60" cy="80" r="4"
        stroke="currentColor" strokeWidth="1.5"
        opacity="0.25" />
    </svg>
  );
}

Best Practices

Guidelines for designing effective empty states that help rather than hinder.

Do
  • Always provide a clear action button that resolves the empty state
  • Use friendly, encouraging copy that matches your brand tone
  • Include a simple illustration to add warmth and visual context
  • Explain why the area is empty and what the user can do about it
  • Differentiate between "no data yet" and "no results found" states
  • Make empty inbox states feel positive (e.g. "All caught up!")
Don't
  • Leave a completely blank area with no explanation
  • Use technical jargon or error codes as the only message
  • Show a dead end with no way for the user to take action
  • Use complex or heavy illustrations that slow page load
  • Use the same generic empty state for every context
  • Blame the user for an empty state caused by a system error

Related

Components commonly used when building empty states.

Alert

Contextual feedback for important messages, warnings, and errors.

Card

Container component for grouping content with consistent styling.

Button

Action triggers for empty state CTAs and interactive elements.