EmptyState

Ghost placeholders that mimic the shape of real content, with an optional action overlay

Preview

Rows

No invoices yet

Cards

No projects yet

List

No team members yet

Usage

import { EmptyState } from "@/components/ui/empty-state"
import { Button } from "@/components/ui/button"

<EmptyState
  description="No invoices yet"
  action={<Button size="sm">Create Invoice</Button>}
>
  <EmptyState.Rows />
</EmptyState>

Pass ghost content as children. The component fades it out with a gradient mask and overlays the description and action at the bottom.

Presets

Three built-in ghost presets for common layouts:

<EmptyState.Rows count={5} /> - Table/list rows with checkbox, text, and badge shapes
<EmptyState.Cards count={6} columns={3} /> - Card grid with title, description, and badge
<EmptyState.List count={5} /> - User/item list with avatars and text

Custom ghost content

You can pass any content as children for a custom ghost layout:

<EmptyState
  description="No messages yet"
  action={<Button size="sm">Send Message</Button>}
>
  <div className="space-y-4">
    {Array.from({ length: 4 }, (_, i) => (
      <div key={i} className="flex items-start gap-3">
        <div className="h-8 w-8 shrink-0 rounded-full bg-muted" />
        <div className="space-y-1.5">
          <div className="h-3 w-24 rounded bg-muted" />
          <div className="h-10 w-64 rounded-lg bg-muted/60" />
        </div>
      </div>
    ))}
  </div>
</EmptyState>

Install

npx shadcn add @bonsai/empty-state

EmptyState

On this page