Empty

When to use

Empty is the required no-data state for a list, table or search result, and it should distinguish "nothing here yet" (offer the create action) from "no matches" (offer clearing the filters). Use Alert when the reason is a failure rather than an absence, and Skeleton while the request is still in flight.

Platform notes

One pitfall from the source: the base class sets border-dashed but no border width, so the dashed outline appears only if you add border yourself, which is why the demo passes className="border rounded-lg". The API is slot based (EmptyHeader wrapping EmptyMedia, EmptyTitle and EmptyDescription, with EmptyContent for the action), and EmptyMedia variant="icon" renders a Lucide glyph on bg-muted: keep it decorative and let the title carry the meaning. Title, description and the action label are react-i18next messages, including the action verb. Each list owns its own empty state inside its slice, since the useful copy depends on what is missing and what the user can do about it.

Install

npx shadcn@latest add empty

Code

"use client";

import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { PackageOpen } from "lucide-react";

export function EmptyDemo() {
  return (
    <Empty className="border rounded-lg">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <PackageOpen />
        </EmptyMedia>
        <EmptyTitle>No components found</EmptyTitle>
        <EmptyDescription>
          You haven't added any components yet. Start by running the shadcn CLI to add your first
          one.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button size="sm">Add component</Button>
      </EmptyContent>
    </Empty>
  );
}

Full API

ui.shadcn.com/docs/components/empty