Command | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/command

pnpm dlx shadcn@latest add @cortexcn/command

Usage

import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "@/components/command";

Examples

Inline

import { Card, CardContent } from "@/components/card"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/command"
import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from "lucide-react"

export function CommandInline() {
  return (
    <div className="flex flex-col gap-6">
      <Card className="w-full p-0">
        <CardContent className="p-0">
          <Command>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup heading="Suggestions">
                <CommandItem>
                  <CalendarIcon />
                  <span>Calendar</span>
                </CommandItem>
                <CommandItem>
                  <SmileIcon />
                  <span>Search Emoji</span>
                </CommandItem>
                <CommandItem>
                  <CalculatorIcon />
                  <span>Calculator</span>
                </CommandItem>
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup heading="Settings">
                <CommandItem>
                  <UserIcon />
                  <span>Profile</span>
                  <CommandShortcut>⌘P</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <CreditCardIcon />
                  <span>Billing</span>
                  <CommandShortcut>⌘B</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <SettingsIcon />
                  <span>Settings</span>
                  <CommandShortcut>⌘S</CommandShortcut>
                </CommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </CardContent>
      </Card>
    </div>
  )
}

import { Card, CardContent } from "@/components/card"import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/command"import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from "lucide-react"export function CommandInline() {  return (    <div className="flex flex-col gap-6">      <Card className="w-full p-0">        <CardContent className="p-0">          <Command>            <CommandInput placeholder="Type a command or search..." />            <CommandList>              <CommandEmpty>No results found.</CommandEmpty>              <CommandGroup heading="Suggestions">                <CommandItem>                  <CalendarIcon />                  <span>Calendar</span>                </CommandItem>                <CommandItem>                  <SmileIcon />                  <span>Search Emoji</span>                </CommandItem>                <CommandItem>                  <CalculatorIcon />                  <span>Calculator</span>                </CommandItem>              </CommandGroup>              <CommandSeparator />              <CommandGroup heading="Settings">                <CommandItem>                  <UserIcon />                  <span>Profile</span>                  <CommandShortcut>⌘P</CommandShortcut>                </CommandItem>                <CommandItem>                  <CreditCardIcon />                  <span>Billing</span>                  <CommandShortcut>⌘B</CommandShortcut>                </CommandItem>                <CommandItem>                  <SettingsIcon />                  <span>Settings</span>                  <CommandShortcut>⌘S</CommandShortcut>                </CommandItem>              </CommandGroup>            </CommandList>          </Command>        </CardContent>      </Card>    </div>  )}

Basic

import * as React from "react"
import { Button } from "@/components/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/command"

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

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <Button
          onClick={() => setOpen(true)}
          variant="outline"
          className="w-fit"
        >
          Open Menu
        </Button>
        <CommandDialog open={open} onOpenChange={setOpen}>
          <Command>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup heading="Suggestions">
                <CommandItem>Calendar</CommandItem>
                <CommandItem>Search Emoji</CommandItem>
                <CommandItem>Calculator</CommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </CommandDialog>
      </div>
    </div>
  )
}

import * as React from "react"import { Button } from "@/components/button"import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/command"export function CommandBasic() {  const [open, setOpen] = React.useState(false)  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <Button          onClick={() => setOpen(true)}          variant="outline"          className="w-fit"        >          Open Menu        </Button>        <CommandDialog open={open} onOpenChange={setOpen}>          <Command>            <CommandInput placeholder="Type a command or search..." />            <CommandList>              <CommandEmpty>No results found.</CommandEmpty>              <CommandGroup heading="Suggestions">                <CommandItem>Calendar</CommandItem>                <CommandItem>Search Emoji</CommandItem>                <CommandItem>Calculator</CommandItem>              </CommandGroup>            </CommandList>          </Command>        </CommandDialog>      </div>    </div>  )}

With shortcuts

