> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Empty

> Placeholder when lists or states have no data.

<Info>
  Use an Empty state to explain what should appear here and how to get started. Pair with a primary action (e.g., “Create project”).
</Info>

* **Location**: `sabo/src/components/ui/empty.tsx`

## Usage

```tsx sabo/src/components/ui/empty.tsx theme={null}
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

<ParamField path="EmptyMedia.variant" type="string" default="default">
  <code>default</code> | <code>icon</code> — shows a compact icon badge.
</ParamField>

## Styling tip

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