Skip to main content
Use an Empty state to explain what should appear here and how to get started. Pair with a primary action (e.g., “Create project”).
  • Location: sabo/src/components/ui/empty.tsx

​
Usage

sabo/src/components/ui/empty.tsx
import {
  Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia
} from "@/components/ui/empty";
import { Button } from "@/components/ui/button";
import { FolderPlusIcon } from "lucide-react";

export function Example() {
  return (
    <Empty className="border">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderPlusIcon />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>Create your first project to get started.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Create project</Button>
      </EmptyContent>
    </Empty>
  );
}

​
Key props

​
EmptyMedia.variant
string
default:"default"
default | icon — shows a compact icon badge.

​
Styling tip

  • Keep copy concise and positive. Avoid dead ends — include a clear next step.