---
title: Empty
description: "Use the Empty component to display an empty state."
---

```tsx
import * as stylex from '@stylexjs/stylex';
import { Package } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty';
import { icon } from '@/lib/stylex-utils';

export default function EmptyDemo() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Package {...stylex.props(icon.md)} />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>
          You haven't created any projects. Get started by creating your first
          one.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button size="sm">Create project</Button>
      </EmptyContent>
    </Empty>
  );
}
```

## Install

```bash
npx @madeui/cli add empty
```

## Usage

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

## Composition

```tsx
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon" />
    <EmptyTitle />
    <EmptyDescription />
  </EmptyHeader>
  <EmptyContent />
</Empty>
```

## Outline

Override `style` on `Empty` for a solid border instead of the default dashed one.

```tsx
import * as stylex from '@stylexjs/stylex';
import { Text } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty';
import { icon } from '@/lib/stylex-utils';

export default function EmptyOutline() {
  return (
    <Empty style={styles.root}>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Text {...stylex.props(icon.md)} />
        </EmptyMedia>
        <EmptyTitle>No messages</EmptyTitle>
        <EmptyDescription>
          You&apos;re all caught up. New messages will show up here.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Refresh
        </Button>
      </EmptyContent>
    </Empty>
  );
}

// A solid outline instead of the default dashed border.
const styles = stylex.create({
  root: {
    borderStyle: 'solid',
  },
});
```

## Avatar

Use `EmptyMedia` with our `Avatar` for people- or team-shaped empty states.

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty';

export default function EmptyAvatar() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia>
          <Avatar size="lg">
            <AvatarImage src="https://github.com/madeui.png" alt="@madeui" />
            <AvatarFallback>MD</AvatarFallback>
          </Avatar>
        </EmptyMedia>
        <EmptyTitle>No team members</EmptyTitle>
        <EmptyDescription>
          Invite people to collaborate on this project.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button size="sm">Invite members</Button>
      </EmptyContent>
    </Empty>
  );
}
```

## Input group

Nest an `InputGroup` inside `EmptyContent` for a search-style empty state.

```tsx
import * as stylex from '@stylexjs/stylex';
import { Search } from 'lucide-react';

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty';
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group';
import { icon } from '@/lib/stylex-utils';

export default function EmptyInputGroup() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Search {...stylex.props(icon.md)} />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          Try searching for a different keyword.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <InputGroup>
          <InputGroupInput placeholder="Search…" />
          <InputGroupAddon>
            <Search {...stylex.props(icon.sm)} />
          </InputGroupAddon>
        </InputGroup>
      </EmptyContent>
    </Empty>
  );
}
```

## API reference

Plain layout markup. `EmptyMedia` accepts `variant`: `'default'` (transparent) or `'icon'` (muted rounded square for an icon). Every part accepts a `style` prop (`StyleXStyles`, merged last).