# Empty

> Composable empty and zero-data states.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/empty.json`

## Install

```tsx
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@aspyn-io/kit";
```

### Empty state

A composable placeholder for zero-data views, with optional media, copy, and actions.

```tsx
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <InboxIcon />
    </EmptyMedia>
    <EmptyTitle>No messages yet</EmptyTitle>
    <EmptyDescription>
      When teammates message you, it&apos;ll show up here.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Invite your team</Button>
  </EmptyContent>
</Empty>
```

## Notes

- EmptyMedia variant='icon' renders a muted badge around the icon; the default variant is unstyled for illustrations or avatars.
- Empty is flex-1 by design so it fills the available space inside a card or table body.