Command

A command palette component built on cmdk for fast, keyboard-driven navigation and actions. Includes dialog support for modal command palettes.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/command.json

Install the dependencies:

npm install cmdk lucide-react

Copy from the nteract/elements registry.

Usage

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@/registry/primitives/command"

export function Example() {
  return (
    <Command>
      <CommandInput placeholder="Type a command..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Actions">
          <CommandItem>Run Cell</CommandItem>
          <CommandItem>Add Cell</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

With Shortcuts

<Command>
  <CommandInput placeholder="Search commands..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Cell Actions">
      <CommandItem>
        <span>Run Cell</span>
        <CommandShortcut>Shift+Enter</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <span>Run All Above</span>
        <CommandShortcut>Cmd+Shift+Enter</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Command Dialog

Use CommandDialog for a modal command palette, typically triggered by a keyboard shortcut.

import { useState, useEffect } from "react"
import {
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@/registry/primitives/command"

export function CommandPalette() {
  const [open, setOpen] = useState(false)

  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 (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>New Notebook</CommandItem>
          <CommandItem>Open File</CommandItem>
          <CommandItem>Search</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  )
}

Props

Command

Prop	Type	Default	Description
`value`	`string`	—	Controlled value
`onValueChange`	`(value: string) => void`	—	Called when value changes
`filter`	`(value: string, search: string) => number`	—	Custom filter function
`className`	`string`	—	Additional CSS classes

CommandDialog

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`title`	`string`	`"Command Palette"`	Dialog title (screen reader)
`description`	`string`	`"Search for a command..."`	Dialog description (screen reader)

CommandInput

Prop	Type	Default	Description
`placeholder`	`string`	—	Input placeholder text
`className`	`string`	—	Additional CSS classes

CommandItem

Prop	Type	Default	Description
`value`	`string`	—	Value used for filtering
`onSelect`	`(value: string) => void`	—	Called when item is selected
`disabled`	`boolean`	`false`	Disable the item
`className`	`string`	—	Additional CSS classes

Command

On this page