Command

Command is a keyboard-accessible command menu component for quick access to actions and navigation.

Command menus provide a keyboard-first interface for users to quickly search and execute commands, navigate to different sections, or access functionality without leaving the keyboard. They typically appear as a searchable list of actions, often triggered by keyboard shortcuts, and filter results as users type. Command menus are particularly popular in modern applications as they improve efficiency for power users and reduce the cognitive load of navigating complex menu hierarchies.

Use command menus to provide quick access to frequently used actions, global navigation, or search functionality. They're most effective in applications with many features where keyboard shortcuts and fast navigation are valuable to users. Command menus should include clear, descriptive labels for each command and optionally display keyboard shortcuts to help users learn efficient workflows.

Example

"use client"

import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@strongtie/design-system/command"

export function CommandDefault() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
        <CommandItem>Settings</CommandItem>
        <CommandItem>Profile</CommandItem>
      </CommandList>
    </Command>
  )
}

Installation


npm install @strongtie/design-system

import { Command } from "@strongtie/design-system/command"

Components

This module exports the following components:

Command
CommandDialog
CommandInput
CommandList
CommandEmpty
CommandGroup
CommandItem
CommandShortcut
CommandSeparator

Props

`<Command>`

Prop	Type	Default	Description
`disablePointerSelection`	`boolean`	-	Optionally set to `true` to disable selection via pointer events.
`filter`	`CommandFilter`	-	Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the `command-score` library.
`label`	`string`	-	Accessible label for this command menu. Not shown visibly.
`loop`	`boolean`	-	Optionally set to `true` to turn on looping around when using the arrow keys.
`onValueChange`	`((value: string) => void)`	-	Event handler called when the selected item of the menu changes.
`shouldFilter`	`boolean`	-	Optionally set to `false` to turn off the automatic filtering and sorting. If `false`, you must conditionally render valid items based on the search query yourself.
`value`	`string`	-	Optional controlled state of the selected command menu item.
`vimBindings`	`boolean`	-	Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.

`<CommandDialog>`

Prop	Type	Default
`description`	`string`	-
`showCloseButton`	`boolean`	-
`title`	`string`	-

`<CommandInput>`

Prop	Type	Default	Description
`onValueChange`	`((search: string) => void)`	-	Event handler called when the search value changes.
`value`	`string`	-	Optional controlled state for the value of the search input.

`<CommandList>`

Prop	Type	Default	Description
`label`	`string`	-	Accessible label for this List of suggestions. Not shown visibly.

`<CommandGroup>`

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Whether this group is forcibly rendered regardless of filtering.
`heading`	`ReactNode`	-	Optional heading to render for this group.
`value`	`string`	-	If no heading is provided, you must provide a value that is unique for this group.

`<CommandItem>`

Prop	Type	Default	Description
`disabled`	`boolean`	-	Whether this item is currently disabled.
`forceMount`	`boolean`	-	Whether this item is forcibly rendered regardless of filtering.
`keywords`	`string[]`	-	Optional keywords to match against when filtering.
`onSelect`	`((value: string) => void)`	-	Event handler for when this item is selected, either via click or keyboard selection.
`value`	`string`	-	A unique value for this item. If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you must provide a stable, unique `value`.

`<CommandSeparator>`

Prop	Type	Default	Description
`alwaysRender`	`boolean`	-	Whether this separator should always be rendered. Useful if you disable automatic filtering.

Examples

"use client"

import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@strongtie/design-system/command"

export function CommandDefault() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
        <CommandItem>Settings</CommandItem>
        <CommandItem>Profile</CommandItem>
      </CommandList>
    </Command>
  )
}

Dialog

Press ⌘K

"use client"

import * as React from "react"
import { Button } from "@strongtie/design-system/button"
import {
  CommandDialog,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@strongtie/design-system/command"

export function CommandDialogExample() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open Command Menu
      </Button>
      <p className="text-muted-foreground mt-2 text-sm">
        Press{" "}
        <kbd className="bg-muted pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
          <span className="text-xs">⌘</span>K
        </kbd>
      </p>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandItem onSelect={() => setOpen(false)}>Calendar</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>
            Search Emoji
          </CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Calculator</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Settings</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Profile</CommandItem>
        </CommandList>
      </CommandDialog>
    </>
  )
}

With Groups

"use client"

import {
  CalendarIcon,
  FaceIcon,
  GearIcon,
  MagnifyingGlassIcon,
  PersonIcon,
  RocketIcon,
} from "@radix-ui/react-icons"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@strongtie/design-system/command"

export function CommandWithGroups() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            Calendar
          </CommandItem>
          <CommandItem>
            <FaceIcon />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <RocketIcon />
            Launch
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <PersonIcon />
            Profile
          </CommandItem>
          <CommandItem>
            <GearIcon />
            Settings
          </CommandItem>
          <CommandItem>
            <MagnifyingGlassIcon />
            Search
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

With Shortcuts

"use client"

import {
  CalendarIcon,
  FaceIcon,
  GearIcon,
  PersonIcon,
  RocketIcon,
} from "@radix-ui/react-icons"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@strongtie/design-system/command"

export function CommandWithShortcuts() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            Calendar
            <CommandShortcut>⌘C</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <FaceIcon />
            Search Emoji
            <CommandShortcut>⌘E</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <RocketIcon />
            Launch
            <CommandShortcut>⌘L</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Settings">
          <CommandItem>
            <PersonIcon />
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <GearIcon />
            Settings
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

command
command-dialog
command-empty
command-group
command-input
command-item
command-list
command-separator
command-shortcut

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Combobox Context Menu

Command

Command is a keyboard-accessible command menu component for quick access to actions and navigation.

Example

"use client"

import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@strongtie/design-system/command"

