Command

Pro

shadcn's command menu (cmdk) in Candor's theme.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/command

Brings in: dialog, locale, utils · npm: cmdk@^1.1.1, lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { Flag, GitBranch, Table2 } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/ui/command"

export default function Example() {
  return (
    <Command label="Jump to" className="w-full max-w-sm rounded-lg border">
      <CommandInput placeholder="Search repositories, tables and flags…" />
      <CommandList>
        <CommandEmpty>Nothing matches.</CommandEmpty>
        <CommandGroup heading="Repositories">
          <CommandItem>
            <GitBranch aria-hidden /> acme-api
            <CommandShortcut>⌘1</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <GitBranch aria-hidden /> acme-web
            <CommandShortcut>⌘2</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Tables">
          <CommandItem>
            <Table2 aria-hidden /> customers
          </CommandItem>
          <CommandItem>
            <Table2 aria-hidden /> invoices
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Flags">
          <CommandItem>
            <Flag aria-hidden /> checkout.new_tax_engine
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

<Command>

No props.

Also takes the props of React.ComponentProps<typeof CommandPrimitive>.

<CommandDialog>

Prop	Type	Default	Description
title	`string \| undefined`	—	The dialog's title, for screen readers only. Defaults to "Command Palette".
description	`string \| undefined`	—	The dialog's description, for screen readers only. Defaults to "Search for a command to run...".
className	`string \| undefined`	—	Extra classes for the outer element.
showCloseButton	`boolean \| undefined`	true	Shows the close (×) button. Defaults to true.

Also takes the props of React.ComponentProps<typeof Dialog>.

<CommandInput>

No props.

Also takes the props of React.ComponentProps<typeof CommandPrimitive.Input>.

<CommandList>

No props.

Also takes the props of React.ComponentProps<typeof CommandPrimitive.List>.

<CommandEmpty>

No props.

Also takes the props of React.ComponentProps<typeof CommandPrimitive.Empty>.

<CommandGroup>

No props.

Also takes the props of React.ComponentProps<typeof CommandPrimitive.Group>.

<CommandItem>

No props.

Also takes the props of React.ComponentProps<typeof CommandPrimitive.Item>.

<CommandShortcut>

No props.

Also takes the props of React.ComponentProps<"span">.

<CommandSeparator>

No props.

Also takes the props of React.ComponentProps<typeof CommandPrimitive.Separator>.

Strings

The fixed words, in English by default. Change any of them under command in <LocaleProvider strings={{ … }}>; the table is exported as commandStrings.

Key	English
title	Command Palette
description	Search for a command to run...