Command

since 1.0

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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

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>
  )
}

Combobox Context Menu

Command

since 1.0

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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

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>
  )
}

Combobox Context Menu

Command

Example

Install

Components

Props

<Command>

<CommandDialog>

<CommandInput>

<CommandList>

<CommandGroup>

<CommandItem>

<CommandSeparator>

Examples

Dialog

Command Palette

With Groups

With Shortcuts

Command

Example

Install

Components

Props

<Command>

<CommandDialog>

<CommandInput>

<CommandList>

<CommandGroup>

<CommandItem>

<CommandSeparator>

Examples

Dialog

Command Palette

With Groups

With Shortcuts

`<Command>`

`<CommandDialog>`

`<CommandInput>`

`<CommandList>`

`<CommandGroup>`

`<CommandItem>`

`<CommandSeparator>`

`<Command>`

`<CommandDialog>`

`<CommandInput>`

`<CommandList>`

`<CommandGroup>`

`<CommandItem>`

`<CommandSeparator>`