Empty State

Placeholder content shown when there is no data to display. Includes static and animated variants.

Default

Icon, title, description, and action button.

html

No documents

You haven't created any documents yet. Start by creating your first document.

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="uc-w-12 uc-h-12 uc-rounded-full uc-bg-neutrals-muted uc-mb-4">
    <svg>...</svg>
  </div>
  <h3 class="uc-text-lg uc-font-semibold">No documents</h3>
  <p class="uc-text-sm uc-text-fg-disabled uc-mb-6">...</p>
  <button>Create Document</button>
</div>

No Results

Shown when a search query returns no matches.

html

No results found

We couldn't find anything matching your search. Try adjusting your search terms or filters.

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="uc-w-12 uc-h-12 uc-rounded-full uc-bg-neutrals-muted uc-mb-4">
    <svg>...</svg>
  </div>
  <h3 class="uc-text-lg uc-font-semibold">No results found</h3>
  <p class="uc-text-sm uc-text-fg-disabled uc-mb-6">...</p>
  <button>Clear Search</button>
</div>

Empty Inbox

Shown when the inbox or messages area is empty.

html

Your inbox is empty

When you receive new messages, they will appear here. Check back later!

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="uc-w-12 uc-h-12 uc-rounded-full uc-bg-neutrals-muted uc-mb-4">
    <svg>...</svg>
  </div>
  <h3 class="uc-text-lg uc-font-semibold">Your inbox is empty</h3>
  <p class="uc-text-sm uc-text-fg-disabled">...</p>
</div>

Error State

Warning icon with a retry button for recoverable errors.

html

Something went wrong

We couldn't load the data. Please check your connection and try again.

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="uc-w-12 uc-h-12 uc-rounded-full uc-bg-accents-red/10 uc-mb-4">
    <svg>...</svg>
  </div>
  <h3 class="uc-text-lg uc-font-semibold">Something went wrong</h3>
  <p class="uc-text-sm uc-text-fg-disabled uc-mb-6">...</p>
  <button>Try Again</button>
</div>

Minimal

Just text and an action button, no icon.

html

No items to display.

<div class="uc-flex uc-flex-col uc-items-center uc-py-12 uc-text-center">
  <p class="uc-text-sm uc-text-fg-disabled uc-mb-4">No items to display.</p>
  <button>Add Item</button>
</div>

Floating Icon

Icon with a gentle floating animation.

html

No messages yet

When you receive messages, they'll show up here. Start a conversation!

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="es-float uc-mb-6">
    <div class="uc-w-16 uc-h-16 uc-rounded-2xl uc-bg-tint-blue">...</div>
  </div>
  <h3 class="uc-text-lg uc-font-semibold">No messages yet</h3>
  <p class="uc-text-sm uc-text-fg-disabled">Description text</p>
  <button class="uc-btn">New Message</button>
</div>

Pulse Ring

Icon with expanding pulse rings.

html

No results found

We couldn't find anything matching your search. Try different keywords or filters.

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="uc-relative uc-mb-6">
    <div class="es-pulse-ring uc-absolute uc-inset-0 uc-rounded-full uc-bg-accents-blue/20"></div>
    <div class="es-pulse-ring uc-absolute uc-inset-0 uc-rounded-full uc-bg-accents-blue/20">...</div>
    <div class="uc-relative uc-w-16 uc-h-16 uc-rounded-full uc-bg-accents-blue/10">...</div>
  </div>
  <h3 class="uc-text-lg uc-font-semibold">No results found</h3>
  <p class="uc-text-sm uc-text-fg-disabled">Description text</p>
  <button class="uc-btn uc-btn-bordered">Clear Search</button>
</div>

Bounce In

Elements appearing with a bouncy entrance.

html

No favorites yet

Items you mark as favorite will appear here for quick access.

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="es-bounce-in uc-mb-4">
    <div class="uc-w-14 uc-h-14 uc-rounded-full uc-bg-accents-orange/10">...</div>
  </div>
  <h3 class="es-bounce-in uc-text-lg uc-font-semibold">No favorites yet</h3>
  <p class="es-bounce-in uc-text-sm uc-text-fg-disabled">Description text</p>
  <div class="es-bounce-in">
    <button class="uc-btn">Browse Items</button>
  </div>
</div>

Animated Illustration

Composed SVG shapes with staggered animations.

html

No files uploaded

Drag and drop files here or click to browse. We support PNG, JPG, PDF up to 10MB.

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="uc-relative uc-w-32 uc-h-28 uc-mb-6">
    <div class="es-shape-1 uc-absolute uc-w-10 uc-h-10 uc-rounded-lg uc-bg-tint-blue"></div>
    <div class="es-shape-2 uc-absolute uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue/10"></div>
    <div class="es-shape-3 uc-absolute uc-w-6 uc-h-6 uc-rounded uc-bg-accents-blue/10"></div>
    <div class="es-float uc-absolute uc-inset-0">
      <div class="uc-w-16 uc-h-20 uc-rounded-lg uc-border-2 uc-border-dashed">...</div>
    </div>
  </div>
  <h3 class="uc-text-lg uc-font-semibold">No files uploaded</h3>
  <p class="uc-text-sm uc-text-fg-disabled">Description text</p>
  <button class="uc-btn">Upload Files</button>
</div>

Fade Slide Up

Content fading in while sliding upward.

html

Connection lost

Please check your internet connection and try again.

<div class="uc-flex uc-flex-col uc-items-center uc-py-16 uc-text-center">
  <div class="es-fade-up">
    <div class="uc-w-12 uc-h-12 uc-rounded-full uc-bg-tint-red uc-mb-4">...</div>
  </div>
  <div class="es-fade-up">
    <h3 class="uc-text-lg uc-font-semibold">Connection lost</h3>
  </div>
  <div class="es-fade-up">
    <p class="uc-text-sm uc-text-fg-disabled">Description text</p>
  </div>
  <div class="es-fade-up">
    <button class="uc-btn">Retry</button>
  </div>
</div>

API Reference

All CSS classes available for the Empty State component.

Class Type Description
uc-bg-neutrals-muted Base Muted background for the icon container
uc-bg-accents-red/10 Modifier Light red background for error state icons
uc-bg-tint-blue Modifier Tinted blue background for icon containers
uc-bg-tint-red Modifier Tinted red background for error icon containers
uc-text-fg-disabled Base Muted text color for description
es-float Animation Gentle floating animation on the icon
es-pulse-ring Animation Expanding pulse ring animation
es-bounce-in Animation Bouncy entrance animation for elements
es-fade-up Animation Fade in while sliding upward
es-shape-1 Animation Animated background shape (first)
es-shape-2 Animation Animated background shape (second)
es-shape-3 Animation Animated background shape (third)

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Empty states should be in a section with a descriptive heading
Images Decorative illustrations should have aria-hidden="true"
Actions CTA buttons should clearly describe the action to take
Live region If empty state appears after filtering, announce via aria-live