Command

󰕈

Import

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandGroupHeading,
  CommandItem,
  CommandSeparator,
  CommandDialog,
} from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/CommandExample.tsx

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandGroupHeading,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@pelagornis/page/components";

export default function CommandDemo() {
  return (
    <Command label="Commands" className="w-full max-w-sm">
      <CommandInput placeholder="Search commands…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup>
          <CommandGroupHeading>File</CommandGroupHeading>
          <CommandItem value="new" shortcut="⌘N">
            New file
          </CommandItem>
          <CommandItem value="open">Open</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup>
          <CommandGroupHeading>Edit</CommandGroupHeading>
          <CommandItem value="copy">Copy</CommandItem>
          <CommandItem value="paste">Paste</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Use in MDX

Command is composed from parts that share React state. Children written in MDX are rendered as separate islands, so the parts can’t reach each other. Put the composition in a .tsx file, like the example above, and import that file instead.

src/content/docs/example.mdx

---
title: Example
---

import CommandExample from "../../components/CommandExample";

<CommandExample client:load />

client:load hydrates the island on page load. Use client:visible for content far down the page.

Use in Markdoc

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

src/components/markdoc/CommandExample.astro

---
import CommandExample from "../CommandExample";
---

<CommandExample client:load />

markdoc.config.mjs

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "command-example": {
      render: component("./src/components/markdoc/CommandExample.astro"),
      selfClosing: true,
    },
  },
});

src/content/docs/example.mdoc

{% command-example /%}

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	command
empty	command-empty
group	command-group
group_heading	command-group-heading
indicator	command-indicator
input	command-input
item	command-item
list	command-list
separator	command-separator
shortcut	command-shortcut

States

States the component styles. Component states are exposed as data attributes.

Kind	States
Pseudo	focus-visible
data-state	disabled active default

Keyboard

Keys the component handles when it has focus.

Key	Action
ArrowDown	next-trigger
ArrowUp	previous-trigger
Home	first-trigger
End	last-trigger
Enter	activate

Reference

• RefineUI · Command for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.