Empty state — Empty collection beside example gallery

An empty-state message shares a wide layout with two sample previews. Use when seeing a finished structure helps people create their first record.

ReactHTML

1440 × 900

Open in new tab

Component.tsx108 lines

export default function EmptyStateExampleGallery() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="grid items-center gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
          <div>
            <div>
              <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
                Nothing here yet
              </h1>
              <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
                Explain what belongs in this collection and how examples can
                help.
              </p>
            </div>
            <div className="mt-8">
              <a
                href="#"
                className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Create first record
              </a>
            </div>
          </div>
          <aside>
            <p className="text-sm font-medium text-neutral-500">
              Explore example structures
            </p>
            <ul role="list" className="mt-4 grid gap-4 sm:grid-cols-2">
              <li className="min-w-0 rounded-lg border border-neutral-200 bg-white p-6">
                <div
                  role="img"
                  aria-label="Image placeholder: sample record preview"
                  className="flex aspect-[16/9] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400"
                >
                  <svg
                    aria-hidden="true"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="size-10"
                  >
                    <rect x="3" y="3" width="18" height="18" rx="2" />
                    <circle cx="9" cy="9" r="2" />
                    <path d="m21 15-5-5L5 21" />
                  </svg>
                </div>
                <h2 className="mt-4 text-base font-semibold">
                  Individual example
                </h2>
                <p className="mt-2 text-sm text-neutral-600">
                  Short description of this example structure.
                </p>
                <p className="mt-4 text-sm">
                  <a
                    href="#"
                    aria-label="Open individual example example"
                    className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  >
                    Open example
                  </a>
                </p>
              </li>
              <li className="min-w-0 rounded-lg border border-neutral-200 bg-white p-6">
                <div
                  role="img"
                  aria-label="Image placeholder: sample record preview"
                  className="flex aspect-[16/9] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400"
                >
                  <svg
                    aria-hidden="true"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="size-10"
                  >
                    <rect x="3" y="3" width="18" height="18" rx="2" />
                    <circle cx="9" cy="9" r="2" />
                    <path d="m21 15-5-5L5 21" />
                  </svg>
                </div>
                <h2 className="mt-4 text-base font-semibold">Shared example</h2>
                <p className="mt-2 text-sm text-neutral-600">
                  Short description of this example structure.
                </p>
                <p className="mt-4 text-sm">
                  <a
                    href="#"
                    aria-label="Open shared example example"
                    className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  >
                    Open example
                  </a>
                </p>
              </li>
            </ul>
          </aside>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when an example is more useful than setup instructions. Choose empty-state-starting-paths when people need to choose among creation methods. Variations: show a single wide preview, use a template comparison, or add a guide link.
Hierarchy: The 30px h1 and primary create action lead, while sample previews explain the content shape. Each Open example action names its sample. Heading up to 5 words, lede 18, sample titles 3 and descriptions 10.
Responsive: The gallery stacks below the message under 1024px; its cards stack below 640px. Placeholder previews use their card width. Title grows at sm.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A 2fr/3fr lg grid uses 40px gaps and vertical centering. The narrower message faces an example gallery with two sm columns, 16px gaps and p-6 cards. Each preview is 16:9 with a decorative image glyph.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Nothing here yet          Explore example structures          │
│Empty-state explanation   ┌─────────────┐ ┌─────────────┐     │
│                          │    Image    │ │    Image    │     │
│[Create first record]     └─────────────┘ └─────────────┘     │
│                          Individual       Shared example     │
│                          Example note     Example note       │
│                          [Open example]   [Open example]     │
└──────────────────────────────────────────────────────────────┘

View all

Empty state — Access required
Layout tags: stacked,icons,compact
Empty state — Centred icon with action
Layout tags: centered,icons,compact
Empty state — Empty archive with retention summary
Layout tags: split,compact,list

Empty state — Empty collection beside example gallery

Pattern notes

More in Empty state

Empty state — Access required

Empty state — Centred icon with action

Empty state — Empty archive with retention summary