Empty State

Placeholder shown when a list, search, or page has nothing to display yet — illustration or icon, heading, supporting text, and an optional action.

Illustration + CTA

Full-panel variant for an entire page or tab with no data at all. Pairs an icon standing in for an illustration with a heading, one line of supporting text, and a single primary action.

No orders yet

Orders placed by customers will show up here once they start coming in.

<div class="hero bg-base-100 rounded-[var(--radius-sm)] py-16">
  <div class="hero-content text-center">
    <div class="max-w-sm">
      <i data-lucide="package-open" class="mx-auto mb-4 size-12 text-base-content/30"></i>
      <h3 class="text-lg font-semibold">No orders yet</h3>
      <p class="py-3 text-base-content/60">
        Orders placed by customers will show up here once they start coming in.
      </p>
      <button class="btn btn-primary btn-sm">Share your store link</button>
    </div>
  </div>
</div>

Search no-results

Smaller footprint than the full illustration variant since it sits inside a results area the user already opened on purpose. Echoes the query back so the cause of the empty state is obvious, and offers a way out instead of a dead end.

No results for "neon hoodie"

Try checking your spelling or use a more general search term.

<div class="text-center py-12 px-4">
  <i data-lucide="search-x" class="mx-auto mb-3 size-9 text-base-content/30"></i>
  <h3 class="font-semibold">No results for "neon hoodie"</h3>
  <p class="text-sm text-base-content/60 mt-1">
    Try checking your spelling or use a more general search term.
  </p>
  <button class="btn btn-ghost btn-sm mt-4">Clear search</button>
</div>

List empty

For a single list or card inside a larger page that otherwise has content (e.g. a "Team members" card on a settings page). The dashed border reads as "drop zone" without needing extra copy to explain it, and keeps the empty list visually distinct from a loading or error state in the same slot.

No team members yet

<div class="flex flex-col items-center gap-2 py-8 px-4 text-center
            border border-dashed border-base-300 rounded-[var(--radius-sm)]">
  <i data-lucide="inbox" class="size-7 text-base-content/30"></i>
  <p class="text-sm font-medium">No team members yet</p>
  <button class="btn btn-outline btn-xs mt-1">+ Invite member</button>
</div>

Minimal

No icon, no action — just a muted line of text. Use this where the surrounding context already explains what's missing (a table cell, a small widget, a notification list) and adding an icon or button would be more visual weight than the slot can justify.

Nothing here yet.

<p class="text-center text-sm text-base-content/50 py-6">
  Nothing here yet.
</p>

All four variants use the same DaisyUI btn classes and the same Lucide icon set — only spacing, border, and the presence of an action change between them. Pick the variant that matches how much space the empty slot actually has, not how "important" the missing data feels: a missing-team-members card is still a small list slot, even though losing teammates feels significant.