diff --git a/public/r/data-grid-keyboard-shortcuts.json b/public/r/data-grid-keyboard-shortcuts.json
new file mode 100644
index 000000000..2cb67903b
--- /dev/null
+++ b/public/r/data-grid-keyboard-shortcuts.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-grid-keyboard-shortcuts",
+  "type": "registry:component",
+  "title": "Data Grid Keyboard Shortcuts",
+  "description": "A keyboard shortcuts dialog component for the data grid showing all available shortcuts",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "input",
+    "kbd",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx",
+      "content": "\"use client\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst SHORTCUT_KEY = \"/\";\n\ninterface ShortcutGroup {\n  title: string;\n  shortcuts: Array<{\n    keys: string[];\n    description: string;\n  }>;\n}\n\ninterface DataGridKeyboardShortcutsProps {\n  enableSearch?: boolean;\n}\n\nexport const DataGridKeyboardShortcuts = React.memo(\n  DataGridKeyboardShortcutsImpl,\n  (prev, next) => {\n    return prev.enableSearch === next.enableSearch;\n  },\n);\n\nfunction DataGridKeyboardShortcutsImpl({\n  enableSearch = false,\n}: DataGridKeyboardShortcutsProps) {\n  const [open, setOpen] = React.useState(false);\n  const [input, setInput] = React.useState(\"\");\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isMac =\n    typeof navigator !== \"undefined\"\n      ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)\n      : false;\n\n  const modKey = isMac ? \"⌘\" : \"Ctrl\";\n\n  const onOpenChange = React.useCallback((isOpen: boolean) => {\n    setOpen(isOpen);\n    if (!isOpen) {\n      setInput(\"\");\n    }\n  }, []);\n\n  const onOpenAutoFocus = React.useCallback((event: Event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInput(event.target.value);\n    },\n    [],\n  );\n\n  const shortcutGroups: ShortcutGroup[] = React.useMemo(\n    () => [\n      {\n        title: \"Navigation\",\n        shortcuts: [\n          {\n            keys: [\"↑\", \"↓\", \"←\", \"→\"],\n            description: \"Navigate between cells\",\n          },\n          {\n            keys: [\"Tab\"],\n            description: \"Move to next cell\",\n          },\n          {\n            keys: [\"Shift\", \"Tab\"],\n            description: \"Move to previous cell\",\n          },\n          {\n            keys: [\"Home\"],\n            description: \"Move to first column\",\n          },\n          {\n            keys: [\"End\"],\n            description: \"Move to last column\",\n          },\n          {\n            keys: [modKey, \"Home\"],\n            description: \"Move to first cell\",\n          },\n          {\n            keys: [modKey, \"End\"],\n            description: \"Move to last cell\",\n          },\n          {\n            keys: [\"PgUp\"],\n            description: \"Move up one page\",\n          },\n          {\n            keys: [\"PgDn\"],\n            description: \"Move down one page\",\n          },\n        ],\n      },\n      {\n        title: \"Selection\",\n        shortcuts: [\n          {\n            keys: [\"Shift\", \"↑↓←→\"],\n            description: \"Extend selection\",\n          },\n          {\n            keys: [modKey, \"A\"],\n            description: \"Select all cells\",\n          },\n          {\n            keys: [modKey, \"Click\"],\n            description: \"Toggle cell selection\",\n          },\n          {\n            keys: [\"Shift\", \"Click\"],\n            description: \"Select range\",\n          },\n          {\n            keys: [\"Esc\"],\n            description: \"Clear selection\",\n          },\n        ],\n      },\n      {\n        title: \"Editing\",\n        shortcuts: [\n          {\n            keys: [\"Enter\"],\n            description: \"Start editing cell\",\n          },\n          {\n            keys: [\"Double Click\"],\n            description: \"Start editing cell\",\n          },\n          {\n            keys: [\"Delete\"],\n            description: \"Clear selected cells\",\n          },\n          {\n            keys: [\"Backspace\"],\n            description: \"Clear selected cells\",\n          },\n        ],\n      },\n      ...(enableSearch\n        ? [\n            {\n              title: \"Search\",\n              shortcuts: [\n                {\n                  keys: [modKey, \"F\"],\n                  description: \"Open search\",\n                },\n                {\n                  keys: [\"Enter\"],\n                  description: \"Next match\",\n                },\n                {\n                  keys: [\"Shift\", \"Enter\"],\n                  description: \"Previous match\",\n                },\n                {\n                  keys: [\"Esc\"],\n                  description: \"Close search\",\n                },\n              ],\n            },\n          ]\n        : []),\n      {\n        title: \"Sorting\",\n        shortcuts: [\n          {\n            keys: [modKey, \"Shift\", \"S\"],\n            description: \"Toggle the sort menu\",\n          },\n          {\n            keys: [\"Backspace\"],\n            description: \"Remove sort (when focused)\",\n          },\n          {\n            keys: [\"Delete\"],\n            description: \"Remove sort (when focused)\",\n          },\n        ],\n      },\n      {\n        title: \"General\",\n        shortcuts: [\n          {\n            keys: [modKey, \"/\"],\n            description: \"Show keyboard shortcuts\",\n          },\n        ],\n      },\n    ],\n    [modKey, enableSearch],\n  );\n\n  const filteredGroups = React.useMemo(() => {\n    if (!input.trim()) return shortcutGroups;\n\n    const query = input.toLowerCase();\n    return shortcutGroups\n      .map((group) => ({\n        ...group,\n        shortcuts: group.shortcuts.filter(\n          (shortcut) =>\n            shortcut.description.toLowerCase().includes(query) ||\n            shortcut.keys.some((key) => key.toLowerCase().includes(query)),\n        ),\n      }))\n      .filter((group) => group.shortcuts.length > 0);\n  }, [shortcutGroups, input]);\n\n  React.useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      if ((event.ctrlKey || event.metaKey) && event.key === SHORTCUT_KEY) {\n        event.preventDefault();\n        setOpen(true);\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, []);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className=\"max-w-2xl px-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n        showCloseButton={false}\n      >\n        <DialogClose className=\"absolute top-6 right-6\" asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-6\">\n            <XIcon />\n          </Button>\n        </DialogClose>\n        <DialogHeader className=\"px-6\">\n          <DialogTitle>Keyboard shortcuts</DialogTitle>\n          <DialogDescription className=\"sr-only\">\n            Use these keyboard shortcuts to navigate and interact with the data\n            grid more efficiently.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"px-6\">\n          <div className=\"relative\">\n            <SearchIcon className=\"-translate-y-1/2 absolute top-1/2 left-3 size-3.5 text-muted-foreground\" />\n            <Input\n              ref={inputRef}\n              placeholder=\"Search shortcuts...\"\n              className=\"h-8 pl-8\"\n              value={input}\n              onChange={onInputChange}\n            />\n          </div>\n        </div>\n        <Separator className=\"mx-auto data-[orientation=horizontal]:w-[calc(100%-(--spacing(12)))]\" />\n        <div className=\"h-[40vh] overflow-y-auto px-6\">\n          {filteredGroups.length === 0 ? (\n            <div className=\"flex h-full flex-col items-center justify-center gap-3 text-center\">\n              <div className=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground\">\n                <SearchIcon className=\"pointer-events-none size-6\" />\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"font-medium text-lg tracking-tight\">\n                  No shortcuts found\n                </div>\n                <p className=\"text-muted-foreground text-sm\">\n                  Try searching for a different term.\n                </p>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-6\">\n              {filteredGroups.map((shortcutGroup) => (\n                <div key={shortcutGroup.title} className=\"flex flex-col gap-2\">\n                  <h3 className=\"font-semibold text-foreground text-sm\">\n                    {shortcutGroup.title}\n                  </h3>\n                  <div className=\"divide-y divide-border rounded-md border\">\n                    {shortcutGroup.shortcuts.map((shortcut, index) => (\n                      <ShortcutCard\n                        key={index}\n                        keys={shortcut.keys}\n                        description={shortcut.description}\n                      />\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction ShortcutCard({\n  keys,\n  description,\n}: ShortcutGroup[\"shortcuts\"][number]) {\n  return (\n    <div className=\"flex items-center gap-4 px-3 py-2\">\n      <span className=\"flex-1 text-sm\">{description}</span>\n      <KbdGroup className=\"shrink-0\">\n        {keys.map((key, index) => (\n          <React.Fragment key={key}>\n            {index > 0 && (\n              <span className=\"text-muted-foreground text-xs\">+</span>\n            )}\n            <Kbd>{key}</Kbd>\n          </React.Fragment>\n        ))}\n      </KbdGroup>\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/r/data-grid.json b/public/r/data-grid.json
index 672083bbd..92d53c5af 100644
--- a/public/r/data-grid.json
+++ b/public/r/data-grid.json
@@ -16,10 +16,8 @@
     "calendar",
     "checkbox",
     "command",
-    "dialog",
     "dropdown-menu",
     "input",
-    "kbd",
     "popover",
     "select",
     "separator",
@@ -29,7 +27,7 @@
   "files": [
     {
       "path": "src/components/data-grid/data-grid.tsx",
-      "content": "\"use client\";\n\nimport { flexRender } from \"@tanstack/react-table\";\nimport { Plus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridColumnHeader } from \"@/components/data-grid/data-grid-column-header\";\nimport { DataGridContextMenu } from \"@/components/data-grid/data-grid-context-menu\";\nimport { DataGridKeyboardShortcuts } from \"@/components/data-grid/data-grid-keyboard-shortcuts\";\nimport { DataGridRow } from \"@/components/data-grid/data-grid-row\";\nimport { DataGridSearch } from \"@/components/data-grid/data-grid-search\";\nimport type { useDataGrid } from \"@/hooks/use-data-grid\";\nimport { getCommonPinningStyles } from \"@/lib/data-table\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataGridProps<TData>\n  extends ReturnType<typeof useDataGrid<TData>>,\n    React.ComponentProps<\"div\"> {\n  height?: number;\n}\n\nexport function DataGrid<TData>({\n  dataGridRef,\n  headerRef,\n  rowMapRef,\n  footerRef,\n  table,\n  rowVirtualizer,\n  height = 600,\n  searchState,\n  columnSizeVars,\n  onRowAdd,\n  className,\n  ...props\n}: DataGridProps<TData>) {\n  const rows = table.getRowModel().rows;\n  const columns = table.getAllColumns();\n\n  const meta = table.options.meta;\n  const rowHeight = meta?.rowHeight ?? \"short\";\n  const focusedCell = meta?.focusedCell ?? null;\n\n  const onGridContextMenu = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    },\n    [],\n  );\n\n  const onAddRowKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!onRowAdd) return;\n\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onRowAdd();\n      }\n    },\n    [onRowAdd],\n  );\n\n  return (\n    <div\n      data-slot=\"grid-wrapper\"\n      className={cn(\"relative flex w-full flex-col\", className)}\n      {...props}\n    >\n      {searchState && <DataGridSearch {...searchState} />}\n      <DataGridKeyboardShortcuts enableSearch={!!searchState} />\n      <DataGridContextMenu table={table} />\n      <div\n        role=\"grid\"\n        aria-label=\"Data grid\"\n        aria-rowcount={rows.length + (onRowAdd ? 1 : 0)}\n        aria-colcount={columns.length}\n        data-slot=\"grid\"\n        tabIndex={0}\n        ref={dataGridRef}\n        className=\"relative grid select-none overflow-auto rounded-md border focus:outline-none\"\n        style={{\n          ...columnSizeVars,\n          height: `${height}px`,\n        }}\n        onContextMenu={onGridContextMenu}\n      >\n        <div\n          role=\"rowgroup\"\n          data-slot=\"grid-header\"\n          ref={headerRef}\n          className=\"sticky top-0 z-10 grid border-b bg-background\"\n        >\n          {table.getHeaderGroups().map((headerGroup, rowIndex) => (\n            <div\n              key={headerGroup.id}\n              role=\"row\"\n              aria-rowindex={rowIndex + 1}\n              data-slot=\"grid-header-row\"\n              tabIndex={-1}\n              className=\"flex w-full\"\n            >\n              {headerGroup.headers.map((header, colIndex) => {\n                const sorting = table.getState().sorting;\n                const currentSort = sorting.find(\n                  (sort) => sort.id === header.column.id,\n                );\n                const isSortable = header.column.getCanSort();\n\n                return (\n                  <div\n                    key={header.id}\n                    role=\"columnheader\"\n                    aria-colindex={colIndex + 1}\n                    aria-sort={\n                      currentSort?.desc === false\n                        ? \"ascending\"\n                        : currentSort?.desc === true\n                          ? \"descending\"\n                          : isSortable\n                            ? \"none\"\n                            : undefined\n                    }\n                    data-slot=\"grid-header-cell\"\n                    tabIndex={-1}\n                    className={cn(\"relative\", {\n                      \"border-r\": header.column.id !== \"select\",\n                    })}\n                    style={{\n                      ...getCommonPinningStyles({ column: header.column }),\n                      width: `calc(var(--header-${header.id}-size) * 1px)`,\n                    }}\n                  >\n                    {header.isPlaceholder ? null : typeof header.column\n                        .columnDef.header === \"function\" ? (\n                      <div className=\"size-full px-3 py-1.5\">\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                      </div>\n                    ) : (\n                      <DataGridColumnHeader header={header} table={table} />\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n        <div\n          role=\"rowgroup\"\n          data-slot=\"grid-body\"\n          className=\"relative grid\"\n          style={{\n            height: `${rowVirtualizer.getTotalSize()}px`,\n          }}\n        >\n          {rowVirtualizer.getVirtualIndexes().map((virtualRowIndex) => {\n            const row = rows[virtualRowIndex];\n            if (!row) return null;\n\n            return (\n              <DataGridRow\n                key={row.id}\n                row={row}\n                rowMapRef={rowMapRef}\n                virtualRowIndex={virtualRowIndex}\n                rowVirtualizer={rowVirtualizer}\n                rowHeight={rowHeight}\n                focusedCell={focusedCell}\n              />\n            );\n          })}\n        </div>\n        {onRowAdd && (\n          <div\n            role=\"rowgroup\"\n            data-slot=\"grid-footer\"\n            ref={footerRef}\n            className=\"sticky bottom-0 z-10 grid border-t bg-background\"\n          >\n            <div\n              role=\"row\"\n              aria-rowindex={rows.length + 2}\n              data-slot=\"grid-add-row\"\n              tabIndex={-1}\n              className=\"flex w-full\"\n            >\n              <div\n                role=\"gridcell\"\n                tabIndex={0}\n                className=\"relative flex h-9 grow items-center bg-muted/30 transition-colors hover:bg-muted/50 focus:bg-muted/50 focus:outline-none\"\n                style={{\n                  width: table.getTotalSize(),\n                  minWidth: table.getTotalSize(),\n                }}\n                onClick={onRowAdd}\n                onKeyDown={onAddRowKeyDown}\n              >\n                <div className=\"sticky left-0 flex items-center gap-2 px-3 text-muted-foreground\">\n                  <Plus className=\"size-3.5\" />\n                  <span className=\"text-sm\">Add row</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { flexRender } from \"@tanstack/react-table\";\nimport { Plus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { DataGridColumnHeader } from \"@/components/data-grid/data-grid-column-header\";\nimport { DataGridContextMenu } from \"@/components/data-grid/data-grid-context-menu\";\nimport { DataGridRow } from \"@/components/data-grid/data-grid-row\";\nimport { DataGridSearch } from \"@/components/data-grid/data-grid-search\";\nimport type { useDataGrid } from \"@/hooks/use-data-grid\";\nimport { getCommonPinningStyles } from \"@/lib/data-table\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataGridProps<TData>\n  extends ReturnType<typeof useDataGrid<TData>>,\n    React.ComponentProps<\"div\"> {\n  height?: number;\n}\n\nexport function DataGrid<TData>({\n  dataGridRef,\n  headerRef,\n  rowMapRef,\n  footerRef,\n  table,\n  rowVirtualizer,\n  height = 600,\n  searchState,\n  columnSizeVars,\n  onRowAdd,\n  className,\n  ...props\n}: DataGridProps<TData>) {\n  const rows = table.getRowModel().rows;\n  const columns = table.getAllColumns();\n\n  const meta = table.options.meta;\n  const rowHeight = meta?.rowHeight ?? \"short\";\n  const focusedCell = meta?.focusedCell ?? null;\n\n  const onGridContextMenu = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    },\n    [],\n  );\n\n  const onAddRowKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!onRowAdd) return;\n\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onRowAdd();\n      }\n    },\n    [onRowAdd],\n  );\n\n  return (\n    <div\n      data-slot=\"grid-wrapper\"\n      className={cn(\"relative flex w-full flex-col\", className)}\n      {...props}\n    >\n      {searchState && <DataGridSearch {...searchState} />}\n      <DataGridContextMenu table={table} />\n      <div\n        role=\"grid\"\n        aria-label=\"Data grid\"\n        aria-rowcount={rows.length + (onRowAdd ? 1 : 0)}\n        aria-colcount={columns.length}\n        data-slot=\"grid\"\n        tabIndex={0}\n        ref={dataGridRef}\n        className=\"relative grid select-none overflow-auto rounded-md border focus:outline-none\"\n        style={{\n          ...columnSizeVars,\n          height: `${height}px`,\n        }}\n        onContextMenu={onGridContextMenu}\n      >\n        <div\n          role=\"rowgroup\"\n          data-slot=\"grid-header\"\n          ref={headerRef}\n          className=\"sticky top-0 z-10 grid border-b bg-background\"\n        >\n          {table.getHeaderGroups().map((headerGroup, rowIndex) => (\n            <div\n              key={headerGroup.id}\n              role=\"row\"\n              aria-rowindex={rowIndex + 1}\n              data-slot=\"grid-header-row\"\n              tabIndex={-1}\n              className=\"flex w-full\"\n            >\n              {headerGroup.headers.map((header, colIndex) => {\n                const sorting = table.getState().sorting;\n                const currentSort = sorting.find(\n                  (sort) => sort.id === header.column.id,\n                );\n                const isSortable = header.column.getCanSort();\n\n                return (\n                  <div\n                    key={header.id}\n                    role=\"columnheader\"\n                    aria-colindex={colIndex + 1}\n                    aria-sort={\n                      currentSort?.desc === false\n                        ? \"ascending\"\n                        : currentSort?.desc === true\n                          ? \"descending\"\n                          : isSortable\n                            ? \"none\"\n                            : undefined\n                    }\n                    data-slot=\"grid-header-cell\"\n                    tabIndex={-1}\n                    className={cn(\"relative\", {\n                      \"border-r\": header.column.id !== \"select\",\n                    })}\n                    style={{\n                      ...getCommonPinningStyles({ column: header.column }),\n                      width: `calc(var(--header-${header.id}-size) * 1px)`,\n                    }}\n                  >\n                    {header.isPlaceholder ? null : typeof header.column\n                        .columnDef.header === \"function\" ? (\n                      <div className=\"size-full px-3 py-1.5\">\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                      </div>\n                    ) : (\n                      <DataGridColumnHeader header={header} table={table} />\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n        <div\n          role=\"rowgroup\"\n          data-slot=\"grid-body\"\n          className=\"relative grid\"\n          style={{\n            height: `${rowVirtualizer.getTotalSize()}px`,\n          }}\n        >\n          {rowVirtualizer.getVirtualIndexes().map((virtualRowIndex) => {\n            const row = rows[virtualRowIndex];\n            if (!row) return null;\n\n            return (\n              <DataGridRow\n                key={row.id}\n                row={row}\n                rowMapRef={rowMapRef}\n                virtualRowIndex={virtualRowIndex}\n                rowVirtualizer={rowVirtualizer}\n                rowHeight={rowHeight}\n                focusedCell={focusedCell}\n              />\n            );\n          })}\n        </div>\n        {onRowAdd && (\n          <div\n            role=\"rowgroup\"\n            data-slot=\"grid-footer\"\n            ref={footerRef}\n            className=\"sticky bottom-0 z-10 grid border-t bg-background\"\n          >\n            <div\n              role=\"row\"\n              aria-rowindex={rows.length + 2}\n              data-slot=\"grid-add-row\"\n              tabIndex={-1}\n              className=\"flex w-full\"\n            >\n              <div\n                role=\"gridcell\"\n                tabIndex={0}\n                className=\"relative flex h-9 grow items-center bg-muted/30 transition-colors hover:bg-muted/50 focus:bg-muted/50 focus:outline-none\"\n                style={{\n                  width: table.getTotalSize(),\n                  minWidth: table.getTotalSize(),\n                }}\n                onClick={onRowAdd}\n                onKeyDown={onAddRowKeyDown}\n              >\n                <div className=\"sticky left-0 flex items-center gap-2 px-3 text-muted-foreground\">\n                  <Plus className=\"size-3.5\" />\n                  <span className=\"text-sm\">Add row</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid.tsx"
     },
@@ -63,12 +61,6 @@
       "type": "registry:component",
       "target": "src/components/data-grid/data-grid-context-menu.tsx"
     },
-    {
-      "path": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx",
-      "content": "\"use client\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst SHORTCUT_KEY = \"/\";\n\ninterface ShortcutGroup {\n  title: string;\n  shortcuts: Array<{\n    keys: string[];\n    description: string;\n  }>;\n}\n\ninterface DataGridKeyboardShortcutsProps {\n  enableSearch?: boolean;\n}\n\nexport const DataGridKeyboardShortcuts = React.memo(\n  DataGridKeyboardShortcutsImpl,\n  (prev, next) => {\n    return prev.enableSearch === next.enableSearch;\n  },\n);\n\nfunction DataGridKeyboardShortcutsImpl({\n  enableSearch = false,\n}: DataGridKeyboardShortcutsProps) {\n  const [open, setOpen] = React.useState(false);\n  const [input, setInput] = React.useState(\"\");\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isMac =\n    typeof navigator !== \"undefined\"\n      ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)\n      : false;\n\n  const modKey = isMac ? \"⌘\" : \"Ctrl\";\n\n  const onOpenChange = React.useCallback((isOpen: boolean) => {\n    setOpen(isOpen);\n    if (!isOpen) {\n      setInput(\"\");\n    }\n  }, []);\n\n  const onOpenAutoFocus = React.useCallback((event: Event) => {\n    event.preventDefault();\n    inputRef.current?.focus();\n  }, []);\n\n  const onInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInput(event.target.value);\n    },\n    [],\n  );\n\n  const shortcutGroups: ShortcutGroup[] = React.useMemo(\n    () => [\n      {\n        title: \"Navigation\",\n        shortcuts: [\n          {\n            keys: [\"↑\", \"↓\", \"←\", \"→\"],\n            description: \"Navigate between cells\",\n          },\n          {\n            keys: [\"Tab\"],\n            description: \"Move to next cell\",\n          },\n          {\n            keys: [\"Shift\", \"Tab\"],\n            description: \"Move to previous cell\",\n          },\n          {\n            keys: [\"Home\"],\n            description: \"Move to first column\",\n          },\n          {\n            keys: [\"End\"],\n            description: \"Move to last column\",\n          },\n          {\n            keys: [modKey, \"Home\"],\n            description: \"Move to first cell\",\n          },\n          {\n            keys: [modKey, \"End\"],\n            description: \"Move to last cell\",\n          },\n          {\n            keys: [\"PgUp\"],\n            description: \"Move up one page\",\n          },\n          {\n            keys: [\"PgDn\"],\n            description: \"Move down one page\",\n          },\n        ],\n      },\n      {\n        title: \"Selection\",\n        shortcuts: [\n          {\n            keys: [\"Shift\", \"↑↓←→\"],\n            description: \"Extend selection\",\n          },\n          {\n            keys: [modKey, \"A\"],\n            description: \"Select all cells\",\n          },\n          {\n            keys: [modKey, \"Click\"],\n            description: \"Toggle cell selection\",\n          },\n          {\n            keys: [\"Shift\", \"Click\"],\n            description: \"Select range\",\n          },\n          {\n            keys: [\"Esc\"],\n            description: \"Clear selection\",\n          },\n        ],\n      },\n      {\n        title: \"Editing\",\n        shortcuts: [\n          {\n            keys: [\"Enter\"],\n            description: \"Start editing cell\",\n          },\n          {\n            keys: [\"Double Click\"],\n            description: \"Start editing cell\",\n          },\n          {\n            keys: [\"Delete\"],\n            description: \"Clear selected cells\",\n          },\n          {\n            keys: [\"Backspace\"],\n            description: \"Clear selected cells\",\n          },\n        ],\n      },\n      ...(enableSearch\n        ? [\n            {\n              title: \"Search\",\n              shortcuts: [\n                {\n                  keys: [modKey, \"F\"],\n                  description: \"Open search\",\n                },\n                {\n                  keys: [\"Enter\"],\n                  description: \"Next match\",\n                },\n                {\n                  keys: [\"Shift\", \"Enter\"],\n                  description: \"Previous match\",\n                },\n                {\n                  keys: [\"Esc\"],\n                  description: \"Close search\",\n                },\n              ],\n            },\n          ]\n        : []),\n      {\n        title: \"Sorting\",\n        shortcuts: [\n          {\n            keys: [modKey, \"Shift\", \"S\"],\n            description: \"Toggle the sort menu\",\n          },\n          {\n            keys: [\"Backspace\"],\n            description: \"Remove sort (when focused)\",\n          },\n          {\n            keys: [\"Delete\"],\n            description: \"Remove sort (when focused)\",\n          },\n        ],\n      },\n      {\n        title: \"General\",\n        shortcuts: [\n          {\n            keys: [modKey, \"/\"],\n            description: \"Show keyboard shortcuts\",\n          },\n        ],\n      },\n    ],\n    [modKey, enableSearch],\n  );\n\n  const filteredGroups = React.useMemo(() => {\n    if (!input.trim()) return shortcutGroups;\n\n    const query = input.toLowerCase();\n    return shortcutGroups\n      .map((group) => ({\n        ...group,\n        shortcuts: group.shortcuts.filter(\n          (shortcut) =>\n            shortcut.description.toLowerCase().includes(query) ||\n            shortcut.keys.some((key) => key.toLowerCase().includes(query)),\n        ),\n      }))\n      .filter((group) => group.shortcuts.length > 0);\n  }, [shortcutGroups, input]);\n\n  React.useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      if ((event.ctrlKey || event.metaKey) && event.key === SHORTCUT_KEY) {\n        event.preventDefault();\n        setOpen(true);\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, []);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className=\"max-w-2xl px-0\"\n        onOpenAutoFocus={onOpenAutoFocus}\n        showCloseButton={false}\n      >\n        <DialogClose className=\"absolute top-6 right-6\" asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-6\">\n            <XIcon />\n          </Button>\n        </DialogClose>\n        <DialogHeader className=\"px-6\">\n          <DialogTitle>Keyboard shortcuts</DialogTitle>\n          <DialogDescription className=\"sr-only\">\n            Use these keyboard shortcuts to navigate and interact with the data\n            grid more efficiently.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"px-6\">\n          <div className=\"relative\">\n            <SearchIcon className=\"-translate-y-1/2 absolute top-1/2 left-3 size-3.5 text-muted-foreground\" />\n            <Input\n              ref={inputRef}\n              placeholder=\"Search shortcuts...\"\n              className=\"h-8 pl-8\"\n              value={input}\n              onChange={onInputChange}\n            />\n          </div>\n        </div>\n        <Separator className=\"mx-auto data-[orientation=horizontal]:w-[calc(100%-(--spacing(12)))]\" />\n        <div className=\"h-[40vh] overflow-y-auto px-6\">\n          {filteredGroups.length === 0 ? (\n            <div className=\"flex h-full flex-col items-center justify-center gap-3 text-center\">\n              <div className=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground\">\n                <SearchIcon className=\"pointer-events-none size-6\" />\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"font-medium text-lg tracking-tight\">\n                  No shortcuts found\n                </div>\n                <p className=\"text-muted-foreground text-sm\">\n                  Try searching for a different term.\n                </p>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-6\">\n              {filteredGroups.map((shortcutGroup) => (\n                <div key={shortcutGroup.title} className=\"flex flex-col gap-2\">\n                  <h3 className=\"font-semibold text-foreground text-sm\">\n                    {shortcutGroup.title}\n                  </h3>\n                  <div className=\"divide-y divide-border rounded-md border\">\n                    {shortcutGroup.shortcuts.map((shortcut, index) => (\n                      <ShortcutCard\n                        key={index}\n                        keys={shortcut.keys}\n                        description={shortcut.description}\n                      />\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction ShortcutCard({\n  keys,\n  description,\n}: ShortcutGroup[\"shortcuts\"][number]) {\n  return (\n    <div className=\"flex items-center gap-4 px-3 py-2\">\n      <span className=\"flex-1 text-sm\">{description}</span>\n      <KbdGroup className=\"shrink-0\">\n        {keys.map((key, index) => (\n          <React.Fragment key={key}>\n            {index > 0 && (\n              <span className=\"text-muted-foreground text-xs\">+</span>\n            )}\n            <Kbd>{key}</Kbd>\n          </React.Fragment>\n        ))}\n      </KbdGroup>\n    </div>\n  );\n}\n",
-      "type": "registry:component",
-      "target": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx"
-    },
     {
       "path": "src/components/data-grid/data-grid-row.tsx",
       "content": "\"use client\";\n\nimport { flexRender, type Row } from \"@tanstack/react-table\";\nimport type { Virtualizer } from \"@tanstack/react-virtual\";\nimport * as React from \"react\";\nimport { useComposedRefs } from \"@/lib/compose-refs\";\nimport { getRowHeightValue } from \"@/lib/data-grid\";\nimport { getCommonPinningStyles } from \"@/lib/data-table\";\nimport { cn } from \"@/lib/utils\";\nimport type { CellPosition, RowHeightValue } from \"@/types/data-grid\";\n\ninterface DataGridRowProps<TData> extends React.ComponentProps<\"div\"> {\n  row: Row<TData>;\n  rowVirtualizer: Virtualizer<HTMLDivElement, Element>;\n  virtualRowIndex: number;\n  rowMapRef: React.RefObject<Map<number, HTMLDivElement>>;\n  rowHeight: RowHeightValue;\n  focusedCell: CellPosition | null;\n}\n\nexport const DataGridRow = React.memo(DataGridRowImpl, (prev, next) => {\n  if (prev.row.id !== next.row.id) {\n    return false;\n  }\n\n  const prevRowIndex = prev.virtualRowIndex;\n  const nextRowIndex = next.virtualRowIndex;\n\n  const prevHasFocus = prev.focusedCell?.rowIndex === prevRowIndex;\n  const nextHasFocus = next.focusedCell?.rowIndex === nextRowIndex;\n\n  if (prevHasFocus !== nextHasFocus) {\n    return false;\n  }\n\n  if (nextHasFocus && prevHasFocus) {\n    const prevFocusedCol = prev.focusedCell?.columnId;\n    const nextFocusedCol = next.focusedCell?.columnId;\n    if (prevFocusedCol !== nextFocusedCol) {\n      return false;\n    }\n  }\n\n  if (next.rowVirtualizer.isScrolling) {\n    return true;\n  }\n\n  return false;\n}) as typeof DataGridRowImpl;\n\nfunction DataGridRowImpl<TData>({\n  row,\n  virtualRowIndex,\n  rowVirtualizer,\n  rowMapRef,\n  rowHeight,\n  focusedCell,\n  ref,\n  className,\n  ...props\n}: DataGridRowProps<TData>) {\n  const rowRef = useComposedRefs(ref, (node) => {\n    if (node && typeof virtualRowIndex !== \"undefined\") {\n      rowVirtualizer.measureElement(node);\n      rowMapRef.current.set(virtualRowIndex, node);\n    }\n  });\n\n  const isRowSelected = row.getIsSelected();\n\n  return (\n    <div\n      key={row.id}\n      role=\"row\"\n      aria-rowindex={virtualRowIndex + 2}\n      aria-selected={isRowSelected}\n      data-index={virtualRowIndex}\n      data-slot=\"grid-row\"\n      ref={rowRef}\n      tabIndex={-1}\n      className={cn(\"absolute flex w-full border-b\", className)}\n      style={{\n        height: `${getRowHeightValue(rowHeight)}px`,\n      }}\n      {...props}\n    >\n      {row.getVisibleCells().map((cell, colIndex) => {\n        const isCellFocused =\n          focusedCell?.rowIndex === virtualRowIndex &&\n          focusedCell?.columnId === cell.column.id;\n\n        return (\n          <div\n            key={cell.id}\n            role=\"gridcell\"\n            aria-colindex={colIndex + 1}\n            data-highlighted={isCellFocused ? \"\" : undefined}\n            data-slot=\"grid-cell\"\n            tabIndex={-1}\n            className={cn({\n              \"border-r\": cell.column.id !== \"select\",\n            })}\n            style={{\n              ...getCommonPinningStyles({ column: cell.column }),\n              width: `calc(var(--col-${cell.column.id}-size) * 1px)`,\n            }}\n          >\n            {typeof cell.column.columnDef.header === \"function\" ? (\n              <div\n                className={cn(\"size-full px-3 py-1.5\", {\n                  \"bg-primary/10\": isRowSelected,\n                })}\n              >\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </div>\n            ) : (\n              flexRender(cell.column.columnDef.cell, cell.getContext())\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
diff --git a/public/r/registry.json b/public/r/registry.json
index f507dd255..f73cfd9be 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -329,10 +329,8 @@
         "calendar",
         "checkbox",
         "command",
-        "dialog",
         "dropdown-menu",
         "input",
-        "kbd",
         "popover",
         "select",
         "separator",
@@ -376,11 +374,6 @@
           "type": "registry:component",
           "target": "src/components/data-grid/data-grid-context-menu.tsx"
         },
-        {
-          "path": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx",
-          "type": "registry:component",
-          "target": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx"
-        },
         {
           "path": "src/components/data-grid/data-grid-row.tsx",
           "type": "registry:component",
@@ -477,6 +470,21 @@
           "target": "src/components/data-grid/data-grid-view-menu.tsx"
         }
       ]
+    },
+    {
+      "name": "data-grid-keyboard-shortcuts",
+      "type": "registry:component",
+      "title": "Data Grid Keyboard Shortcuts",
+      "description": "A keyboard shortcuts dialog component for the data grid showing all available shortcuts",
+      "registryDependencies": ["button", "dialog", "input", "kbd", "separator"],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx",
+          "type": "registry:component",
+          "target": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx"
+        }
+      ]
     }
   ]
 }
diff --git a/registry.json b/registry.json
index f507dd255..f73cfd9be 100644
--- a/registry.json
+++ b/registry.json
@@ -329,10 +329,8 @@
         "calendar",
         "checkbox",
         "command",
-        "dialog",
         "dropdown-menu",
         "input",
-        "kbd",
         "popover",
         "select",
         "separator",
@@ -376,11 +374,6 @@
           "type": "registry:component",
           "target": "src/components/data-grid/data-grid-context-menu.tsx"
         },
-        {
-          "path": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx",
-          "type": "registry:component",
-          "target": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx"
-        },
         {
           "path": "src/components/data-grid/data-grid-row.tsx",
           "type": "registry:component",
@@ -477,6 +470,21 @@
           "target": "src/components/data-grid/data-grid-view-menu.tsx"
         }
       ]
