Command

Filterable command palette with grouped actions.

Installation

npx @noarka/cli add command

Usage

tsx

import {  Command,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,  CommandList,} from "@noarka/ui";

tsx

<Command className="border">  <CommandInput placeholder="Search commands..." />  <CommandList>    <CommandEmpty>No results found.</CommandEmpty>    <CommandGroup heading="Suggestions">      <CommandItem value="docs">Documentation</CommandItem>      <CommandItem value="themes">Themes</CommandItem>    </CommandGroup>  </CommandList></Command>

Examples

With groups

Split actions into labelled groups with a separator.

With shortcuts

Hint at keyboard equivalents beside each action.

Disabled item

Items can be locked so they cannot be selected.

API reference

Command

Prop	Type	Default
`label` Accessible label for the menu. Not shown visibly.	`string`	`-`
`shouldFilter` Set to false to turn off automatic filtering and sort yourself.	`boolean`	`true`
`filter` Custom match score from 0 (hidden) to 1 (best match). Defaults to the command-score filter.	`(value: string, search: string, keywords?: string[]) => number`	`-`
`defaultValue` Initially selected item value when uncontrolled.	`string`	`-`
`value` Controlled selected item value. Use with onValueChange.	`string`	`-`
`onValueChange` Called when the selected item changes.	`(value: string) => void`	`-`
`loop` Loop arrow key navigation around the ends of the list.	`boolean`	`false`
`disablePointerSelection` Set to true to disable selection via pointer events.	`boolean`	`false`
`vimBindings` Set to false to disable ctrl+n/j/p/k shortcuts.	`boolean`	`true`
`className` Additional classes merged with the default menu styles.	`string`	`-`

CommandInput

Prop	Type	Default
`value` Controlled search text. Use with onValueChange.	`string`	`-`
`onValueChange` Called when the search text changes.	`(search: string) => void`	`-`
`placeholder` Hint text shown while the search is empty.	`string`	`-`
`disabled` Disable the search input.	`boolean`	`false`
`className` Additional classes merged with the default input styles.	`string`	`-`

CommandList

Prop	Type	Default
`label` Accessible label for the list of suggestions. Not shown visibly.	`string`	`"Suggestions"`
`className` Additional classes merged with the default list styles.	`string`	`-`

CommandEmpty

Prop	Type	Default
`children` Shown automatically when the search matches nothing.	`ReactNode`	`-`
`className` Additional classes merged with the default empty styles.	`string`	`-`

CommandGroup

Prop	Type	Default
`heading` Heading rendered above the grouped items.	`ReactNode`	`-`
`value` Unique group value. Required when no heading is provided.	`string`	`-`
`forceMount` Always render the group even when filtering hides it.	`boolean`	`-`
`className` Additional classes merged with the default group styles.	`string`	`-`

CommandItem

Prop	Type	Default
`value` Unique value for the item. Inferred from the text content when omitted, so pass a stable value when the content changes between renders.	`string`	`-`
`keywords` Extra keywords matched against when filtering.	`string[]`	`-`
`onSelect` Called when the item is selected via click or keyboard.	`(value: string) => void`	`-`
`disabled` Disable the item so it cannot be selected.	`boolean`	`false`
`forceMount` Always render the item even when filtering hides it.	`boolean`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

CommandSeparator

Prop	Type	Default
`alwaysRender` Always render the separator. By default it hides while searching.	`boolean`	`-`
`className` Additional classes merged with the default separator styles.	`string`	`-`

CommandShortcut

Prop	Type	Default
`className` Additional classes merged with the default shortcut hint styles.	`string`	`-`