

<Demo name="empty/demos/empty-projects" />

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @dotui/empty
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @dotui/empty
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @dotui/empty
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @dotui/empty
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

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

```tsx
<Empty>
  <EmptyMedia variant="icon">
    <FolderIcon />
  </EmptyMedia>
  <EmptyTitle>No projects</EmptyTitle>
  <EmptyDescription>Get started by creating a new project.</EmptyDescription>
</Empty>
```

## Examples [#examples]

<Examples>
  <Example name="empty/demos/empty-projects" />
</Examples>

## API Reference [#api-reference]

### Empty [#empty]

<Reference name="empty" />

### EmptyHeader [#emptyheader]

<Reference name="empty-header" />

### EmptyMedia [#emptymedia]

<Reference name="empty-media" />

### EmptyTitle [#emptytitle]

<Reference name="empty-title" />

### EmptyDescription [#emptydescription]

<Reference name="empty-description" />

### EmptyContent [#emptycontent]

<Reference name="empty-content" />
