Commandstandard
글자를 쳐서 명령이나 항목을 찾아 실행하는 명령 팔레트(command palette)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 cmdk 에 스타일을 얹고, `CommandDialog` 는 `dialog` 아이템의 대화상자 안에 놓습니다. 선택 목록 위젯은 `combobox` 를 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/command의존 아이템dialoginput-group
Default
command-example.tsx
"use client"
import * as React from "react"
import { Example, ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import { Card, CardContent } from "@/components/ui/card"import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut,} from "@/components/ui/command"import { BellIcon, CalculatorIcon, CalendarIcon, ClipboardPasteIcon, CodeIcon, CopyIcon, CreditCardIcon, FileTextIcon, FolderIcon, FolderPlusIcon, HelpCircleIcon, HomeIcon, ImageIcon, InboxIcon, LayoutGridIcon, ListIcon, PlusIcon, ScissorsIcon, SettingsIcon, SmileIcon, TrashIcon, UserIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react"
export default function CommandExample() { return ( <ExampleWrapper> <CommandInline /> <CommandBasic /> <CommandWithShortcuts /> <CommandWithGroups /> <CommandManyItems /> </ExampleWrapper> )}
function CommandInline() { return ( <Example title="Inline"> <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> </Example> )}
function CommandBasic() { const [open, setOpen] = React.useState(false)
return ( <Example title="Basic"> <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> </Example> )}
function CommandWithShortcuts() { const [open, setOpen] = React.useState(false)
return ( <Example title="With Shortcuts"> <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> </Example> )}
function CommandWithGroups() { const [open, setOpen] = React.useState(false)
return ( <Example title="With Groups"> <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> </Example> )}
function CommandManyItems() { const [open, setOpen] = React.useState(false)
return ( <Example title="Many Groups & Items"> <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> </Example> )}