---
title: Empty
description: An empty state for a page, table or panel with no content yet, with an icon, a title, a short explanation and the action that fills it.
icon: inbox
author:
  name: shadcn
  url: https://github.com/shadcn
search:
  keywords: [empty state, zero state, no results]
mode: wide
---

<PoweredBy packages={[{ name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/empty' }]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/empty
```

<ComponentPreview name="empty-demo" />

## When to use

Use this decision tree to determine when to use the Empty component:

```mermaid
graph TD;
    A[❓ Need to show empty state?] -->|Yes| B{Data/content absent?};
    A -->|No| C[ℹ️ Display actual content];
    B -->|Yes| D[✅ Use Empty component];
    B -->|No| E[ℹ️ Show loading indicator];
    D --> F{Need visual media?};
    F -->|Yes| G[✅ Add EmptyMedia with icon];
    F -->|No| H[✅ Just title and description];
    D --> I{Need user action?};
    I -->|Yes| J[✅ Add Button in EmptyContent];
    I -->|No| K[✅ Informational only];
    D --> L{Need an emphasized surface?};
    L -->|Yes| M[✅ Choose outline or muted variant];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class D,G,H,J,K,M recommended;
    class A,B,F,I,L decision;
    class C,E neutral;
```

## Usage

```tsx
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/redpanda-ui/empty';
```

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

## Anatomy

The Empty component is structured as a centered layout designed to communicate the absence of content. Here's how the components work together:

```tsx
<Empty>           {/* Container with centered flex layout */}
  <EmptyHeader>   {/* Groups media, title, and description */}
    <EmptyMedia>  {/* Optional visual (icon, avatar, image) */}
    <EmptyTitle>  {/* Primary message */}
    <EmptyDescription> {/* Supporting details */}
  </EmptyHeader>
  <EmptyContent>  {/* Optional actions (buttons, links, inputs) */}
</Empty>
```

### Layout Structure

- **Empty**: Root container that centers content vertically and horizontally
- **EmptyHeader**: Stacks media, title, and description in a column with consistent spacing
- **EmptyMedia**: Displays visual elements (icons with `variant="icon"`, or custom content like avatars)
- **EmptyTitle**: Primary heading styled for prominence
- **EmptyDescription**: Secondary text providing context or instructions
- **EmptyContent**: Action area for buttons, forms, or links

### Typical Usage Pattern

```tsx
// Minimal empty state
<Empty>
  <EmptyHeader>
    <EmptyTitle>No results found</EmptyTitle>
    <EmptyDescription>Try adjusting your search.</EmptyDescription>
  </EmptyHeader>
</Empty>

// Full empty state with icon and action
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <SearchIcon />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Get started by creating your first project.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create Project</Button>
  </EmptyContent>
</Empty>
```

## Examples

### Outline

Use `<Empty variant="outline">` for a dashed outline. The component owns the border treatment.

<ComponentPreview name="empty-outline-demo" />

### Background

Use `<Empty variant="muted">` for a theme-aware gradient from the recessed surface to the background.

<ComponentPreview name="empty-background-demo" />

### Avatar

Use the `EmptyMedia` component to display an avatar in the empty state.

<ComponentPreview name="empty-avatar-demo" />

### Avatar Group

Use the `EmptyMedia` component to display an avatar group in the empty state.

<ComponentPreview name="empty-avatar-group-demo" />

### InputGroup

You can add an `InputGroup` component to the `EmptyContent` component.

<ComponentPreview name="empty-input-group-demo" />

### No results

<ComponentPreview
  name="empty-no-results-demo"
  description="Filtered-view empty state with a Clear filters affordance."
/>

### Secondary action

<ComponentPreview
  name="empty-secondary-action-demo"
  description="Empty state with primary and secondary actions for multi-path recovery."
/>

## API Reference

### Empty

The main component of the empty state. Wraps the `EmptyHeader` and `EmptyContent` components.

| Prop        | Type                                | Default     |
| ----------- | ----------------------------------- | ----------- |
| `variant`   | `"default" \| "outline" \| "muted"` | `"default"` |
| `className` | `string`                            |             |

`default` has no border or background paint. `outline` adds the dashed border; `muted` adds the gradient without a border. These root variants are separate from `EmptyMedia`'s `default` and `icon` variants.

Use `className` for layout, such as a container height or maximum width. Choose the surface with `variant` rather than overriding its border or background. Native div attributes and refs are forwarded.

```tsx
<Empty variant="outline">
  <EmptyHeader />
  <EmptyContent />
</Empty>
```

### EmptyHeader

The `EmptyHeader` component wraps the empty media, title, and description.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>
```

### EmptyMedia

Use the `EmptyMedia` component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

| Prop        | Type                  | Default   |
| ----------- | --------------------- | --------- |
| `variant`   | `"default" \| "icon"` | `default` |
| `className` | `string`              |           |

```tsx
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
```

```tsx
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>
```

### EmptyTitle

Use the `EmptyTitle` component to display the title of the empty state.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyTitle>No data</EmptyTitle>
```

### EmptyDescription

Use the `EmptyDescription` component to display the description of the empty state.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyDescription>You do not have any notifications.</EmptyDescription>
```

### EmptyContent

Use the `EmptyContent` component to display the content of the empty state such as a button, input or a link.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://ui.shadcn.com/docs/components/empty" text="Docs" />
</div>

## Credits

- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/empty) for the `empty` component and style.