Empty

Frosted placeholder surface used when tables or dashboards have no data. Mono accents keep messaging consistent with the rest of the control pane.

Example

No Deployments
Mix media, title, description, and call-to-action to guide operators.
DEPLOYMENTS NOT FOUND
Connect a Git repository or trigger a pipeline to populate this view.

Need help? Visit the Runbook or contact the SRE team.

Installation

pnpm dlx shadcn@latest add @omni/empty

Usage

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@/components/ui/empty"
<Empty className="p-6 md:p-12">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <InboxIcon className="size-6" />
    </EmptyMedia>
    <EmptyTitle>NO MESSAGES</EmptyTitle>
    <EmptyDescription>
      Everything looks quiet. New alerts will appear here automatically.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="ghost">Create Alert Rule</Button>
  </EmptyContent>
</Empty>