# Empty: In a command list

> `<CommandEmpty />` passes the current search to a function child, so the message can quote it.

Example: https://hextaui.com/docs/empty/examples/in-command
Component docs: https://hextaui.com/docs/empty.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/empty-in-command.json
```

This adds `components/examples/empty/in-command.tsx` with the Empty component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/empty/in-command.tsx"
"use client"

import * as React from "react"
import { IconSearch } from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export function EmptyInCommand() {
  const [search, setSearch] = React.useState("zzz")

  return (
    <Command className="w-full max-w-sm">
      <CommandInput
        placeholder="Search people…"
        value={search}
        onValueChange={setSearch}
      />
      <CommandList>
        <CommandEmpty>
          {(search) => (
            <Empty size="sm">
              <EmptyHeader>
                <EmptyMedia variant="icon">
                  <IconSearch />
                </EmptyMedia>
                <EmptyTitle>No results</EmptyTitle>
                <EmptyDescription>
                  Nothing matches “{search}”. Try another name.
                </EmptyDescription>
              </EmptyHeader>
            </Empty>
          )}
        </CommandEmpty>
        <CommandGroup heading="People">
          <CommandItem>Ada Lovelace</CommandItem>
          <CommandItem>Alan Turing</CommandItem>
          <CommandItem>Grace Hopper</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

## Props in this example

### Empty

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"default" \| "sm"` | `"default"` | sm tightens padding, gaps, the icon tile and the title. |

### EmptyMedia

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "icon" \| "stack"` | `"default"` | icon puts an icon in a muted tile. stack raises the tile over two fanned cards that spread when the empty state is hovered. Both hide the media from assistive tech. |

## More Empty examples

- [Entrance](https://hextaui.com/docs/empty/examples/transition.md)
- [Outline](https://hextaui.com/docs/empty/examples/outline.md)
- [Muted](https://hextaui.com/docs/empty/examples/muted.md)
- [Small](https://hextaui.com/docs/empty/examples/small.md)
- [Avatar](https://hextaui.com/docs/empty/examples/avatar.md)
- [Avatar group](https://hextaui.com/docs/empty/examples/avatar-group.md)
- [Image](https://hextaui.com/docs/empty/examples/image.md)
- [No search results](https://hextaui.com/docs/empty/examples/search-results.md)
- [In a card](https://hextaui.com/docs/empty/examples/in-card.md)
- [In a table](https://hextaui.com/docs/empty/examples/in-table.md)
- [In a popover](https://hextaui.com/docs/empty/examples/in-popover.md)
- [Heading level](https://hextaui.com/docs/empty/examples/heading.md)
- [Long content](https://hextaui.com/docs/empty/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/empty/examples/rtl.md)