export function CommandDefault() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
        <CommandItem>Settings</CommandItem>
        <CommandItem>Profile</CommandItem>
      </CommandList>
    </Command>
  )
}

Installation


npm install @strongtie/design-system

import { Command } from "@strongtie/design-system/command"

Components

This module exports the following components:

Command
CommandDialog
CommandInput
CommandList
CommandEmpty
CommandGroup
CommandItem
CommandShortcut
CommandSeparator

Props

`<Command>`

Prop	Type	Default	Description
`disablePointerSelection`	`boolean`	-	Optionally set to `true` to disable selection via pointer events.
`filter`	`CommandFilter`	-	Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the `command-score` library.
`label`	`string`	-	Accessible label for this command menu. Not shown visibly.
`loop`	`boolean`	-	Optionally set to `true` to turn on looping around when using the arrow keys.
`onValueChange`	`((value: string) => void)`	-	Event handler called when the selected item of the menu changes.
`shouldFilter`	`boolean`	-	Optionally set to `false` to turn off the automatic filtering and sorting. If `false`, you must conditionally render valid items based on the search query yourself.
`value`	`string`	-	Optional controlled state of the selected command menu item.
`vimBindings`	`boolean`	-	Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.

`<CommandDialog>`

Prop	Type	Default
`description`	`string`	-
`showCloseButton`	`boolean`	-
`title`	`string`	-

`<CommandInput>`

Prop	Type	Default	Description
`onValueChange`	`((search: string) => void)`	-	Event handler called when the search value changes.
`value`	`string`	-	Optional controlled state for the value of the search input.

`<CommandList>`

Prop	Type	Default	Description
`label`	`string`	-	Accessible label for this List of suggestions. Not shown visibly.

`<CommandGroup>`

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Whether this group is forcibly rendered regardless of filtering.
`heading`	`ReactNode`	-	Optional heading to render for this group.
`value`	`string`	-	If no heading is provided, you must provide a value that is unique for this group.

`<CommandItem>`

Prop	Type	Default	Description
`disabled`	`boolean`	-	Whether this item is currently disabled.
`forceMount`	`boolean`	-	Whether this item is forcibly rendered regardless of filtering.
`keywords`	`string[]`	-	Optional keywords to match against when filtering.
`onSelect`	`((value: string) => void)`	-	Event handler for when this item is selected, either via click or keyboard selection.
`value`	`string`	-	A unique value for this item. If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you must provide a stable, unique `value`.

`<CommandSeparator>`

Prop	Type	Default	Description
`alwaysRender`	`boolean`	-	Whether this separator should always be rendered. Useful if you disable automatic filtering.

Examples

"use client"

import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@strongtie/design-system/command"

export function CommandDefault() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
        <CommandItem>Settings</CommandItem>
        <CommandItem>Profile</CommandItem>
      </CommandList>
    </Command>
  )
}

Dialog

Press ⌘K

"use client"

import * as React from "react"
import { Button } from "@strongtie/design-system/button"
import {
  CommandDialog,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@strongtie/design-system/command"

export function CommandDialogExample() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open Command Menu
      </Button>
      <p className="text-muted-foreground mt-2 text-sm">
        Press{" "}
        <kbd className="bg-muted pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
          <span className="text-xs">⌘</span>K
        </kbd>
      </p>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandItem onSelect={() => setOpen(false)}>Calendar</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>
            Search Emoji
          </CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Calculator</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Settings</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Profile</CommandItem>
        </CommandList>
      </CommandDialog>
    </>
  )
}

With Groups

"use client"

import {
  CalendarIcon,
  FaceIcon,
  GearIcon,
  MagnifyingGlassIcon,
  PersonIcon,
  RocketIcon,
} from "@radix-ui/react-icons"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@strongtie/design-system/command"

export function CommandWithGroups() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            Calendar
          </CommandItem>
          <CommandItem>
            <FaceIcon />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <RocketIcon />
            Launch
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <PersonIcon />
            Profile
          </CommandItem>
          <CommandItem>
            <GearIcon />
            Settings
          </CommandItem>
          <CommandItem>
            <MagnifyingGlassIcon />
            Search
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

With Shortcuts

"use client"

import {
  CalendarIcon,
  FaceIcon,
  GearIcon,
  PersonIcon,
  RocketIcon,
} from "@radix-ui/react-icons"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@strongtie/design-system/command"

export function CommandWithShortcuts() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            Calendar
            <CommandShortcut>⌘C</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <FaceIcon />
            Search Emoji
            <CommandShortcut>⌘E</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <RocketIcon />
            Launch
            <CommandShortcut>⌘L</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Settings">
          <CommandItem>
            <PersonIcon />
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <GearIcon />
            Settings
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

command
command-dialog
command-empty
command-group
command-input
command-item
command-list
command-separator
command-shortcut

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Combobox Context Menu

Command

Example

Installation

Components

Props

<Command>

<CommandDialog>

<CommandInput>

<CommandList>

<CommandGroup>

<CommandItem>

<CommandSeparator>

Examples

Dialog

Command Palette

With Groups

With Shortcuts

Styling

Classes

Accessibility

Command

Example

Installation

Components

Props

<Command>

<CommandDialog>

<CommandInput>

<CommandList>

<CommandGroup>

<CommandItem>

<CommandSeparator>

Examples

Dialog

Command Palette

With Groups

With Shortcuts

Styling

Classes

Accessibility

`<Command>`

`<CommandDialog>`

`<CommandInput>`

`<CommandList>`

`<CommandGroup>`

`<CommandItem>`

`<CommandSeparator>`

`<Command>`

`<CommandDialog>`

`<CommandInput>`

`<CommandList>`

`<CommandGroup>`

`<CommandItem>`

`<CommandSeparator>`