# Empty

Shows that there's nothing here yet, and what to do about it.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <HugeiconsIcon icon={Folder01Icon} />
    </EmptyMedia>
    <EmptyTitle>No Projects Yet</EmptyTitle>
    <EmptyDescription>
      You haven&apos;t created any projects yet. Get started by creating your
      first project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="primary">Create Project</Button>
  </EmptyContent>
</Empty>
```

## Installation

```bash
npx shadcn@latest add @constella/empty
```

## Usage

```tsx
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/primitives/empty";
```

```tsx
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <HugeiconsIcon icon={Folder01Icon} />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>
```

## Composition

```
Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent
```

## Empty Media

Use `variant="icon"` on `EmptyMedia` to set an icon on a `fill` tile. Leave the default to show anything else, like an avatar.

| Variant   | Shows                    |
| --------- | ------------------------ |
| `default` | Its children as they are |
| `icon`    | A 32px `fill` tile       |

## Empty Content

Put the way out in `EmptyContent`, like clearing a search that found nothing. An empty state draws no box; give it a dashed edge with `sx` to mark a place waiting for content.

```tsx
<Empty sx={styles.dashed}>
  <EmptyHeader>
    <EmptyTitle>No files match “{query}”</EmptyTitle>
  </EmptyHeader>
  <EmptyContent>
    <Button onClick={() => setQuery("")}>Clear search</Button>
  </EmptyContent>
</Empty>
```

## Card

Put an empty state in a [Card](https://constella.aayush.cv/docs/components/card/index.md) to hold a section's place.

```tsx
<Card>
  <Empty>
    <EmptyHeader>
      <EmptyTitle>No Notifications</EmptyTitle>
    </EmptyHeader>
  </Empty>
</Card>
```

## Avatar

Put an [Avatar](https://constella.aayush.cv/docs/components/avatar/index.md) in `EmptyMedia`.

```tsx
<EmptyMedia>
  <Avatar size="lg">
    <AvatarImage alt="" src="/avatars/shadcn.png" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>
```

## API Reference

| Part         | Adds                                              |
| ------------ | ------------------------------------------------- |
| `EmptyMedia` | `variant`: `"default"` or `"icon"`                |
| `EmptyTitle` | `render`, to make it a heading: `render={<h3 />}` |

Every part takes `sx`, applied last, and renders a `div`. For `render`, see [Base UI useRender](https://base-ui.com/react/utils/use-render).