import * as React from "react"
import { Button } from "@/components/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/command"
import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react"

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

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <Button
          onClick={() => setOpen(true)}
          variant="outline"
          className="w-fit"
        >
          Open Menu
        </Button>
        <CommandDialog open={open} onOpenChange={setOpen}>
          <Command>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup heading="Settings">
                <CommandItem>
                  <UserIcon />
                  <span>Profile</span>
                  <CommandShortcut>⌘P</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <CreditCardIcon />
                  <span>Billing</span>
                  <CommandShortcut>⌘B</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <SettingsIcon />
                  <span>Settings</span>
                  <CommandShortcut>⌘S</CommandShortcut>
                </CommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </CommandDialog>
      </div>
    </div>
  )
}

import * as React from "react"import { Button } from "@/components/button"import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/command"import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react"export function CommandWithShortcuts() {  const [open, setOpen] = React.useState(false)  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <Button          onClick={() => setOpen(true)}          variant="outline"          className="w-fit"        >          Open Menu        </Button>        <CommandDialog open={open} onOpenChange={setOpen}>          <Command>            <CommandInput placeholder="Type a command or search..." />            <CommandList>              <CommandEmpty>No results found.</CommandEmpty>              <CommandGroup heading="Settings">                <CommandItem>                  <UserIcon />                  <span>Profile</span>                  <CommandShortcut>⌘P</CommandShortcut>                </CommandItem>                <CommandItem>                  <CreditCardIcon />                  <span>Billing</span>                  <CommandShortcut>⌘B</CommandShortcut>                </CommandItem>                <CommandItem>                  <SettingsIcon />                  <span>Settings</span>                  <CommandShortcut>⌘S</CommandShortcut>                </CommandItem>              </CommandGroup>            </CommandList>          </Command>        </CommandDialog>      </div>    </div>  )}

With groups

import * as React from "react"
import { Button } from "@/components/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/command"
import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from "lucide-react"

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

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <Button
          onClick={() => setOpen(true)}
          variant="outline"
          className="w-fit"
        >
          Open Menu
        </Button>
        <CommandDialog open={open} onOpenChange={setOpen}>
          <Command>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup heading="Suggestions">
                <CommandItem>
                  <CalendarIcon />
                  <span>Calendar</span>
                </CommandItem>
                <CommandItem>
                  <SmileIcon />
                  <span>Search Emoji</span>
                </CommandItem>
                <CommandItem>
                  <CalculatorIcon />
                  <span>Calculator</span>
                </CommandItem>
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup heading="Settings">
                <CommandItem>
                  <UserIcon />
                  <span>Profile</span>
                  <CommandShortcut>⌘P</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <CreditCardIcon />
                  <span>Billing</span>
                  <CommandShortcut>⌘B</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <SettingsIcon />
                  <span>Settings</span>
                  <CommandShortcut>⌘S</CommandShortcut>
                </CommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </CommandDialog>
      </div>
    </div>
  )
}

import * as React from "react"import { Button } from "@/components/button"import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/command"import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from "lucide-react"export function CommandWithGroups() {  const [open, setOpen] = React.useState(false)  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <Button          onClick={() => setOpen(true)}          variant="outline"          className="w-fit"        >          Open Menu        </Button>        <CommandDialog open={open} onOpenChange={setOpen}>          <Command>            <CommandInput placeholder="Type a command or search..." />            <CommandList>              <CommandEmpty>No results found.</CommandEmpty>              <CommandGroup heading="Suggestions">                <CommandItem>                  <CalendarIcon />                  <span>Calendar</span>                </CommandItem>                <CommandItem>                  <SmileIcon />                  <span>Search Emoji</span>                </CommandItem>                <CommandItem>                  <CalculatorIcon />                  <span>Calculator</span>                </CommandItem>              </CommandGroup>              <CommandSeparator />              <CommandGroup heading="Settings">                <CommandItem>                  <UserIcon />                  <span>Profile</span>                  <CommandShortcut>⌘P</CommandShortcut>                </CommandItem>                <CommandItem>                  <CreditCardIcon />                  <span>Billing</span>                  <CommandShortcut>⌘B</CommandShortcut>                </CommandItem>                <CommandItem>                  <SettingsIcon />                  <span>Settings</span>                  <CommandShortcut>⌘S</CommandShortcut>                </CommandItem>              </CommandGroup>            </CommandList>          </Command>        </CommandDialog>      </div>    </div>  )}

