Empty

Display an empty state when there is no data yet — first-run screens, cleared filters, offline users, or 404-style search.

Basic

Icon, title, description, and a primary action for a first-run empty state.

Installation

CLI

npx @sonojs/ui@latest add empty

Composition

structure

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

Usage

empty.tsx

import { FolderCodeIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderCodeIcon />
        </EmptyMedia>
        <EmptyTitle>No data</EmptyTitle>
        <EmptyDescription>No results match your filters.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Add item</Button>
      </EmptyContent>
    </Empty>
  )
}

Props

Prop	Type	Default	Description
variant	"default" · "icon"	"default"	On EmptyMedia — icon wraps children in a muted square; default is transparent for avatars.
className	string	—	On Empty — add border, background, or size utilities for layout variants.