---
layout: ~/layouts/MdxDocLayout.astro
title: "Empty"
description: "A component to display when there's no content or data to show, with optional command line and actions."
sourceFile: "components/empty"
---

import ComponentExample from "~/components/docs/ComponentExample.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import PropsTable from "~/components/docs/PropsTable.astro";
import {
  EmptyDemo,
  EmptySizesDemo,
  EmptyWithCommandDemo,
  EmptyWithActionsDemo,
  EmptyMinimalDemo,
  EmptyBasicDemo,
} from "~/components/demos/EmptyDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="EmptyDemo">
    <EmptyDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>

## Installation

```tsx
import { Empty } from "@cloudflare/kumo";
```

</ComponentSection>

{/* Usage */}

<ComponentSection>

## Usage

```tsx
import { Empty } from "@cloudflare/kumo";
import { PackageIcon } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Empty
      icon={<PackageIcon size={48} />}
      title="No packages found"
      description="Get started by installing your first package."
      commandLine="npm install @kumo/ui"
    />
  );
}
```

</ComponentSection>

{/* Examples */}

<ComponentSection>

## Examples

### Basic

<ComponentExample demo="EmptyBasicDemo">
  <EmptyBasicDemo client:visible />
</ComponentExample>

</ComponentSection>

{/* Sizes */}

<ComponentSection>

## Sizes

  <p>Empty states come in three sizes to fit different container contexts.</p>
  <ComponentExample demo="EmptySizesDemo">
    <EmptySizesDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* With Command Line */}

<ComponentSection>

## With Command Line

  <p>Include a copyable command to help users get started.</p>
  <ComponentExample demo="EmptyWithCommandDemo">
    <EmptyWithCommandDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* With Actions */}

<ComponentSection>

## With Actions

  <p>Add custom action buttons using the contents prop.</p>
  <ComponentExample demo="EmptyWithActionsDemo">
    <EmptyWithActionsDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Minimal */}

<ComponentSection>

## Minimal

  <p>At minimum, only a title is required.</p>
  <ComponentExample demo="EmptyMinimalDemo">
    <EmptyMinimalDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* API Reference */}

<ComponentSection>

## API Reference

  <PropsTable component="Empty" />
</ComponentSection>
