Command

A command palette with search, groups and shortcuts (⌘K).

Import

tsx

import { Command } from "@indoku/ui"

Examples

Basic usage

tsx

function CommandDemo() {  const [open, setOpen] = useState(false)  const [picked, setPicked] = useState<string | null>(null)  return (    <Stack gap="2">      <HStack gap="3">        <Button variant="outline" size="sm" onClick={() => setOpen(true)}>          Open command palette          <Command.Shortcut position="static" ms="2">            ⌘K          </Command.Shortcut>        </Button>        {picked && <Text fontSize="sm" color="fg.muted">Picked: {picked}</Text>}      </HStack>      <Command.Dialog open={open} onOpenChange={setOpen} hotkey="k" title="Command palette">        <Command.Input placeholder="Type a command or search..." />        <Command.List>          <Command.Empty />          <Command.Group heading="Suggestions">            <Command.Item value="Calendar" onSelect={(v) => { setPicked(v); setOpen(false) }}>              Calendar            </Command.Item>            <Command.Item value="Search Emoji" onSelect={(v) => { setPicked(v); setOpen(false) }}>              Search Emoji            </Command.Item>            <Command.Item value="Calculator" keywords={["math"]} onSelect={(v) => { setPicked(v); setOpen(false) }}>              Calculator            </Command.Item>          </Command.Group>          <Command.Separator />          <Command.Group heading="Settings">            <Command.Item value="Profile" onSelect={(v) => { setPicked(v); setOpen(false) }}>              Profile              <Command.Shortcut>⌘P</Command.Shortcut>            </Command.Item>            <Command.Item value="Billing" onSelect={(v) => { setPicked(v); setOpen(false) }}>              Billing              <Command.Shortcut>⌘B</Command.Shortcut>            </Command.Item>          </Command.Group>        </Command.List>      </Command.Dialog>    </Stack>  )}

Props

Root

Prop	Type	Default	Description
`shouldFilter`	`boolean`	`true`	Turn off built-in filtering when you filter yourself (e.g. server results).
`search`	`string`	–	Controlled search text.
`onSearchChange`	`(search: string) => void`	–
`loop`	`boolean`	`true`	Arrow down on the last item wraps to the first.

Group

Prop	Type	Default	Description
`heading`	`ReactNode`	–

Item

Prop	Type	Default	Description
`value`	`string`	–	Text matched against the search. Defaults to `children` when it is a string.
`keywords`	`string[]`	–	Extra keywords used by search.
`disabled`	`boolean`	–
`onSelect`	`(value: string) => void`	–

Dialog

Prop	Type	Default	Description
`open*`	`boolean`	–
`onOpenChange*`	`(open: boolean) => void`	–
`hotkey`	`string`	–	Shortcut letter (used with Cmd/Ctrl), e.g. `"k"` for Cmd/Ctrl+K.
`title`	`string`	–	Accessible label of the dialog.

* required. Style props and HTML attributes are accepted as well.

← Popover Dialog →

Created by @indokudev