Sections

Utilities

Command

Searchable command input with filtering.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/command.json

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

Use <CommandDialog />, <CommandDialogTrigger />, and <CommandDialogContent /> for the modal pattern.

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

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. Often uses a search icon.

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
`children`	`ReactNode`	-
`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.