Sections

Components

Utilities

Forms

Hooks

useIsMobile

Command

Copy Markdown

Searchable command input with filtering.

Docs API

PreviewCode

Suggestions

Linear⌘L

Figma⌘F

Slack⌘S

YouTube⌘Y

Raycast⌘R

Settings

Settings⌘,

Help⌘?

About⌘I

Feedback⌘F

Support⌘S

Updates⌘U

Logout⌘L

Sign out⌘O

Installation#

CLIManual

pnpmbunnpmyarn

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#

PreviewCode

Open Command Palette

Groups#

Group related items with CommandGroup and the heading prop.

PreviewCode

Fruit

Apple

Banana

Cherry

Countries

United States

United Kingdom

Germany

Shortcuts#

Display keyboard shortcuts next to items with CommandShortcut.

PreviewCode

New File⌘N

Save⌘S

Copy⌘C

Paste⌘V

Undo⌘Z

Find⌘F

Add hints or actions in the footer with CommandFooter.

PreviewCode

App

Settings⌘,

Keyboard Shortcuts⌘K

Help⌘?

Select

Navigate

Scrollable#

Scrollable command menu with multiple items.

PreviewCode

Frameworks

Angular

Astro

Ember

Gatsby

Next.js

Nuxt.js

React

Remix

Solid

Svelte

Vue.js

Libraries

Alpine.js

jQuery

Lit

Preact

Qwik

Stencil

Meta-frameworks

Blitz.js

Redwood

T3 Stack

TanStack Start

Wasp

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"
`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"
`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 ](/docs/components/combobox)[

Context Menu ](/docs/components/context-menu)

On This Page

Installation Anatomy Usage Examples With Dialog Groups Shortcuts With Footer Scrollable API Reference Command CommandDialog CommandDialogTrigger CommandDialogContent CommandInput CommandContent CommandList CommandEmpty CommandGroup CommandGroupLabel CommandItem CommandSeparator CommandShortcut CommandFooter