Empty state — Preview rows above action

Ghost rows show the anatomy of a future list above a creation action. Use it to explain what will appear before the first item is added.

ReactHTML

1440 × 480

Open in new tab

Component.tsx30 lines

export default function EmptyStateSkeletonPreview() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-96">
      <div aria-hidden="true" className="grid gap-2">
        <div className="flex items-center gap-3">
          <span className="size-8 shrink-0 rounded-md bg-neutral-100" />
          <div className="flex-1 space-y-2">
            <div className="h-2 w-3/5 rounded-full bg-neutral-100" />
            <div className="h-2 w-2/5 rounded-full bg-neutral-100" />
          </div>
        </div>
        <div className="flex items-center gap-3">
          <span className="size-8 shrink-0 rounded-md bg-neutral-100" />
          <div className="flex-1 space-y-2">
            <div className="h-2 w-3/5 rounded-full bg-neutral-100" />
            <div className="h-2 w-2/5 rounded-full bg-neutral-100" />
          </div>
        </div>
        <div className="flex h-8 items-center justify-center rounded-md border border-dashed border-neutral-300 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-5">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </div>
      </div>
      <h2 className="mt-4 text-base font-semibold">Title for the future list</h2>
      <p className="mt-2 text-sm text-pretty text-neutral-600">Explain what these rows will hold once an item is added.</p>
      <a href="#" className="mt-5 w-full 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">Add first item</a>
    </div>
  )
}

Pattern notes

When to use: Use to explain a future list before content exists. Pick empty-state-centered-icon if the future content shape adds little context. Variations: use document rows, attachment rows, or compact contact rows while keeping the preview decorative.
Hierarchy: The decorative row preview establishes the future structure; the heading and explanation name the collection, then the filled action creates its first item. Heading up to 5 words, explanation up to 12, action up to 4. Text is 16px semibold for the heading and 14px for body and action.
Responsive: The stack stays the same at every width, growing from 288px to 384px at 640px. Bars scale with the available preview column and the compact three-row preview keeps the panel below 340px high.
Layout: A 288px (w-72), 384px from 640px (sm:w-96), p-6 bordered rounded-lg panel. An aria-hidden preview has three 32px-high rows with 8px gaps: two 32px neutral-100 squares beside 8px bars at 60% and 40% widths, then a neutral-300 dashed rounded-md slot with a 20px plus. A 16px heading follows by 16px, description by 8px, and full-width 44px action by 20px.
States: All links and buttons show a 2px neutral-900 focus-visible outline offset 2px. Primary actions hover to neutral-700, secondary actions to neutral-50, and underlined links to neutral-600. Transitions use the default 150ms timing. Ghost rows are static and aria-hidden; there is no shimmer, animation, busy state or interactive preview.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│┌────┐   ──────────────────                           │
││    │   ───────────                                  │
│└────┘                                                │
│┌────┐   ──────────────────                           │
││    │   ───────────                                  │
│└────┘                                                │
│┌────────────────────────────────────────────────────┐│
││                        +                           ││
│└────────────────────────────────────────────────────┘│
│Title for the future list                             │
│Two-line explanation                                  │
│[Add first item]                                      │
└──────────────────────────────────────────────────────┘

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 — Preview rows above action

Pattern notes

More in Empty state

Empty state — Access required

Empty state — Centred icon with action

Empty state — Empty archive with retention summary