Command

Eine durchsuchbare Liste von Aktionen, inline oder als ⌘K-Palette, mit Seiten, Tastenkürzeln und hervorgehobenen Treffern.

Command menu

import {
  IconCalculator,
  IconCalendar,
  IconCreditCard,
  IconMoodSmile,
  IconSettings,
  IconUser,
} from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"

export function CommandDemo() {
  return (
    <Command highlight className="w-full max-w-sm">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <IconCalendar />
            Calendar
          </CommandItem>
          <CommandItem>
            <IconMoodSmile />
            Search Emoji
          </CommandItem>
          <CommandItem disabled>
            <IconCalculator />
            Calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem shortcut="mod+p">
            <IconUser />
            Profile
          </CommandItem>
          <CommandItem shortcut="mod+b">
            <IconCreditCard />
            Billing
          </CommandItem>
          <CommandItem shortcut="mod+,">
            <IconSettings />
            Settings
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/command.json

Fügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.

Füge die Theme-Tokens zu deinem globalen CSS hinzu, falls du das noch nicht getan hast.

Installiere die Abhängigkeiten.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cmdk cn

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

components/ui/command.tsx

"use client"

import * as React from "react"
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
import { IconChevronLeft, IconSearch, IconX } from "@tabler/icons-react"
import { Command as CommandPrimitive, useCommandState } from "cmdk"
import { cn } from "cn"

components/ui/button.tsx

"use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

lib/motion.ts

import * as React from "react"

const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
  "linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"

const duration = {

Passe die Importpfade an dein Projekt-Setup an.

Verwendung

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"

<Command>
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem onSelect={() => openCalendar()}>Calendar</CommandItem>
      <CommandItem shortcut="mod+p">Profile</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Hotkeys verwenden mod für ⌘ auf Apple-Geräten und Strg überall sonst. Labels werden automatisch pro Plattform formatiert.

Komposition

Command
├── CommandInput
├── CommandList
│   ├── CommandEmpty
│   ├── CommandLoading
│   ├── CommandGroup
│   │   └── CommandItem
│   │       └── CommandShortcut
│   ├── CommandSeparator
│   └── CommandPage
│       └── CommandGroup
└── CommandFooter

CommandDialog
└── Command

Beispiele

Einfach

Tippen filtert und sortiert Einträge laufend. Gruppen ohne Treffer verschwinden, und die Listenhöhe animiert sich an das, was übrig bleibt.

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"

export function CommandBasic() {
  return (
    <Command className="w-full max-w-sm">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>Profile</CommandItem>
          <CommandItem>Billing</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Setze ein <Command /> in <CommandDialog /> und schalte es mit useCommandHotkey um. Drücke ⌘K oder Strg+K. Eintrags-Kürzel laufen, solange es geöffnet ist, Treffer werden hervorgehoben, und preserveSearch behält Suchbegriff und Auswahl für das nächste Öffnen.

"use client"

import * as React from "react"
import {
  IconCalculator,
  IconCalendar,
  IconCheck,
  IconCreditCard,
  IconExternalLink,
  IconMoodSmile,
  IconPalette,
  IconPoint,
  IconSettings,
  IconUser,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandFooter,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPage,
  CommandSeparator,
  CommandShortcut,
  useCommandHotkey,
} from "@/components/ui/command"

export function CommandDialogDemo() {
  const [open, setOpen] = React.useState(false)
  const [last, setLast] = React.useState<string>()
  const [theme, setTheme] = React.useState("System")

  useCommandHotkey("mod+k", () => setOpen((value) => !value))

  const run = (action: string) => {
    setLast(action)
    setOpen(false)
  }

  return (
    <div className="flex flex-col items-center gap-3">
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open palette
        <CommandShortcut hotkey="mod+k" />
      </Button>
      <p className="text-sm text-muted-foreground">
        {last ? `Ran “${last}”.` : "Nothing run yet."} Theme: {theme}.
      </p>
      <CommandDialog open={open} onOpenChange={setOpen} preserveSearch>
        <Command highlight>
          <CommandInput placeholder="Type a command or search…" />
          <CommandList>
            <CommandEmpty>
              {(search) => `No results for “${search}”.`}
            </CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem
                shortcut="mod+shift+c"
                onSelect={() => run("Calendar")}
              >
                <IconCalendar />
                Calendar
              </CommandItem>
              <CommandItem onSelect={() => run("Search Emoji")}>
                <IconMoodSmile />
                Search Emoji
              </CommandItem>
              <CommandItem disabled>
                <IconCalculator />
                Calculator
              </CommandItem>
              <CommandItem page="theme" pageTitle="Theme">
                <IconPalette />
                Change theme…
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem shortcut="mod+p" onSelect={() => run("Profile")}>
                <IconUser />
                Profile
              </CommandItem>
              <CommandItem shortcut="mod+b" onSelect={() => run("Billing")}>
                <IconCreditCard />
                Billing
              </CommandItem>
              <CommandItem
                shortcut="mod+,"
                keywords={["preferences", "options"]}
                onSelect={() => run("Settings")}
              >
                <IconSettings />
                Settings
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Links">
              <CommandItem href="/docs" onSelect={() => setOpen(false)}>
                <IconExternalLink />
                All components
              </CommandItem>
            </CommandGroup>
            <CommandPage id="theme">
              <CommandGroup heading="Theme">
                {["Light", "Dark", "System"].map((option) => (
                  <CommandItem
                    key={option}
                    onSelect={() => {
                      setTheme(option)
                      run(`Theme: ${option}`)
                    }}
                  >
                    {option === theme ? <IconCheck /> : <IconPoint />}
                    {option}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandPage>
          </CommandList>
          <CommandFooter />
        </Command>
      </CommandDialog>
    </div>
  )
}

Seiten

Ein Eintrag mit page öffnet das passende <CommandPage />. Der Seitentitel erscheint als Chip im Input, die Liste gleitet seitlich herein, und Backspace bei leerer Suche oder Escape geht zurück.

"use client"

import * as React from "react"
import {
  IconBrandGithub,
  IconFolder,
  IconFolderPlus,
  IconUsers,
} from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPage,
} from "@/components/ui/command"

const projects = ["hextaui", "marketing-site", "design-tokens"]
const members = ["Ada Lovelace", "Grace Hopper", "Alan Turing"]

export function CommandPages() {
  const [last, setLast] = React.useState<string>()

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Command>
        <CommandInput placeholder="Search…" />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Workspace">
            <CommandItem page="projects" pageTitle="Projects">
              <IconFolder />
              Projects
            </CommandItem>
            <CommandItem page="members" pageTitle="Members">
              <IconUsers />
              Members
            </CommandItem>
            <CommandItem onSelect={() => setLast("New project")}>
              <IconFolderPlus />
              New project
            </CommandItem>
          </CommandGroup>
          <CommandPage id="projects">
            <CommandGroup heading="Projects">
              {projects.map((project) => (
                <CommandItem key={project} onSelect={setLast}>
                  <IconBrandGithub />
                  {project}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandPage>
          <CommandPage id="members">
            <CommandGroup heading="Members">
              {members.map((member) => (
                <CommandItem key={member} onSelect={setLast}>
                  <IconUsers />
                  {member}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandPage>
        </CommandList>
      </Command>
      <p className="text-sm text-muted-foreground">
        {last ? `Selected “${last}”.` : "Nothing selected yet."}
      </p>
    </div>
  )
}

Scrollbar

Lange Listen scrollen in einer begrenzten Höhe. Der ausgewählte Eintrag bleibt beim Bewegen per Tastatur immer im Sichtbereich.

import { IconFileText } from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

const documents = Array.from({ length: 60 }, (_, index) => ({
  id: index + 1,
  title: `Document ${String(index + 1).padStart(2, "0")}`,
}))

export function CommandScrollable() {
  return (
    <Command className="w-full max-w-sm">
      <CommandInput placeholder="Search 60 documents…" />
      <CommandList>
        <CommandEmpty>No documents match.</CommandEmpty>
        <CommandGroup heading="Documents">
          {documents.map((doc) => (
            <CommandItem key={doc.id}>
              <IconFileText />
              {doc.title}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Asynchrone Ergebnisse

Setze shouldFilter={false} und rendere die Ergebnisse, die du lädst. <CommandLoading /> wartet 150 ms, bevor es erscheint, und bleibt dann mindestens 300 ms, sodass schnelle Antworten nie einen Spinner aufblitzen lassen. Probiere beide Latenzen aus.

"use client"

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

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandLoading,
  useCommandLoading,
} from "@/components/ui/command"

const people = [
  "Ada Lovelace",
  "Alan Turing",
  "Grace Hopper",
  "Katherine Johnson",
  "Linus Torvalds",
  "Margaret Hamilton",
  "Tim Berners-Lee",
]

export function CommandAsync() {
  const [query, setQuery] = React.useState("")
  const [results, setResults] = React.useState(people)
  const [loading, setLoading] = React.useState(false)
  const [latency, setLatency] = React.useState(700)
  const pending = useCommandLoading(loading)
  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)

  React.useEffect(() => () => clearTimeout(timerRef.current), [])

  const search = (nextQuery: string, nextLatency: number) => {
    clearTimeout(timerRef.current)
    setLoading(true)
    timerRef.current = setTimeout(() => {
      setResults(
        people.filter((person) =>
          person.toLowerCase().includes(nextQuery.toLowerCase())
        )
      )
      setLoading(false)
    }, nextLatency)
  }

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex gap-2">
        {[80, 700].map((ms) => (
          <Button
            key={ms}
            size="sm"
            variant={latency === ms ? "secondary" : "outline"}
            onClick={() => {
              setLatency(ms)
              search(query, ms)
            }}
          >
            {ms} ms
          </Button>
        ))}
      </div>
      <Command shouldFilter={false} highlight>
        <CommandInput
          placeholder="Search people…"
          value={query}
          onValueChange={(next) => {
            setQuery(next)
            search(next, latency)
          }}
        />
        <CommandList>
          <CommandLoading loading={loading}>Searching…</CommandLoading>
          <CommandEmpty>
            {(value) => `No people match “${value}”.`}
          </CommandEmpty>
          {pending ? null : (
            <CommandGroup heading="People">
              {results.map((person) => (
                <CommandItem key={person}>
                  <IconUser />
                  {person}
                </CommandItem>
              ))}
            </CommandGroup>
          )}
        </CommandList>
      </Command>
    </div>
  )
}

Langer Inhalt

Überschriften werden umgebrochen, lange Namen werden je nach Wunsch gekürzt oder umgebrochen, und Kürzel werden nie hinausgedrängt.

import { IconFileText } from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

export function CommandLongContent() {
  return (
    <Command className="w-full max-w-72">
      <CommandInput placeholder="Search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="A group heading that is long enough to wrap onto two lines">
          <CommandItem>
            <IconFileText />
            <span className="min-w-0 truncate">
              quarterly-planning-final-final-v2-reviewed-by-legal.pdf
            </span>
            <CommandShortcut>⌘⇧O</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <IconFileText />
            <span className="min-w-0 wrap-anywhere">
              averyveryverylongunbrokenfilenamethatshouldwrapinsteadofescaping.txt
            </span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Rechts nach links

Icons, Kürzel, der Seiten-Chip und das Gleiten der Seite folgen alle der Leserichtung.

import { IconCalendar, IconSettings } from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

export function CommandRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <Command dir="rtl">
        <CommandInput placeholder="ابحث عن أمر…" />
        <CommandList>
          <CommandEmpty>لا توجد نتائج.</CommandEmpty>
          <CommandGroup heading="اقتراحات">
            <CommandItem>
              <IconCalendar />
              التقويم
              <CommandShortcut>⌘T</CommandShortcut>
            </CommandItem>
            <CommandItem>
              <IconSettings />
              الإعدادات
              <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </div>
  )
}

Tastatur

Taste	Aktion
`↓`	Wählt den nächsten Eintrag aus.
`↑`	Wählt den vorherigen Eintrag aus.
`Alt↓`	Springt zum ersten Eintrag der nächsten Gruppe.
`Alt↑`	Springt zum ersten Eintrag der vorherigen Gruppe.
`Home`	Wählt den ersten Eintrag aus.
`End`	Wählt den letzten Eintrag aus.
`CtrlN`	Wählt den nächsten Eintrag aus. Strg+J funktioniert ebenfalls. Mit vimBindings abschaltbar.
`CtrlP`	Wählt den vorherigen Eintrag aus. Strg+K funktioniert ebenfalls. Mit vimBindings abschaltbar.
`Enter`	Führt den ausgewählten Eintrag aus. Bei einem Link-Eintrag öffnet ⌘ Enter oder Strg+Enter ihn in einem neuen Tab.
`Esc`	Leert zuerst die Suche, geht dann eine Seite zurück und schließt schließlich den Dialog.
`Backspace`	Geht eine Seite zurück, wenn die Suche leer ist.
`⌘P`	Jedes Eintrags-Kürzel führt seinen Eintrag aus, solange der Fokus im Command-Menü liegt.

Barrierefreiheit

Das Input ist eine Combobox, die auf den ausgewählten Eintrag zeigt, sodass Screenreader jeden Eintrag beim Bewegen ansagen.
Eine Live-Region mit polite-Priorität sagt kurz nach dem Aufhören des Tippens die Anzahl der Ergebnisse an und den Seitentitel, wenn du eine Seite öffnest oder verlässt. Ändere den Wortlaut mit formatResults und rootTitle.
<CommandDialog /> hat einen verborgenen Titel und eine verborgene Beschreibung, fängt den Fokus ein, solange es geöffnet ist, und gibt ihn beim Schließen an den Trigger zurück.
Eintrags-Kürzel werden mit aria-keyshortcuts bereitgestellt.
Bei reduzierter Bewegung laufen Einträge ohne Bestätigungsblinken, und Seiten blenden über, statt zu gleiten.

API-Referenz

Basiert auf cmdk, mit <CommandDialog /> auf dem Base UI Dialog. Teile akzeptieren die Props des cmdk-Teils, den sie umschließen.

Command

Prop	Typ	Standard
`label`Zugänglicher Name des Menüs.	`string`	`"Command menu"`
`highlight`Hebt die passenden Buchstaben in jedem Eintrag hervor und dimmt den Rest.	`boolean`	`false`
`shouldFilter`Auf false setzen, um die Einträge selbst zu filtern und zu sortieren, zum Beispiel wenn die Ergebnisse von einem Server kommen.	`boolean`	`true`
`filter`Gibt einen Wert von 0 (verborgen) bis 1 (bester Treffer) zurück.	`(value: string, search: string, keywords?: string[]) => number`	`–`
`value`Der Wert des ausgewählten Eintrags.	`string`	`–`
`defaultValue`	`string`	`–`
`onValueChange`	`(value: string) => void`	`–`
`loop`An den Enden der Liste umbrechen.	`boolean`	`false`
`vimBindings`Navigation mit Strg+N, J, P und K.	`boolean`	`true`
`disablePointerSelection`	`boolean`	`false`
`formatResults`Text, der Screenreadern nach dem Tippen angesagt wird.	`(count: number) => string`	`"3 results"`
`rootTitle`Wird angesagt, wenn du die letzte Seite verlässt und zur Wurzel zurückkehrst.	`string`	`"All commands"`

Attribut	Beschreibung
`data-slot="command"`	Das Root in CSS ansprechen.
`data-highlighting`	Vorhanden, solange highlight aktiv und die Suche nicht leer ist.
`--command-radius`	Äußerer Radius. Einträge leiten daraus einen konzentrischen Radius ab.
`--command-inset`	Padding zwischen dem Listenrand und ihren Einträgen.

CommandDialog

Prop	Typ	Standard
`open`	`boolean`	`–`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean, details) => void`	`–`
`preserveSearch`Hält den Dialog gemountet, sodass Suchbegriff, Seite und Auswahl das Schließen überstehen. Der Suchbegriff ist beim erneuten Öffnen markiert.	`boolean`	`false`
`title`Visuell verborgener Dialogtitel.	`string`	`"Command menu"`
`description`Visuell verborgene Dialogbeschreibung.	`string`	`"Search for a command to run."`
`showCloseButton`	`boolean`	`false`
`className`Wird auf das Dialog-Popup angewendet.	`string`	`–`

Attribut	Beschreibung
`data-slot="command-dialog"`	Das Dialog-Popup.
`data-slot="command-dialog-overlay"`	Der Hintergrund.
`data-open`	Vorhanden am Popup, solange es geöffnet ist.

CommandInput

Prop	Typ	Standard
`value`Gesteuerter Suchtext.	`string`	`–`
`onValueChange`	`(search: string) => void`	`–`
`placeholder`	`string`	`–`
`clearLabel`Zugänglicher Name des Löschen-Buttons.	`string`	`"Clear search"`
`backLabel`Zugänglicher Name des Seiten-Chips.	`(title: string) => string`	(title) => `Back from ${title}`

Attribut	Beschreibung
`data-slot="command-input"`	Das Input.
`data-slot="command-input-wrapper"`	Die Zeile mit Icon, Input und Löschen-Button.
`data-slot="command-clear"`	Der Löschen-Button, sichtbar sobald du tippst.
`data-slot="command-page-chip"`	Der Zurück-Chip, der auf einer Seite angezeigt wird.

CommandList

Prop	Typ	Standard
`label`Zugänglicher Name der Liste.	`string`	`–`

Attribut	Beschreibung
`data-slot="command-list"`	Die Liste.
`data-settled`	Vorhanden, sobald sich die Liste gemessen hat. Der Höhenübergang läuft nur, solange es gesetzt ist.
`--cmdk-list-height`	Höhe der sichtbaren Einträge, zum Animieren der Liste verwendet.

CommandEmpty

Prop	Typ	Standard
`children`Verwende die Funktionsform, um die Suchanfrage wiederzugeben.	`ReactNode \| (search: string) => ReactNode`	`–`

Attribut	Beschreibung
`data-slot="command-empty"`	Verborgen, solange ein CommandLoading in der Liste ist.

CommandLoading

Prop	Typ	Standard
`loading`	`boolean`	`true`
`delay`Millisekunden, die gewartet wird, bevor der Spinner erscheint.	`number`	`150`
`minDuration`Mindestdauer in Millisekunden, die der Spinner nach dem Erscheinen bleibt.	`number`	`300`
`label`Zugängliches Label. Standardmäßig String-Kinder.	`string`	`–`
`progress`	`number`	`–`

Attribut	Beschreibung
`data-slot="command-loading"`	Die Ladezeile.
`data-pending`	Vorhanden während der Verzögerung, solange die Zeile angesagt, aber noch nicht sichtbar ist.

CommandGroup

Prop	Typ	Standard
`heading`	`ReactNode`	`–`
`value`Erforderlich, wenn es keine Überschrift gibt.	`string`	`–`
`forceMount`Hält die Gruppe beim Filtern sichtbar.	`boolean`	`false`

Attribut	Beschreibung
`data-slot="command-group"`	Die Gruppe.
`[cmdk-group-heading]`	Das Überschriftenelement.

CommandItem

Prop	Typ	Standard
`onSelect`Läuft bei Klick, Enter oder dem Kürzel des Eintrags, nach dem Bestätigungsblinken.	`(value: string) => void`	`–`
`value`Wird zum Filtern verwendet. Standardmäßig der Text des Eintrags, ohne das Kürzel.	`string`	`–`
`keywords`Zusätzliche Wörter, die zu diesem Eintrag passen.	`string[]`	`–`
`disabled`	`boolean`	`false`
`shortcut`Ein Hotkey wie "mod+shift+c". Wird am Eintrag angezeigt und führt ihn aus, solange der Fokus im Menü liegt.	`string`	`–`
`page`Öffnet die CommandPage mit dieser ID, statt auszuführen.	`string`	`–`
`pageTitle`Titel, der im Seiten-Chip angezeigt wird. Standardmäßig der Wert.	`string`	`–`
`href`Rendert den Eintrag als Link. Enter folgt ihm, ⌘ oder Strg+Enter öffnet einen neuen Tab.	`string`	`–`
`render`Ein Link-Element, das stattdessen gerendert wird, etwa Next.js <Link />.	`ReactElement`	`–`
`confirm`Lässt den Eintrag kurz blinken, bevor er ausgeführt wird, damit die Auswahl wahrgenommen wird.	`boolean`	`true`
`forceMount`Hält den Eintrag beim Filtern sichtbar.	`boolean`	`false`

Attribut	Beschreibung
`data-slot="command-item"`	Der Eintrag.
`data-selected="true"`	Vorhanden am ausgewählten Eintrag.
`data-disabled="true"`	Vorhanden an deaktivierten Einträgen.
`data-value`	Der Wert, der zum Filtern verwendet wird.
`data-confirming`	Vorhanden während des Bestätigungsblinkens.
`data-page`	Vorhanden an Einträgen, die eine Seite öffnen.

CommandPage

Prop	Typ	Standard
`id`Entspricht der page-Prop des Eintrags, der sie öffnet. Ihre Gruppen und Einträge werden nur gerendert, solange sie die aktuelle Seite ist.	`string`	`–`

CommandShortcut

Prop	Typ	Standard
`hotkey`Formatiert einen Hotkey wie "mod+k" für die aktuelle Plattform. Kinder überschreiben es.	`string`	`–`

Attribut	Beschreibung
`data-slot="command-shortcut"`	Das Kürzel-Label.

CommandSeparator

Prop	Typ	Standard
`alwaysRender`Hält ihn bei der Suche sichtbar.	`boolean`	`false`

Attribut	Beschreibung
`data-slot="command-separator"`	Das Trennzeichen.

CommandFooter

Prop	Typ	Standard
`children`Standardmäßig Tastenhinweise, die sich auf einer Seite aktualisieren. Auf Touchscreens ausgeblendet.	`ReactNode`	`–`

Attribut	Beschreibung
`data-slot="command-footer"`	Der Footer.

useCommandHotkey

const [open, setOpen] = React.useState(false)

useCommandHotkey("mod+k", () => setOpen((value) => !value))

Prop	Typ	Standard
`hotkey`Es wird auf dem gesamten Dokument gelauscht. Hotkeys ohne Modifier werden ignoriert, während du in ein Feld tippst.	`string`	`–`
`callback`	`(event: KeyboardEvent) => void`	`–`
`options.enabled`	`boolean`	`true`

useCommandLoading

Gibt zurück, ob ein Ladeindikator sichtbar sein soll, mit derselben Verzögerung und Mindestdauer wie <CommandLoading />. Verwende es, um veraltete Ergebnisse auszublenden, während eine Anfrage läuft.

Prop	Typ	Standard
`loading`	`boolean`	`–`
`options.delay`	`number`	`150`
`options.minDuration`	`number`	`300`

Weitere Hooks

useCommandPages() gibt { pages, page, push, pop, reset } zurück, um Seiten aus deinem eigenen Code zu steuern.
useCommandState(selector) liest den cmdk-State, etwa die Suche oder die Anzahl gefilterter Einträge.
useHotkeyLabel(hotkey) formatiert einen Hotkey für die aktuelle Plattform, etwa ⌘K oder Strg+K.

In Blocks verwendet

Blocks, die auf Command aufbauen.

Chat SidebarDie Seitenleiste für eine Chat-App. Logo, Suche und Neuer Chat oben, deine eigenen Links darunter, angeheftete Chats, Projekte, die sich aufklappen und ihre Chats zeigen, zuletzt verwendete nach Tag gruppiert und Zeilen mit Hover- und Rechtsklick-Menüs, direktem Umbenennen, Löschen mit Rückgängig und Live-Antwortzuständen.