Kickresume UI

Command Palette

Search for a command to run...

Command

Command menu for search and quick actions.

Loading…
"use client"

import {
  Download,
  FilePlus2,
  Mail,
  Palette,
  Search,
  Target,
  Wand2,
  type LucideIcon,
} from "lucide-react"
import * as React from "react"

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

const commandGroups: {
  heading: string
  items: { id: string; label: string; icon: LucideIcon; shortcut?: string }[]
}[] = [
  {
    heading: "Create",
    items: [
      {
        id: "new-resume",
        label: "New resume",
        icon: FilePlus2,
        shortcut: "⌘R",
      },
      {
        id: "new-cover",
        label: "New cover letter",
        icon: Mail,
        shortcut: "⌘L",
      },
      { id: "ai-write", label: "Ask AI to draft a summary", icon: Wand2 },
    ],
  },
  {
    heading: "Actions",
    items: [
      { id: "search", label: "Search documents", icon: Search, shortcut: "⌘K" },
      { id: "template", label: "Change template", icon: Palette },
      { id: "ats", label: "Run ATS check", icon: Target },
      { id: "export", label: "Export to PDF", icon: Download, shortcut: "⌘E" },
    ],
  },
]

export default function CommandDemo() {
  return (
    <Command className="w-full max-w-md rounded-lg border">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        {commandGroups.map((group, gi) => (
          <React.Fragment key={group.heading}>
            {gi > 0 && <CommandSeparator />}
            <CommandGroup heading={group.heading}>
              {group.items.map((action) => (
                <CommandItem key={action.id}>
                  <action.icon />
                  <span>{action.label}</span>
                  {action.shortcut && (
                    <CommandShortcut>{action.shortcut}</CommandShortcut>
                  )}
                </CommandItem>
              ))}
            </CommandGroup>
          </React.Fragment>
        ))}
      </CommandList>
    </Command>
  )
}

About

The <Command /> component uses the cmdk component by Paco Coursey.

Installation

pnpm dlx shadcn@latest add @kickresume/command

Usage

import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "@/components/ui/command"
<Command className="w-full max-w-md rounded-lg border">
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    {commandGroups.map((group, gi) => (
      <React.Fragment key={group.heading}>
        {gi > 0 && <CommandSeparator />}
        <CommandGroup heading={group.heading}>
          {group.items.map((action) => (
            <CommandItem key={action.id}>
              <action.icon />
              <span>{action.label}</span>
              {action.shortcut && (
                <CommandShortcut>{action.shortcut}</CommandShortcut>
              )}
            </CommandItem>
          ))}
        </CommandGroup>
      </React.Fragment>
    ))}
  </CommandList>
</Command>

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup
        ├── CommandItem
        └── CommandItem

Examples

Basic

A simple command menu in a dialog.

Loading…
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"

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

  return (
    <div className="flex flex-col gap-4">
      <Button variant="outline" className="w-fit" onClick={() => setOpen(true)}>
        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 onSelect={() => setOpen(false)}>New resume</CommandItem>
              <CommandItem onSelect={() => setOpen(false)}>New cover letter</CommandItem>
              <CommandItem onSelect={() => setOpen(false)}>Search documents</CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </div>
  )
}

Shortcuts

Loading…
"use client"

import * as React from "react"
import { CreditCard, Settings, User } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/ui/command"

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

  return (
    <div className="flex flex-col gap-4">
      <Button variant="outline" className="w-fit" onClick={() => setOpen(true)}>
        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 onSelect={() => setOpen(false)}>
                <User />
                <span>Profile</span>
                <CommandShortcut>⌘P</CommandShortcut>
              </CommandItem>
              <CommandItem onSelect={() => setOpen(false)}>
                <CreditCard />
                <span>Billing</span>
                <CommandShortcut>⌘B</CommandShortcut>
              </CommandItem>
              <CommandItem onSelect={() => setOpen(false)}>
                <Settings />
                <span>Settings</span>
                <CommandShortcut>⌘S</CommandShortcut>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </div>
  )
}

Groups

A command menu with groups, icons and separators.

Loading…
"use client"

import {
  Download,
  FilePlus2,
  Mail,
  Palette,
  Search,
  Target,
  Wand2,
  type LucideIcon,
} from "lucide-react"
import * as React from "react"

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

