Sections

Utilities

Forms

Hooks

useIsMobileNew

Command

Searchable command input with filtering.

Installation


pnpm dlx shadcn@latest add @shark/command

Anatomy


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

Usage


import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Command,
  CommandContent,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";


const { contains } = useFilter({ sensitivity: "base" });
const { collection, filter } = useListCollection({
  initialItems: [
    { label: "Search", value: "search", group: "Actions" },
    { label: "Settings", value: "settings", group: "Actions" },
  ],
  filter: contains,
  groupBy: (item) => item.group, // optional
});
 
<Command
  collection={collection}
  onInputValueChange={({ inputValue }) => filter(inputValue)}
>
  <CommandInput placeholder="Search..." />
  <CommandContent>
    <CommandEmpty />
    <CommandList>
      {collection.group().map(([group, items]) => (
        <CommandGroup heading={group} key={group}>
          {items.map((item) => (
            <CommandItem item={item} key={item.value}>
              {item.label}
            </CommandItem>
          ))}
        </CommandGroup>
      ))}
    </CommandList>
  </CommandContent>
</Command>

Examples

With Dialog

Groups

Group related items with CommandGroup and the heading prop.

Shortcuts

Display keyboard shortcuts next to items with CommandShortcut.

With Footer

Add hints or actions in the footer with CommandFooter.

Select

Navigate

Scrollable

Scrollable command menu with multiple items.

API Reference

Command

Root component.

Prop	Type	Default
`collection`	`ListCollection<T>`	required
`value`	`string \| string[]`	-
`defaultValue`	`string \| string[]`	-
`onValueChange`	`(details: ValueChangeDetails<T>) => void`	-
`onInputValueChange`	`(details: InputValueChangeDetails) => void`	-
`disabled`	`boolean`	-
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`className`	`string`	-

CommandDialog

Dialog root for the command palette. Same as Dialog.

Prop	Type	Default
`open`	`boolean`	-
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`({ open }: OpenChangeDetails) => void`	-
`className`	`string`	-

CommandDialogTrigger

Opens the command palette on click. Same as DialogTrigger.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	-

CommandDialogContent

Container for the command palette inside the dialog.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "fullscreen"`	`"lg"`
`title`	`string`	`"Command Palette"`
`description`	`string`	`"Search for a command to run..."`
`className`	`string`	-

CommandInput

Search input with icon. Uses InputGroup for layout.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`placeholder`	`string`	-
`disabled`	`boolean`	-
`className`	`string`	-

CommandContent

Scrollable content container for the command list.

Prop	Type	Default
`className`	`string`	-

CommandList

List container for command items.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

CommandEmpty

Content when no items match the filter.

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	`No results found.`
`asChild`	`boolean`	-

CommandGroup

Groups related items.

Prop	Type	Default
`heading`	`string \| ReactNode`	-
`className`	`string`	-
`asChild`	`boolean`	-

CommandGroupLabel

Label for a group.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

CommandItem

A single command or action in the palette.

Prop	Type	Default
`item`	`T`	required
`className`	`string`	-

CommandSeparator

Visual divider between groups or items. Uses Separator.

Prop	Type	Default
`className`	`string`	-

CommandShortcut

Keyboard shortcut hint shown next to a command.

Prop	Type	Default
`className`	`string`	-

CommandFooter

Footer area for hints, tips, or extra actions.

Prop	Type	Default
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

Combobox

Context Menu