Many groups and items

import * as React from "react"
import { Button } from "@/components/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/command"
import { BellIcon, CalculatorIcon, CalendarIcon, ClipboardPasteIcon, CodeIcon, CopyIcon, CreditCardIcon, FileTextIcon, FolderIcon, FolderPlusIcon, HelpCircleIcon, HomeIcon, ImageIcon, InboxIcon, LayoutGridIcon, ListIcon, PlusIcon, ScissorsIcon, SettingsIcon, TrashIcon, UserIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react"

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

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <Button
          onClick={() => setOpen(true)}
          variant="outline"
          className="w-fit"
        >
          Open Menu
        </Button>
        <CommandDialog open={open} onOpenChange={setOpen}>
          <Command>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup heading="Navigation">
                <CommandItem>
                  <HomeIcon />
                  <span>Home</span>
                  <CommandShortcut>⌘H</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <InboxIcon />
                  <span>Inbox</span>
                  <CommandShortcut>⌘I</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <FileTextIcon />
                  <span>Documents</span>
                  <CommandShortcut>⌘D</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <FolderIcon />
                  <span>Folders</span>
                  <CommandShortcut>⌘F</CommandShortcut>
                </CommandItem>
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup heading="Actions">
                <CommandItem>
                  <PlusIcon />
                  <span>New File</span>
                  <CommandShortcut>⌘N</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <FolderPlusIcon />
                  <span>New Folder</span>
                  <CommandShortcut>⇧⌘N</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <CopyIcon />
                  <span>Copy</span>
                  <CommandShortcut>⌘C</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <ScissorsIcon />
                  <span>Cut</span>
                  <CommandShortcut>⌘X</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <ClipboardPasteIcon />
                  <span>Paste</span>
                  <CommandShortcut>⌘V</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <TrashIcon />
                  <span>Delete</span>
                  <CommandShortcut>⌫</CommandShortcut>
                </CommandItem>
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup heading="View">
                <CommandItem>
                  <LayoutGridIcon />
                  <span>Grid View</span>
                </CommandItem>
                <CommandItem>
                  <ListIcon />
                  <span>List View</span>
                </CommandItem>
                <CommandItem>
                  <ZoomInIcon />
                  <span>Zoom In</span>
                  <CommandShortcut>⌘+</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <ZoomOutIcon />
                  <span>Zoom Out</span>
                  <CommandShortcut>⌘-</CommandShortcut>
                </CommandItem>
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup heading="Account">
                <CommandItem>
                  <UserIcon />
                  <span>Profile</span>
                  <CommandShortcut>⌘P</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <CreditCardIcon />
                  <span>Billing</span>
                  <CommandShortcut>⌘B</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <SettingsIcon />
                  <span>Settings</span>
                  <CommandShortcut>⌘S</CommandShortcut>
                </CommandItem>
                <CommandItem>
                  <BellIcon />
                  <span>Notifications</span>
                </CommandItem>
                <CommandItem>
                  <HelpCircleIcon />
                  <span>Help & Support</span>
                </CommandItem>
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup heading="Tools">
                <CommandItem>
                  <CalculatorIcon />
                  <span>Calculator</span>
                </CommandItem>
                <CommandItem>
                  <CalendarIcon />
                  <span>Calendar</span>
                </CommandItem>
                <CommandItem>
                  <ImageIcon />
                  <span>Image Editor</span>
                </CommandItem>
                <CommandItem>
                  <CodeIcon />
                  <span>Code Editor</span>
                </CommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </CommandDialog>
      </div>
    </div>
  )
}

