Empty

Empty state component for displaying when there is no data to show. Composed of multiple sub-components for flexible layouts.

1. Import

Import the empty components from the design system.

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

2. Props

Empty component sub-components and their props.

Empty

Prop	Type	Default
className	string	--
children	ReactNode	--

EmptyMedia

Prop	Type	Default
variant	"default" \| "icon"	"default"
className	string	--

3. Usages

Common empty state patterns and layouts.

No items found

Get started by creating your first item.

import {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
} from "@/design-system/components/ui/empty";
import { Button } from "@/design-system/components/ui/button";
import { PlusIcon } from "lucide-react";

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyTitle>No items found</EmptyTitle>
        <EmptyDescription>
          Get started by creating your first item.
        </EmptyDescription>
      </EmptyHeader>
      <Button>
        <PlusIcon />
        Create Item
      </Button>
    </Empty>
  );
}