Command

A command palette: type to filter, arrows to move, Enter to run. Items are data rather than children, because filtering has to reorder and hide them.

src/components/ui/command.tsx

About

From the component's own source, where it was written.

A command palette: type to filter, arrows to move, Enter to run.

Items are data rather than children, because filtering has to reorder and hide them — doing that over arbitrary JSX means walking the tree and guessing what is searchable. Groups collapse when every item in them is filtered out.

Install

npx astralyx-ui add command

Usage

import { CommandDialog } from '@/components/ui/command'

<CommandDialog open={open} onOpenChange={setOpen} items={commands} />

Composer

Change the props and the source below follows.

Actions

New project⌘N

Search files⌘P

Copy link

Go to

Documentation

Settings⌘,

Profile

Danger

Delete project

Props

inline (not modal)

tsx

<CommandList items={commands} />

Examples

Inline

tsx

<CommandList items={commands} />

As a modal

tsx

<CommandDialog open={open} onOpenChange={setOpen} items={commands} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`CommandList`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
autoFocus	boolean	true	—
items	CommandItem[]	required	{ id, label, group?, icon?, shortcut?, keywords?, disabled?, onSelect? }
emptyMessage	string	'No results'	—
placeholder	string	'Type a command or search…'	—
onRun	(item: CommandItem) => void	—	—

`CommandDialog`

The palette in a native <dialog>, which is how it is normally used.

Extends ComponentProps<typeof CommandList>.

Prop	Type	Default	Description
open	boolean	—	—
onOpenChange	(open: boolean) => void	—	—
items	CommandItem[]	required	{ id, label, group?, icon?, shortcut?, keywords?, disabled?, onSelect? }
autoFocus	boolean	—	—
emptyMessage	string	—	—
placeholder	string	—	—
onRun	(item: CommandItem) => void	—	—

Types

`CommandItem`

A command palette: type to filter, arrows to move, Enter to run.

Field	Type	Description
id	string	—
label	string	—
group?	string	Section heading. Groups collapse when every item in them is filtered out.
shortcut?	string	—
icon?	ReactNode	—
keywords?	string	Extra search terms that are not shown — "find open" makes "Search files" match "open".
disabled?	boolean	—
onSelect?	() => void	—

Behaviour

Topic	Detail	Description
ranking	prefix first	A prefix match on the label ranks above a match anywhere else in the item.