---
title: EmptyState
description: "`EmptyState` is a component used to display when a resource is empty or unavailable."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/empty-state/empty-state.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/empty-state
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-emptystate--basic
---

```tsx
<EmptyState.Root
  description="Explore our products and add items to your cart"
  indicator={<ShoppingCartIcon />}
  title="Your cart is empty"
/>
```

## Usage

```tsx
import { EmptyState } from "@yamada-ui/react"
```

```tsx
import { EmptyState } from "@/components/ui"
```

```tsx
import { EmptyState } from "@workspaces/ui"
```

```tsx
<EmptyState.Root>
  <EmptyState.Indicator />
  <EmptyState.Title />
  <EmptyState.Description />
</EmptyState.Root>
```

### Change Size

```tsx
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <EmptyState.Root
        key={index}
        size={size}
        description="Explore our products and add items to your cart"
        indicator={<ShoppingCartIcon />}
        title="Your cart is empty"
      />
    )}
  </For>
</VStack>
```

### Add Children

```tsx
<EmptyState.Root
  description="Explore our products and add items to your cart"
  indicator={<ShoppingCartIcon />}
  title="Your cart is empty"
>
  <Button>Back to home</Button>
</EmptyState.Root>
```

### Custom

```tsx
<EmptyState.Root>
  <EmptyState.Indicator>
    <ShoppingCartIcon />
  </EmptyState.Indicator>

  <EmptyState.Title>Your cart is empty</EmptyState.Title>

  <EmptyState.Description>
    Explore our products and add items to your cart
  </EmptyState.Description>
</EmptyState.Root>
```

## Props

### EmptyState.Root

| Prop               | Default | Type                                                                                                                      | Description                                          |
| ------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| `as`               | -       | `As`                                                                                                                      | The HTML element to render.                          |
| `asChild`          | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.           |
| `css`              | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                      |
| `colorScheme`      | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                          |
| `size`             | `"md"`  | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                           |
| `contentProps`     | -       | `EmptyStateContentProps`                                                                                                  | The props for the empty state content component.     |
| `description`      | -       | `ReactNode`                                                                                                               | The empty state description to use.                  |
| `descriptionProps` | -       | `EmptyStateDescriptionProps`                                                                                              | The props for the empty state description component. |
| `indicator`        | -       | `ReactNode`                                                                                                               | The empty state indicator to use.                    |
| `indicatorProps`   | -       | `EmptyStateIndicatorProps`                                                                                                | The props for the empty state indicator component.   |
| `title`            | -       | `ReactNode`                                                                                                               | The empty state title to use.                        |
| `titleProps`       | -       | `EmptyStateTitleProps`                                                                                                    | The props for the empty state title component.       |

### EmptyState.Content

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### EmptyState.Description

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### EmptyState.Indicator

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### EmptyState.Title

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |