command-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-example",
  "title": "Command",
  "registryDependencies": [
    "button",
    "command",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/command-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}