Empty

Display an empty state.

No notifications

You are all caught up. Check back later.

Installation

Add the empty component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/empty.json

Usage

tsx

import { Empty } from "@/components/ui/empty"

Examples

Minimal

Header only

Empty inbox

Nothing to see here yet.

import { InboxIcon } from "lucide-react"

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

<Empty className="w-80 border border-dashed border-border">
  <EmptyHeader>
    <EmptyMedia variant="icon"><InboxIcon /></EmptyMedia>
    <EmptyTitle>Empty inbox</EmptyTitle>
    <EmptyDescription>Nothing to see here yet.</EmptyDescription>
  </EmptyHeader>
</Empty>