empty-statesBeginner

Empty State — Illustrated

Empty state with larger illustration.

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 illustrated empty state with Tailwind: large SVG illustration, heading, paragraph, and a primary action button. Centered, generous padding.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/empty-states/2.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-empty-2
-->
<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="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
        />
      </svg>

      <h2 class="mt-6 text-2xl font-bold text-gray-900">No data to display</h2>

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

      <div class="mt-6 space-y-3">
        <button
          class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
        >
          Import Data
        </button>

        <button
          class="block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50"
        >
          Create New
        </button>
      </div>

      <p class="mt-6 text-sm text-gray-700">Supported formats: CSV, JSON</p>
    </div>
  </div>
</div>