+    },
+    {
+      "name": "data-grid-keyboard-shortcuts",
+      "type": "registry:component",
+      "title": "Data Grid Keyboard Shortcuts",
+      "description": "A keyboard shortcuts dialog component for the data grid showing all available shortcuts",
+      "registryDependencies": ["button", "dialog", "input", "kbd", "separator"],
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx",
+          "type": "registry:component",
+          "target": "src/components/data-grid/data-grid-keyboard-shortcuts.tsx"
+        }
+      ]
     }
   ]
 }
diff --git a/src/components/data-grid/data-grid-demo.tsx b/src/components/data-grid/data-grid-demo.tsx
index 369171b83..5194d703e 100644
--- a/src/components/data-grid/data-grid-demo.tsx
+++ b/src/components/data-grid/data-grid-demo.tsx
@@ -4,6 +4,7 @@ import { faker } from "@faker-js/faker";
 import type { ColumnDef } from "@tanstack/react-table";
 import * as React from "react";
 import { DataGrid } from "@/components/data-grid/data-grid";
+import { DataGridKeyboardShortcuts } from "@/components/data-grid/data-grid-keyboard-shortcuts";
 import { DataGridRowHeightMenu } from "@/components/data-grid/data-grid-row-height-menu";
 import { DataGridSortMenu } from "@/components/data-grid/data-grid-sort-menu";
 import { DataGridViewMenu } from "@/components/data-grid/data-grid-view-menu";
