Shadow Panda
Shadow Panda
Component
Command

Command

Fast, composable, unstyled command menu for React.

shadcn/ui

About

The Command component uses the cmdk component by pacocoursey.

Installation

Install the following dependencies

npm i cmdk

Add the Dialog component to your project.

The Command component uses the Dialog component. Make sure you have it installed in your project.

Copy and paste the following code into your project

components/ui/command/index.tsx
'use client'
 
import * as React from 'react'
import { DialogProps } from '@radix-ui/react-dialog'
import { Command as CommandPrimitive } from 'cmdk'
import { Search } from 'lucide-react'
import { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { command, commandDialog } from '@shadow-panda/styled-system/recipes'
import { Dialog, DialogContent } from '@/components/ui/dialog'
 
const { withProvider, withContext } = createStyleContext(command)
 
const InputWrapper = withContext(styled('div'), 'inputWrapper')
const SearchIcon = withContext(Search, 'inputSearch')
 
const BaseCommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <InputWrapper cmdk-input-wrapper="">
    <SearchIcon />
    <CommandPrimitive.Input ref={ref} className={className} {...props} />
  </InputWrapper>
))
 
BaseCommandInput.displayName = CommandPrimitive.Input.displayName
 
export const Command = withProvider(styled(CommandPrimitive), 'root')
export const CommandInput = withContext(styled(BaseCommandInput), 'input')
export const CommandList = withContext(styled(CommandPrimitive.List), 'list')
export const CommandEmpty = withContext(styled(CommandPrimitive.Empty), 'empty')
export const CommandGroup = withContext(styled(CommandPrimitive.Group), 'group')
export const CommandSeparator = withContext(styled(CommandPrimitive.Separator), 'separator')
export const CommandItem = withContext(styled(CommandPrimitive.Item), 'item')
export const CommandShortcut = withContext(styled('span'), 'shortcut')
 
export interface CommandDialogProps extends DialogProps {}
 
export const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  const styles = commandDialog()
 
  return (
    <Dialog {...props}>
      <DialogContent className={styles.content}>
        <Command className={styles.command}>{children}</Command>
      </DialogContent>
    </Dialog>
  )
}

Update the import paths to match your project setup

Usage

import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'
<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>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Dialog

Press ⌘Z

To show the command menu in a dialog, use the <CommandDialog /> component.

export function Example() {
  const [open, setOpen] = React.useState(false)
 
  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && e.metaKey) {
        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>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  )
}

Combobox

You can use the <Command /> component as a combobox. See the Combobox page for more information.

ComboboxContext Menu