# Empty

A container for displaying empty state information.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { BookOpen, Route } from "@lucide/svelte";
import {
	Button,
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from "coss-svelte";
</script>

<Empty>
	<EmptyHeader>
		<EmptyMedia data-variant="icon"><Route size={20} /></EmptyMedia>
		<EmptyTitle>No upcoming meetings</EmptyTitle>
		<EmptyDescription>Create a meeting to get started.</EmptyDescription>
	</EmptyHeader>
	<EmptyContent>
		<div class="flex gap-2">
			<Button size="sm">Create meeting</Button>
			<Button size="sm" variant="outline"><BookOpen size={16} /> View docs</Button>
		</div>
	</EmptyContent>
</Empty>

```

## Anatomy

- `Empty`
- `EmptyContent`
- `EmptyDescription`
- `EmptyHeader`
- `EmptyMedia`
- `EmptyTitle`

## API Reference

### Empty

A container for displaying empty state information.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### EmptyContent

Wraps the primary content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### EmptyDescription

Provides supporting copy for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### EmptyHeader

Groups heading content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### EmptyMedia

Renders the media area for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### EmptyTitle

Names the parent surface or section.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Content & Display |
| Particles | 1 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/empty.json` for the complete local file and dependency closure.
- Empty is stable in the current source catalog.