@@ -347,6 +348,7 @@ export function DataGridDemo() {
         <DataGridRowHeightMenu table={table} align="end" />
         <DataGridViewMenu table={table} align="end" />
       </div>
+      <DataGridKeyboardShortcuts enableSearch={!!dataGridProps.searchState} />
       <DataGrid {...dataGridProps} table={table} height={height} />
     </div>
   );
diff --git a/src/components/data-grid/data-grid.tsx b/src/components/data-grid/data-grid.tsx
index 16db41720..d92559ed3 100644
--- a/src/components/data-grid/data-grid.tsx
+++ b/src/components/data-grid/data-grid.tsx
@@ -5,7 +5,6 @@ import { Plus } from "lucide-react";
 import * as React from "react";
 import { DataGridColumnHeader } from "@/components/data-grid/data-grid-column-header";
 import { DataGridContextMenu } from "@/components/data-grid/data-grid-context-menu";
-import { DataGridKeyboardShortcuts } from "@/components/data-grid/data-grid-keyboard-shortcuts";
 import { DataGridRow } from "@/components/data-grid/data-grid-row";
 import { DataGridSearch } from "@/components/data-grid/data-grid-search";
 import type { useDataGrid } from "@/hooks/use-data-grid";
@@ -65,7 +64,6 @@ export function DataGrid<TData>({
       {...props}
     >
       {searchState && <DataGridSearch {...searchState} />}
-      <DataGridKeyboardShortcuts enableSearch={!!searchState} />
       <DataGridContextMenu table={table} />
       <div
         role="grid"