const commandGroups: {
  heading: string
  items: { id: string; label: string; icon: LucideIcon; shortcut?: string }[]
}[] = [
  {
    heading: "Create",
    items: [
      {
        id: "new-resume",
        label: "New resume",
        icon: FilePlus2,
        shortcut: "⌘R",
      },
      {
        id: "new-cover",
        label: "New cover letter",
        icon: Mail,
        shortcut: "⌘L",
      },
      { id: "ai-write", label: "Ask AI to draft a summary", icon: Wand2 },
    ],
  },
  {
    heading: "Actions",
    items: [
      { id: "search", label: "Search documents", icon: Search, shortcut: "⌘K" },
      { id: "template", label: "Change template", icon: Palette },
      { id: "ats", label: "Run ATS check", icon: Target },
      { id: "export", label: "Export to PDF", icon: Download, shortcut: "⌘E" },
    ],
  },
]

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

  return (
    <div className="flex flex-col gap-4">
      <Button variant="outline" className="w-fit" onClick={() => setOpen(true)}>
        Open menu
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <Command>
          <CommandInput placeholder="Type a command or search…" />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            {commandGroups.map((group, index) => (
              <React.Fragment key={group.heading}>
                {index > 0 && <CommandSeparator />}
                <CommandGroup heading={group.heading}>
                  {group.items.map((action) => (
                    <CommandItem
                      key={action.id}
                      onSelect={() => setOpen(false)}
                    >
                      <action.icon />
                      <span>{action.label}</span>
                      {action.shortcut && (
                        <CommandShortcut>{action.shortcut}</CommandShortcut>
                      )}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </React.Fragment>
            ))}
          </CommandList>
        </Command>
      </CommandDialog>
    </div>
  )
}

Scrollable

Scrollable command menu with multiple items.

Loading…
"use client"

import * as React from "react"
import type { LucideIcon } from "lucide-react"
import {
  Bell,
  Briefcase,
  Copy,
  CreditCard,
  Download,
  FilePlus2,
  FolderInput,
  FolderOpen,
  HelpCircle,
  Languages,
  LayoutGrid,
  Link2,
  Mail,
  PenLine,
  Printer,
  Search,
  Settings,
  Sparkles,
  SpellCheck,
  Target,
  Trash2,
  User,
  Wand2,
} from "lucide-react"

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

type CommandAction = {
  label: string
  icon: LucideIcon
  shortcut?: string
}

type CommandGroupData = {
  heading: string
  items: CommandAction[]
}

const groups: CommandGroupData[] = [
  {
    heading: "Create",
    items: [
      { label: "New resume", icon: FilePlus2, shortcut: "⌘R" },
      { label: "New cover letter", icon: Mail, shortcut: "⌘L" },
      { label: "New portfolio", icon: LayoutGrid },
    ],
  },
  {
    heading: "Documents",
    items: [
      { label: "Open document", icon: FolderOpen },
      { label: "Duplicate", icon: Copy, shortcut: "⌘D" },
      { label: "Rename", icon: PenLine },
      { label: "Move to folder", icon: FolderInput },
      { label: "Delete", icon: Trash2, shortcut: "⌫" },
    ],
  },
  {
    heading: "AI tools",
    items: [
      { label: "Draft a summary", icon: Wand2 },
      { label: "Rephrase with AI", icon: Sparkles, shortcut: "⌘J" },
      { label: "Fix spelling & grammar", icon: SpellCheck },
      { label: "Translate", icon: Languages },
    ],
  },
  {
    heading: "Job search",
    items: [
      { label: "Search jobs", icon: Search, shortcut: "⌘K" },
      { label: "Track application", icon: Briefcase },
      { label: "Run ATS check", icon: Target },
    ],
  },
  {
    heading: "Export",
    items: [
      { label: "Export to PDF", icon: Download, shortcut: "⌘E" },
      { label: "Copy share link", icon: Link2 },
      { label: "Print", icon: Printer, shortcut: "⌘P" },
    ],
  },
  {
    heading: "Account",
    items: [
      { label: "Profile", icon: User },
      { label: "Billing", icon: CreditCard },
      { label: "Settings", icon: Settings, shortcut: "⌘S" },
      { label: "Notifications", icon: Bell },
      { label: "Help & support", icon: HelpCircle },
    ],
  },
]

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

  return (
    <div className="flex flex-col gap-4">
      <Button variant="outline" className="w-fit" onClick={() => setOpen(true)}>
        Open menu
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <Command>
          <CommandInput placeholder="Type a command or search…" />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            {groups.map((group, index) => (
              <React.Fragment key={group.heading}>
                {index > 0 && <CommandSeparator />}
                <CommandGroup heading={group.heading}>
                  {group.items.map((item) => (
                    <CommandItem key={item.label} onSelect={() => setOpen(false)}>
                      <item.icon />
                      <span>{item.label}</span>
                      {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </React.Fragment>
            ))}
          </CommandList>
        </Command>
      </CommandDialog>
    </div>
  )
}

API Reference

See the cmdk documentation for more information.