import * as React from "react"import { Button } from "@/components/button"import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/command"import { BellIcon, CalculatorIcon, CalendarIcon, ClipboardPasteIcon, CodeIcon, CopyIcon, CreditCardIcon, FileTextIcon, FolderIcon, FolderPlusIcon, HelpCircleIcon, HomeIcon, ImageIcon, InboxIcon, LayoutGridIcon, ListIcon, PlusIcon, ScissorsIcon, SettingsIcon, TrashIcon, UserIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react"export function CommandManyItems() {  const [open, setOpen] = React.useState(false)  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <Button          onClick={() => setOpen(true)}          variant="outline"          className="w-fit"        >          Open Menu        </Button>        <CommandDialog open={open} onOpenChange={setOpen}>          <Command>            <CommandInput placeholder="Type a command or search..." />            <CommandList>              <CommandEmpty>No results found.</CommandEmpty>              <CommandGroup heading="Navigation">                <CommandItem>                  <HomeIcon />                  <span>Home</span>                  <CommandShortcut>⌘H</CommandShortcut>                </CommandItem>                <CommandItem>                  <InboxIcon />                  <span>Inbox</span>                  <CommandShortcut>⌘I</CommandShortcut>                </CommandItem>                <CommandItem>                  <FileTextIcon />                  <span>Documents</span>                  <CommandShortcut>⌘D</CommandShortcut>                </CommandItem>                <CommandItem>                  <FolderIcon />                  <span>Folders</span>                  <CommandShortcut>⌘F</CommandShortcut>                </CommandItem>              </CommandGroup>              <CommandSeparator />              <CommandGroup heading="Actions">                <CommandItem>                  <PlusIcon />                  <span>New File</span>                  <CommandShortcut>⌘N</CommandShortcut>                </CommandItem>                <CommandItem>                  <FolderPlusIcon />                  <span>New Folder</span>                  <CommandShortcut>⇧⌘N</CommandShortcut>                </CommandItem>                <CommandItem>                  <CopyIcon />                  <span>Copy</span>                  <CommandShortcut>⌘C</CommandShortcut>                </CommandItem>                <CommandItem>                  <ScissorsIcon />                  <span>Cut</span>                  <CommandShortcut>⌘X</CommandShortcut>                </CommandItem>                <CommandItem>                  <ClipboardPasteIcon />                  <span>Paste</span>                  <CommandShortcut>⌘V</CommandShortcut>                </CommandItem>                <CommandItem>                  <TrashIcon />                  <span>Delete</span>                  <CommandShortcut>⌫</CommandShortcut>                </CommandItem>              </CommandGroup>              <CommandSeparator />              <CommandGroup heading="View">                <CommandItem>                  <LayoutGridIcon />                  <span>Grid View</span>                </CommandItem>                <CommandItem>                  <ListIcon />                  <span>List View</span>                </CommandItem>                <CommandItem>                  <ZoomInIcon />                  <span>Zoom In</span>                  <CommandShortcut>⌘+</CommandShortcut>                </CommandItem>                <CommandItem>                  <ZoomOutIcon />                  <span>Zoom Out</span>                  <CommandShortcut>⌘-</CommandShortcut>                </CommandItem>              </CommandGroup>              <CommandSeparator />              <CommandGroup heading="Account">                <CommandItem>                  <UserIcon />                  <span>Profile</span>                  <CommandShortcut>⌘P</CommandShortcut>                </CommandItem>                <CommandItem>                  <CreditCardIcon />                  <span>Billing</span>                  <CommandShortcut>⌘B</CommandShortcut>                </CommandItem>                <CommandItem>                  <SettingsIcon />                  <span>Settings</span>                  <CommandShortcut>⌘S</CommandShortcut>                </CommandItem>                <CommandItem>                  <BellIcon />                  <span>Notifications</span>                </CommandItem>                <CommandItem>                  <HelpCircleIcon />                  <span>Help & Support</span>                </CommandItem>              </CommandGroup>              <CommandSeparator />              <CommandGroup heading="Tools">                <CommandItem>                  <CalculatorIcon />                  <span>Calculator</span>                </CommandItem>                <CommandItem>                  <CalendarIcon />                  <span>Calendar</span>                </CommandItem>                <CommandItem>                  <ImageIcon />                  <span>Image Editor</span>                </CommandItem>                <CommandItem>                  <CodeIcon />                  <span>Code Editor</span>                </CommandItem>              </CommandGroup>            </CommandList>          </Command>        </CommandDialog>      </div>    </div>  )}

Adapted from the shadcn/ui Command (MIT).

Command Palette

Command Palette

Command Palette

Command Palette