v1.1.1

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="vt-empty-state">
  <div class="vt-icon-badge vt-w-12 vt-h-12 vt-bg-surface-moderate vt-mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-plus vt-w-6 vt-h-6 vt-text-foreground-muted">
      <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M9 15h6"></path><path d="M12 18v-6"></path>
    </svg>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1">No documents</h3>
  <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6">You haven't created any documents yet. Start by creating your first document.</p>
  <button class="vt-btn vt-btn-primary vt-gap-2">

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-plus vt-w-4 vt-h-4">
      <path d="M5 12h14"></path><path d="M12 5v14"></path>
    </svg>
    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="vt-empty-state">
  <div class="vt-icon-badge vt-w-12 vt-h-12 vt-bg-surface-moderate vt-mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-w-6 vt-h-6 vt-text-foreground-muted">
      <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
    </svg>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1">No results found</h3>
  <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6">We couldn't find anything matching your search. Try adjusting your search terms or filters.</p>
  <button class="vt-btn vt-btn-bordered">
    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="vt-empty-state">
  <div class="vt-icon-badge vt-w-12 vt-h-12 vt-bg-surface-moderate vt-mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-mail vt-w-6 vt-h-6 vt-text-foreground-muted">
      <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect>
    </svg>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1">Your inbox is empty</h3>
  <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm">When you receive new messages, they will appear here. Check back later!</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="vt-empty-state">
  <div class="vt-icon-badge vt-w-12 vt-h-12 vt-bg-error-fill/10 vt-mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-triangle-alert vt-w-6 vt-h-6 vt-text-error-fill">
      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>
    </svg>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1">Something went wrong</h3>
  <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6">We couldn't load the data. Please check your connection and try again.</p>
  <button class="vt-btn vt-btn-primary vt-gap-2">

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-refresh-cw vt-w-4 vt-h-4">
      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path>
    </svg>
    Try Again
  </button>
</div>

Minimal

Just text and an action button, no icon.

html

No items to display.

<div class="vt-empty-state vt-py-12">
  <p class="vt-text-sm vt-text-foreground-muted vt-mb-4">No items to display.</p>
  <button class="vt-btn vt-btn-primary vt-btn-sm">
    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="vt-empty-state">
  <div class="es-float vt-mb-6">
    <div class="vt-flex vt-items-center vt-justify-center vt-w-16 vt-h-16 vt-rounded-2xl vt-bg-info-surface">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-inbox vt-w-8 vt-h-8 vt-text-info-fill">
        <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
      </svg>
    </div>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1">No messages yet</h3>
  <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6">When you receive messages, they'll show up here. Start a conversation!</p>
  <button class="vt-btn vt-btn-primary vt-gap-2">

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-plus vt-w-4 vt-h-4">
      <path d="M5 12h14"></path><path d="M12 5v14"></path>
    </svg>
    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="vt-empty-state">
  <div class="vt-relative vt-mb-6">
    <div class="es-pulse-ring vt-absolute vt-inset-0 vt-rounded-full vt-bg-info-fill/20"></div>
    <div class="es-pulse-ring vt-absolute vt-inset-0 vt-rounded-full vt-bg-info-fill/20 vt-inline-6f0d008055"></div>
    <div class="vt-icon-badge vt-relative vt-w-16 vt-h-16 vt-bg-info-fill/10">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-w-8 vt-h-8 vt-text-info-fill">
        <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
      </svg>
    </div>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1">No results found</h3>
  <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6">We couldn't find anything matching your search. Try different keywords or filters.</p>
  <button class="vt-btn vt-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="vt-empty-state">
  <div class="es-bounce-in vt-mb-4">
    <div class="vt-flex vt-items-center vt-justify-center vt-w-14 vt-h-14 vt-rounded-full vt-bg-warning-fill/10">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-star vt-w-7 vt-h-7 vt-text-foreground-primary">
        <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
      </svg>
    </div>
  </div>
  <h3 class="es-bounce-in vt-text-lg vt-font-semibold vt-mb-1 vt-inline-d2c3be0324">No favorites yet</h3>
  <p class="es-bounce-in vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6 vt-inline-c01b56d2ac">Items you mark as favorite will appear here for quick access.</p>
  <div class="es-bounce-in vt-inline-079407edad">
    <button class="vt-btn vt-btn-primary">
      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="vt-empty-state">
  <div class="vt-relative vt-w-32 vt-h-28 vt-mb-6">
    <!-- Background shapes -->
    <div class="es-shape-1 vt-absolute vt-top-0 vt-left-4 vt-w-10 vt-h-10 vt-rounded-lg vt-bg-info-surface vt-rotate-12"></div>
    <div class="es-shape-2 vt-absolute vt-top-2 vt-right-4 vt-w-8 vt-h-8 vt-rounded-full vt-bg-info-fill/10"></div>
    <div class="es-shape-3 vt-absolute vt-bottom-2 vt-left-8 vt-w-6 vt-h-6 vt-rounded vt-bg-info-fill/10 vt--rotate-12"></div>
    <!-- Main element -->
    <div class="es-float vt-absolute vt-inset-0 vt-flex vt-items-center vt-justify-center">
      <div class="vt-w-16 vt-h-20 vt-rounded-lg vt-border-2 vt-border-dashed vt-border-foreground-muted/30 vt-flex vt-items-center vt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-plus vt-w-6 vt-h-6 vt-text-foreground-muted/50">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M9 15h6"></path><path d="M12 18v-6"></path>
        </svg>
      </div>
    </div>
  </div>
  <h3 class="vt-text-lg vt-font-semibold vt-mb-1">No files uploaded</h3>
  <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6">Drag and drop files here or click to browse. We support PNG, JPG, PDF up to 10MB.</p>
  <button class="vt-btn vt-btn-primary vt-gap-2">

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-cloud-upload vt-w-4 vt-h-4">
      <path d="M12 13v8"></path><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="m8 17 4-4 4 4"></path>
    </svg>
    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="vt-empty-state">
  <div class="es-fade-up">
    <div class="vt-icon-badge vt-w-12 vt-h-12 vt-bg-error-surface vt-mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-ban vt-w-6 vt-h-6 vt-text-error-fill">
        <circle cx="12" cy="12" r="10"></circle><path d="M4.929 4.929 19.07 19.071"></path>
      </svg>
    </div>
  </div>
  <div class="es-fade-up vt-inline-d4f73fa0e1">
    <h3 class="vt-text-lg vt-font-semibold vt-mb-1">Connection lost</h3>
  </div>
  <div class="es-fade-up vt-inline-079407edad">
    <p class="vt-text-sm vt-text-foreground-muted vt-max-w-sm vt-mb-6">Please check your internet connection and try again.</p>
  </div>
  <div class="es-fade-up vt-inline-9f04c3a0b1">
    <button class="vt-btn vt-btn-primary vt-gap-2">

      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-refresh-cw vt-w-4 vt-h-4">
        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path>
      </svg>
      Retry
    </button>
  </div>
</div>

Guidelines

No-data view with icon, one-line explanation, and a primary action. Every list/table/board needs one designed.

No documents

Create your first document to get started.

Do
Pair an icon and one-line explanation with a primary action.

No data.

Don't
Don't leave a bare message with no icon or way forward.

API Reference

All CSS classes available for the Empty State component.

Class Type Description
vt-bg-surface-moderate Base Muted background for the icon container
vt-bg-error-fill/10 Modifier Light red background for error state icons
vt-bg-info-surface Modifier Tinted blue background for icon containers
vt-bg-error-surface Modifier Tinted red background for error icon containers
vt-text-foreground-muted 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
Built with:
Icons Button