empty-statesBeginner

Empty State

A centered illustration + message + primary action for empty data views.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build an empty state with Tailwind: centered SVG illustration (a stack of boxes or magnifying glass), a heading like 'No results yet', a one-paragraph explanation, and a primary CTA button. Use generous vertical padding so the empty state feels intentional, not broken.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/empty-states/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-empty-state
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex min-h-screen items-center justify-center p-6 w-full">
<div class="max-w-md text-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="mx-auto size-20 text-gray-400"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
        />
      </svg>

      <h2 class="mt-6 text-2xl font-bold text-gray-900">No items found</h2>

      <p class="mt-4 text-pretty text-gray-700">
        Get started by creating your first item. It only takes a few seconds.
      </p>

      <button
        type="button"
        class="mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
      >
        Create Item
      </button>

      <p class="mt-6 text-sm text-gray-700">
        <a href="#" class="underline hover:text-gray-900">Learn how</a> or
        <a href="#" class="underline hover:text-gray-900">view examples</a>
      </p>
    </div>
  </div>
</div>