Home / Snippets / UI Components /

Empty inbox

Celebrate the calm: soft radial backdrop, emoji plane, and one obvious compose path.

Inbox zero

No threads need you right now. Draft a note to your future self or snooze reminders from the timeline.

Compose

Keyboard shortcut C when wired in app.

Widely Supported

uino-js

Quick implementation

.empty-inbox-card {
  text-align: center;
  padding: 2.25rem 1.5rem;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 80% at 50% 0%, oklch(0.45 0.08 250 / 0.2), var(--card));
  border: 1px solid var(--card-border);
}

Prompt this to your LLM

Positive framing beats “nothing here.”

Design an empty inbox state.

Use .empty-inbox-demo and .empty-inbox-card.
Include decorative plane emoji in a framed square, title, supporting copy, primary Compose link styled as button, small kbd hint.
region + labelledby.

Return HTML + CSS.

Why this matters in 2026

Productivity tools compete on calm; empty states should feel rewarding, not like failure.

The logic

Radial highlight draws the eye to the center CTA without animation.

Accessibility & performance

Use a real link or button for compose; kbd is decorative until shortcuts exist.