diff --git a/apps/ui/components/command-menu.tsx b/apps/ui/components/command-menu.tsx
index d3963435e..0615c4447 100644
--- a/apps/ui/components/command-menu.tsx
+++ b/apps/ui/components/command-menu.tsx
@@ -8,7 +8,7 @@ import {
   Search01Icon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 import type { ComponentProps } from "react";
 import * as React from "react";
 import { useConfig } from "@/hooks/use-config";
@@ -53,7 +53,6 @@ export function CommandMenu({
   tree: typeof source.pageTree;
   navItems?: { href: string; label: string }[];
 }) {
-  const router = useRouter();
   const isMac = useIsMac();
   const [config] = useConfig();
   const { copyToClipboard } = useCopyToClipboard();
@@ -142,14 +141,6 @@ export function CommandMenu({
     [packageManager],
   );
 
-  const handleItemClick = React.useCallback(
-    (item: PageItem) => {
-      setOpen(false);
-      router.push(item.url);
-    },
-    [router],
-  );
-
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
@@ -206,9 +197,14 @@ export function CommandMenu({
                   <CommandCollection>
                     {(item: PageItem) => (
                       <CommandItem
+                        className="flex w-full items-center"
                         key={item.value}
-                        onClick={() => handleItemClick(item)}
-                        value={item.value}
+                        render={
+                          <Link
+                            href={item.url}
+                            onNavigate={() => setOpen(false)}
+                          />
+                        }
                       >
                         <HugeiconsIcon
                           className="mr-2 h-4 w-4 opacity-80"
@@ -225,13 +221,13 @@ export function CommandMenu({
           </CommandPanel>
           <CommandFooter>
             <div className="flex items-center gap-2">
-              <span>Go to Page</span>
+              <span className="whitespace-nowrap">Go to Page</span>
               <Kbd>
                 <HugeiconsIcon icon={ArrowTurnBackwardIcon} strokeWidth={2} />
               </Kbd>
             </div>
             {copyPayload && (
-              <div className="flex items-center gap-2">
+              <div className="flex min-w-0 items-center gap-2">
                 <span className="truncate font-mono">{copyPayload}</span>
                 <KbdGroup>
                   <Kbd>{isMac ? "⌘" : "Ctrl"}</Kbd>
diff --git a/apps/ui/public/r/command.json b/apps/ui/public/r/command.json
index 88db68254..a64e8e7a9 100644
--- a/apps/ui/public/r/command.json
+++ b/apps/ui/public/r/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/ui/command.tsx",
-      "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst CommandInputContext = React.createContext<{\n  inputRef: React.RefObject<HTMLInputElement | null> | null;\n}>({\n  inputRef: null,\n});\n\nconst CommandDialog = CommandDialogPrimitive.Root;\n\nconst CommandDialogPortal = CommandDialogPrimitive.Portal;\n\nfunction CommandDialogTrigger(props: CommandDialogPrimitive.Trigger.Props) {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props) {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props) {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogPopup({\n  className,\n  children,\n  ...props\n}: CommandDialogPrimitive.Popup.Props) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  return (\n    <CommandDialogPortal>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-100 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/50 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          initialFocus={inputRef}\n          {...props}\n        >\n          <CommandInputContext.Provider value={{ inputRef }}>\n            {children}\n          </CommandInputContext.Provider>\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nfunction Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  open = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>) {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      keepHighlight={keepHighlight}\n      open={open}\n      {...props}\n    />\n  );\n}\n\nfunction CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>) {\n  const { inputRef } = React.useContext(CommandInputContext);\n\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        ref={inputRef}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>) {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>) {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className=\"-mx-px relative min-h-0 rounded-t-xl border bg-popover bg-clip-padding shadow-xs [clip-path:inset(0_1px)] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>) {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>) {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompleteCollection>) {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>) {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>) {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <span\n      className={cn(\n        \"ms-auto font-medium text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
+      "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst CommandDialog = CommandDialogPrimitive.Root;\n\nconst CommandDialogPortal = CommandDialogPrimitive.Portal;\n\nfunction CommandDialogTrigger(props: CommandDialogPrimitive.Trigger.Props) {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props) {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props) {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogPopup({\n  className,\n  children,\n  ...props\n}: CommandDialogPrimitive.Popup.Props) {\n  return (\n    <CommandDialogPortal>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-100 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/50 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          {...props}\n        >\n          {children}\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nfunction Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>) {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n}\n\nfunction CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>) {\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        autoFocus\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>) {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>) {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className=\"-mx-px relative min-h-0 rounded-t-xl border bg-popover bg-clip-padding shadow-xs [clip-path:inset(0_1px)] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>) {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>) {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompleteCollection>) {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>) {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>) {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/ui/public/r/menu.json b/apps/ui/public/r/menu.json
index fb536a1e3..163287419 100644
--- a/apps/ui/public/r/menu.json
+++ b/apps/ui/public/r/menu.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/ui/menu.tsx",
-      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst Menu = MenuPrimitive.Root;\n\nconst MenuPortal = MenuPrimitive.Portal;\n\nfunction MenuTrigger(props: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />;\n}\n\nfunction MenuPopup({\n  children,\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  side = \"bottom\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: MenuPrimitive.Positioner.Props[\"side\"];\n}) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"z-50\"\n        data-slot=\"menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          className={cn(\n            \"relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding shadow-lg outline-none transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n            className,\n          )}\n          data-slot=\"menu-popup\"\n          {...props}\n        >\n          <div className=\"max-h-(--available-height) w-full overflow-y-auto p-1\">\n            {children}\n          </div>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nfunction MenuGroup(props: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />;\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenuPrimitive.Item\n      className={cn(\n        \"[&_svg]:-mx-0.5 flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"menu-checkbox-item\"\n      {...props}\n    >\n      <MenuPrimitive.CheckboxItemIndicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </MenuPrimitive.CheckboxItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />;\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"menu-radio-item\"\n      {...props}\n    >\n      <MenuPrimitive.RadioItemIndicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </MenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nfunction MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-label\"\n      {...props}\n    />\n  );\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"menu-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction MenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"ms-auto font-medium text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nfunction MenuSub(props: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />;\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      className={cn(\n        \"flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"-me-0.5 ms-auto opacity-80\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction MenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset,\n  align = \"start\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n}) {\n  const defaultAlignOffset = align !== \"center\" ? -5 : undefined;\n\n  return (\n    <MenuPopup\n      align={align}\n      alignOffset={alignOffset ?? defaultAlignOffset}\n      className={className}\n      data-slot=\"menu-sub-content\"\n      side=\"inline-end\"\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menu,\n  Menu as DropdownMenu,\n  MenuPortal,\n  MenuPortal as DropdownMenuPortal,\n  MenuTrigger,\n  MenuTrigger as DropdownMenuTrigger,\n  MenuPopup,\n  MenuPopup as DropdownMenuContent,\n  MenuGroup,\n  MenuGroup as DropdownMenuGroup,\n  MenuItem,\n  MenuItem as DropdownMenuItem,\n  MenuCheckboxItem,\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioGroup as DropdownMenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItem as DropdownMenuRadioItem,\n  MenuGroupLabel,\n  MenuGroupLabel as DropdownMenuLabel,\n  MenuSeparator,\n  MenuSeparator as DropdownMenuSeparator,\n  MenuShortcut,\n  MenuShortcut as DropdownMenuShortcut,\n  MenuSub,\n  MenuSub as DropdownMenuSub,\n  MenuSubTrigger,\n  MenuSubTrigger as DropdownMenuSubTrigger,\n  MenuSubPopup,\n  MenuSubPopup as DropdownMenuSubContent,\n};\n",
+      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst Menu = MenuPrimitive.Root;\n\nconst MenuPortal = MenuPrimitive.Portal;\n\nfunction MenuTrigger(props: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />;\n}\n\nfunction MenuPopup({\n  children,\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  side = \"bottom\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: MenuPrimitive.Positioner.Props[\"side\"];\n}) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"z-50\"\n        data-slot=\"menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          className={cn(\n            \"relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding shadow-lg outline-none transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n            className,\n          )}\n          data-slot=\"menu-popup\"\n          {...props}\n        >\n          <div className=\"max-h-(--available-height) w-full overflow-y-auto p-1\">\n            {children}\n          </div>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nfunction MenuGroup(props: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />;\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenuPrimitive.Item\n      className={cn(\n        \"[&_svg]:-mx-0.5 flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"menu-checkbox-item\"\n      {...props}\n    >\n      <MenuPrimitive.CheckboxItemIndicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </MenuPrimitive.CheckboxItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />;\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"menu-radio-item\"\n      {...props}\n    >\n      <MenuPrimitive.RadioItemIndicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </MenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nfunction MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-label\"\n      {...props}\n    />\n  );\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"menu-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction MenuShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nfunction MenuSub(props: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />;\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      className={cn(\n        \"flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"-me-0.5 ms-auto opacity-80\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction MenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset,\n  align = \"start\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n}) {\n  const defaultAlignOffset = align !== \"center\" ? -5 : undefined;\n\n  return (\n    <MenuPopup\n      align={align}\n      alignOffset={alignOffset ?? defaultAlignOffset}\n      className={className}\n      data-slot=\"menu-sub-content\"\n      side=\"inline-end\"\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menu,\n  Menu as DropdownMenu,\n  MenuPortal,\n  MenuPortal as DropdownMenuPortal,\n  MenuTrigger,\n  MenuTrigger as DropdownMenuTrigger,\n  MenuPopup,\n  MenuPopup as DropdownMenuContent,\n  MenuGroup,\n  MenuGroup as DropdownMenuGroup,\n  MenuItem,\n  MenuItem as DropdownMenuItem,\n  MenuCheckboxItem,\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioGroup as DropdownMenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItem as DropdownMenuRadioItem,\n  MenuGroupLabel,\n  MenuGroupLabel as DropdownMenuLabel,\n  MenuSeparator,\n  MenuSeparator as DropdownMenuSeparator,\n  MenuShortcut,\n  MenuShortcut as DropdownMenuShortcut,\n  MenuSub,\n  MenuSub as DropdownMenuSub,\n  MenuSubTrigger,\n  MenuSubTrigger as DropdownMenuSubTrigger,\n  MenuSubPopup,\n  MenuSubPopup as DropdownMenuSubContent,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/p-command-1.json b/apps/ui/public/r/p-command-1.json
index e9ff40581..97ed6294b 100644
--- a/apps/ui/public/r/p-command-1.json
+++ b/apps/ui/public/r/p-command-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-command-1.tsx",
-      "content": "\"use client\";\n\nimport { ArrowDownIcon, ArrowUpIcon, CornerDownLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\n\nexport interface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n}\n\nexport interface Group {\n  value: string;\n  items: Item[];\n}\n\nexport const suggestions: Item[] = [\n  { label: \"Linear\", shortcut: \"⌘L\", value: \"linear\" },\n  { label: \"Figma\", shortcut: \"⌘F\", value: \"figma\" },\n  { label: \"Slack\", shortcut: \"⌘S\", value: \"slack\" },\n  { label: \"YouTube\", shortcut: \"⌘Y\", value: \"youtube\" },\n  { label: \"Raycast\", shortcut: \"⌘R\", value: \"raycast\" },\n];\n\nexport const commands: Item[] = [\n  { label: \"Clipboard History\", shortcut: \"⌘⇧C\", value: \"clipboard-history\" },\n  { label: \"Import Extension\", shortcut: \"⌘I\", value: \"import-extension\" },\n  { label: \"Create Snippet\", shortcut: \"⌘N\", value: \"create-snippet\" },\n  { label: \"System Preferences\", shortcut: \"⌘,\", value: \"system-preferences\" },\n  { label: \"Window Management\", shortcut: \"⌘⇧W\", value: \"window-management\" },\n];\n\nexport const groupedItems: Group[] = [\n  { items: suggestions, value: \"Suggestions\" },\n  { items: commands, value: \"Commands\" },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = React.useState(false);\n\n  function handleItemClick(_item: Item) {\n    setOpen(false);\n  }\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        console.log(\"down\");\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    <CommandDialog onOpenChange={setOpen} open={open}>\n      <CommandDialogTrigger render={<Button variant=\"outline\" />}>\n        Open Command Palette\n        <Kbd>⌘J</Kbd>\n      </CommandDialogTrigger>\n      <CommandDialogPopup>\n        <Command items={groupedItems}>\n          <CommandInput placeholder=\"Search for apps and commands...\" />\n          <CommandPanel>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandList>\n              {(group: Group, _index: number) => (\n                <React.Fragment key={group.value}>\n                  <CommandGroup items={group.items}>\n                    <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                    <CommandCollection>\n                      {(item: Item) => (\n                        <CommandItem\n                          key={item.value}\n                          onClick={() => handleItemClick(item)}\n                          value={item.value}\n                        >\n                          <span className=\"flex-1\">{item.label}</span>\n                          {item.shortcut && (\n                            <CommandShortcut>{item.shortcut}</CommandShortcut>\n                          )}\n                        </CommandItem>\n                      )}\n                    </CommandCollection>\n                  </CommandGroup>\n                  <CommandSeparator />\n                </React.Fragment>\n              )}\n            </CommandList>\n          </CommandPanel>\n          <CommandFooter>\n            <div className=\"flex items-center gap-4\">\n              <div className=\"flex items-center gap-2\">\n                <KbdGroup>\n                  <Kbd>\n                    <ArrowUpIcon />\n                  </Kbd>\n                  <Kbd>\n                    <ArrowDownIcon />\n                  </Kbd>\n                </KbdGroup>\n                <span>Navigate</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Kbd>\n                  <CornerDownLeftIcon />\n                </Kbd>\n                <span>Open</span>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <KbdGroup>\n                <Kbd>⌘</Kbd>\n                <Kbd>K</Kbd>\n              </KbdGroup>\n              <span>Close</span>\n            </div>\n          </CommandFooter>\n        </Command>\n      </CommandDialogPopup>\n    </CommandDialog>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ArrowDownIcon, ArrowUpIcon, CornerDownLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\n\nexport interface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n}\n\nexport interface Group {\n  value: string;\n  items: Item[];\n}\n\nexport const suggestions: Item[] = [\n  { label: \"Linear\", shortcut: \"⌘L\", value: \"linear\" },\n  { label: \"Figma\", shortcut: \"⌘F\", value: \"figma\" },\n  { label: \"Slack\", shortcut: \"⌘S\", value: \"slack\" },\n  { label: \"YouTube\", shortcut: \"⌘Y\", value: \"youtube\" },\n  { label: \"Raycast\", shortcut: \"⌘R\", value: \"raycast\" },\n];\n\nexport const commands: Item[] = [\n  { label: \"Clipboard History\", shortcut: \"⌘⇧C\", value: \"clipboard-history\" },\n  { label: \"Import Extension\", shortcut: \"⌘I\", value: \"import-extension\" },\n  { label: \"Create Snippet\", shortcut: \"⌘N\", value: \"create-snippet\" },\n  { label: \"System Preferences\", shortcut: \"⌘,\", value: \"system-preferences\" },\n  { label: \"Window Management\", shortcut: \"⌘⇧W\", value: \"window-management\" },\n];\n\nexport const groupedItems: Group[] = [\n  { items: suggestions, value: \"Suggestions\" },\n  { items: commands, value: \"Commands\" },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = React.useState(false);\n\n  function handleItemClick(_item: Item) {\n    setOpen(false);\n  }\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    <CommandDialog onOpenChange={setOpen} open={open}>\n      <CommandDialogTrigger render={<Button variant=\"outline\" />}>\n        Open Command Palette\n        <Kbd>⌘J</Kbd>\n      </CommandDialogTrigger>\n      <CommandDialogPopup>\n        <Command items={groupedItems}>\n          <CommandInput placeholder=\"Search for apps and commands...\" />\n          <CommandPanel>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandList>\n              {(group: Group, _index: number) => (\n                <React.Fragment key={group.value}>\n                  <CommandGroup items={group.items}>\n                    <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                    <CommandCollection>\n                      {(item: Item) => (\n                        <CommandItem\n                          key={item.value}\n                          onClick={() => handleItemClick(item)}\n                          value={item.value}\n                        >\n                          <span className=\"flex-1\">{item.label}</span>\n                          {item.shortcut && (\n                            <CommandShortcut>{item.shortcut}</CommandShortcut>\n                          )}\n                        </CommandItem>\n                      )}\n                    </CommandCollection>\n                  </CommandGroup>\n                  <CommandSeparator />\n                </React.Fragment>\n              )}\n            </CommandList>\n          </CommandPanel>\n          <CommandFooter>\n            <div className=\"flex items-center gap-4\">\n              <div className=\"flex items-center gap-2\">\n                <KbdGroup>\n                  <Kbd>\n                    <ArrowUpIcon />\n                  </Kbd>\n                  <Kbd>\n                    <ArrowDownIcon />\n                  </Kbd>\n                </KbdGroup>\n                <span>Navigate</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Kbd>\n                  <CornerDownLeftIcon />\n                </Kbd>\n                <span>Open</span>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Kbd>Esc</Kbd>\n              <span>Close</span>\n            </div>\n          </CommandFooter>\n        </Command>\n      </CommandDialogPopup>\n    </CommandDialog>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/registry/default/particles/p-command-1.tsx b/apps/ui/registry/default/particles/p-command-1.tsx
index 9be621e0f..d9fa64fb7 100644
--- a/apps/ui/registry/default/particles/p-command-1.tsx
+++ b/apps/ui/registry/default/particles/p-command-1.tsx
@@ -66,7 +66,6 @@ export default function Particle() {
       if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         setOpen((open) => !open);
-        console.log("down");
       }
     };
 
@@ -131,10 +130,7 @@ export default function Particle() {
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <KbdGroup>
-                <Kbd>⌘</Kbd>
-                <Kbd>K</Kbd>
-              </KbdGroup>
+              <Kbd>Esc</Kbd>
               <span>Close</span>
             </div>
           </CommandFooter>
diff --git a/apps/ui/registry/default/ui/command.tsx b/apps/ui/registry/default/ui/command.tsx
index 83a8c95c7..831fe3880 100644
--- a/apps/ui/registry/default/ui/command.tsx
+++ b/apps/ui/registry/default/ui/command.tsx
@@ -2,7 +2,7 @@
 
 import { Dialog as CommandDialogPrimitive } from "@base-ui/react/dialog";
 import { SearchIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@/registry/default/lib/utils";
 import {
   Autocomplete,
@@ -16,12 +16,6 @@ import {
   AutocompleteSeparator,
 } from "@/registry/default/ui/autocomplete";
 
-const CommandInputContext = React.createContext<{
-  inputRef: React.RefObject<HTMLInputElement | null> | null;
-}>({
-  inputRef: null,
-});
-
 const CommandDialog = CommandDialogPrimitive.Root;
 
 const CommandDialogPortal = CommandDialogPrimitive.Portal;
@@ -72,8 +66,6 @@ function CommandDialogPopup({
   children,
   ...props
 }: CommandDialogPrimitive.Popup.Props) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
   return (
     <CommandDialogPortal>
       <CommandDialogBackdrop />
@@ -84,12 +76,9 @@ function CommandDialogPopup({
             className,
           )}
           data-slot="command-dialog-popup"
-          initialFocus={inputRef}
           {...props}
         >
-          <CommandInputContext.Provider value={{ inputRef }}>
-            {children}
-          </CommandInputContext.Provider>
+          {children}
         </CommandDialogPrimitive.Popup>
       </CommandDialogViewport>
     </CommandDialogPortal>
@@ -99,14 +88,14 @@ function CommandDialogPopup({
 function Command({
   autoHighlight = "always",
   keepHighlight = true,
-  open = true,
   ...props
 }: React.ComponentProps<typeof Autocomplete>) {
   return (
     <Autocomplete
       autoHighlight={autoHighlight}
+      inline
       keepHighlight={keepHighlight}
-      open={open}
+      open
       {...props}
     />
   );
@@ -117,17 +106,15 @@ function CommandInput({
   placeholder = undefined,
   ...props
 }: React.ComponentProps<typeof AutocompleteInput>) {
-  const { inputRef } = React.useContext(CommandInputContext);
-
   return (
     <div className="px-2.5 py-1.5">
       <AutocompleteInput
+        autoFocus
         className={cn(
           "border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0",
           className,
         )}
         placeholder={placeholder}
-        ref={inputRef}
         size="lg"
         startAddon={<SearchIcon />}
         {...props}
@@ -231,9 +218,9 @@ function CommandSeparator({
 
 function CommandShortcut({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
-    <span
+    <kbd
       className={cn(
-        "ms-auto font-medium text-muted-foreground/72 text-xs tracking-widest",
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
         className,
       )}
       data-slot="command-shortcut"
diff --git a/apps/ui/registry/default/ui/menu.tsx b/apps/ui/registry/default/ui/menu.tsx
index 07f30dc87..9051f8f6b 100644
--- a/apps/ui/registry/default/ui/menu.tsx
+++ b/apps/ui/registry/default/ui/menu.tsx
@@ -185,11 +185,11 @@ function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
   );
 }
 
-function MenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+function MenuShortcut({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
-    <span
+    <kbd
       className={cn(
-        "ms-auto font-medium text-muted-foreground/72 text-xs tracking-widest",
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
         className,
       )}
       data-slot="menu-shortcut"
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
index 47e16ef7e..c106a302a 100644
--- a/packages/ui/src/components/command.tsx
+++ b/packages/ui/src/components/command.tsx
@@ -2,7 +2,7 @@
 
 import { Dialog as CommandDialogPrimitive } from "@base-ui/react/dialog";
 import { SearchIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 import { cn } from "@coss/ui/lib/utils";
 import {
   Autocomplete,
@@ -16,12 +16,6 @@ import {
   AutocompleteSeparator,
 } from "@coss/ui/components/autocomplete";
 
-const CommandInputContext = React.createContext<{
-  inputRef: React.RefObject<HTMLInputElement | null> | null;
-}>({
-  inputRef: null,
-});
-
 const CommandDialog = CommandDialogPrimitive.Root;
 
 const CommandDialogPortal = CommandDialogPrimitive.Portal;
@@ -72,8 +66,6 @@ function CommandDialogPopup({
   children,
   ...props
 }: CommandDialogPrimitive.Popup.Props) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
   return (
     <CommandDialogPortal>
       <CommandDialogBackdrop />
@@ -84,12 +76,9 @@ function CommandDialogPopup({
             className,
           )}
           data-slot="command-dialog-popup"
-          initialFocus={inputRef}
           {...props}
         >
-          <CommandInputContext.Provider value={{ inputRef }}>
-            {children}
-          </CommandInputContext.Provider>
+          {children}
         </CommandDialogPrimitive.Popup>
       </CommandDialogViewport>
     </CommandDialogPortal>
@@ -99,14 +88,14 @@ function CommandDialogPopup({
 function Command({
   autoHighlight = "always",
   keepHighlight = true,
-  open = true,
   ...props
 }: React.ComponentProps<typeof Autocomplete>) {
   return (
     <Autocomplete
       autoHighlight={autoHighlight}
+      inline
       keepHighlight={keepHighlight}
-      open={open}
+      open
       {...props}
     />
   );
@@ -117,17 +106,15 @@ function CommandInput({
   placeholder = undefined,
   ...props
 }: React.ComponentProps<typeof AutocompleteInput>) {
-  const { inputRef } = React.useContext(CommandInputContext);
-
   return (
     <div className="px-2.5 py-1.5">
       <AutocompleteInput
+        autoFocus
         className={cn(
           "border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0",
           className,
         )}
         placeholder={placeholder}
-        ref={inputRef}
         size="lg"
         startAddon={<SearchIcon />}
         {...props}
@@ -231,9 +218,9 @@ function CommandSeparator({
 
 function CommandShortcut({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
-    <span
+    <kbd
       className={cn(
-        "ms-auto font-medium text-muted-foreground/72 text-xs tracking-widest",
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
         className,
       )}
       data-slot="command-shortcut"
diff --git a/packages/ui/src/components/menu.tsx b/packages/ui/src/components/menu.tsx
index 7d2c90a3f..c41e84ea0 100644
--- a/packages/ui/src/components/menu.tsx
+++ b/packages/ui/src/components/menu.tsx
@@ -185,11 +185,11 @@ function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
   );
 }
 
-function MenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+function MenuShortcut({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
-    <span
+    <kbd
       className={cn(
-        "ms-auto font-medium text-muted-foreground/72 text-xs tracking-widest",
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
         className,
       )}
       data-slot="menu-shortcut"
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index a9a2de06a..8095884da 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -178,13 +178,13 @@
   * {
     @apply border-border outline-ring/50;
   }
-}
 
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--font-mono);
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+  }
 }
 
 @utility no-scrollbar {