command-dialog.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-dialog",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "command",
    "dialog"
  ],
  "files": [
    {
      "path": "examples/command-dialog.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}