From 243e079a2c44e7bbd4eb24cf0d96ce4aeae438e6 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 20 May 2026 15:45:32 +0200
Subject: [PATCH] chore: remove `_Shadcn_` suffix from `Command` components
 (#46153)

## Problem

The `_Shadcn_` suffix isn't needed anymore on `Command` components

## Solution

- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../design-system/components/command-menu.tsx | 50 ++++++-------
 .../default/example/combobox-demo.tsx         | 32 ++++-----
 .../example/combobox-dropdown-menu.tsx        | 32 ++++-----
 .../default/example/combobox-form.tsx         | 32 ++++-----
 .../default/example/combobox-popover.tsx      | 32 ++++-----
 .../default/example/combobox-responsive.tsx   | 32 ++++-----
 .../registry/default/example/command-demo.tsx | 68 +++++++++---------
 .../default/example/command-dialog.tsx        | 62 ++++++++--------
 .../ProjectConfigVariables.ComboBox.tsx       | 18 ++---
 apps/docs/features/ui/InfoTooltip.tsx         | 10 +--
 apps/docs/features/ui/McpConfigPanel.tsx      | 52 +++++++-------
 apps/learn/components/command-menu.tsx        | 56 +++++++--------
 .../PermissionResourceSelector.tsx            | 32 ++++-----
 .../Account/Preferences/TimezoneSettings.tsx  | 36 +++++-----
 .../ContextSearchResults.shared.tsx           |  6 +-
 .../PolicyEditorPanel/PolicyDetailsV2.tsx     | 32 ++++-----
 .../Auth/RLSTester/UserSelector.tsx           | 32 ++++-----
 .../ThirdPartyAuthForm/AwsRegionSelector.tsx  | 32 ++++-----
 .../NewPaymentMethodElement.tsx               | 12 ++--
 .../BranchManagement/BranchSelector.tsx       | 32 ++++-----
 .../interfaces/Connect/ConnectDropdown.tsx    | 32 ++++-----
 .../ConnectSheet/FrameworkSelector.tsx        | 32 ++++-----
 .../Backups/PITR/TimezoneSelection.tsx        | 32 ++++-----
 .../Database/Indexes/CreateIndexSidePanel.tsx | 54 +++++++-------
 .../DestinationForm/PublicationsComboBox.tsx  | 46 ++++++------
 .../CronJobs/EdgeFunctionSection.tsx          | 32 ++++-----
 .../Vercel/OrganizationPicker.tsx             | 32 ++++-----
 .../VercelGithub/ProjectLinker.tsx            | 54 +++++++-------
 .../Integrations/Wrappers/ColumnType.tsx      | 44 ++++++------
 .../Wrappers/WrapperTableEditor.tsx           | 32 ++++-----
 .../BillingCustomerDataForm.tsx               | 12 ++--
 .../Apps/CreateAppSheet/CreateAppSheet.tsx    | 32 ++++-----
 .../interfaces/Organization/Usage/Usage.tsx   | 10 +--
 .../ProjectAPIDocs/LanguageSelector.tsx       | 28 ++++----
 .../SecondLevelNav.ResourcePicker.tsx         | 28 +++-----
 .../SecondLevelNav.StoragePicker.tsx          | 35 ++++------
 .../ProjectHome/SnippetDropdown.tsx           | 36 +++++-----
 .../RealtimeFilterPopover/TableSelector.tsx   | 41 +++++------
 .../interfaces/Reports/MetricOptions.tsx      | 36 +++++-----
 .../Reports/ReportFilterPopover.tsx           | 34 ++++-----
 .../Reports/v2/ReportsSelectFilter.tsx        | 14 +---
 .../interfaces/SQLEditor/MoveQueryModal.tsx   | 48 ++++++-------
 .../Settings/API/ExposedFunctionSelector.tsx  | 28 ++++----
 .../Settings/API/ExposedSchemaSelector.tsx    | 34 ++++-----
 .../Settings/API/ExposedTableSelector.tsx     | 28 ++++----
 .../GitHubRepositoryField.tsx                 | 52 +++++++-------
 .../Settings/Logs/LogsQueryPanel.tsx          | 32 ++++-----
 .../VectorBucketTableExamplesSheet.tsx        | 28 ++++----
 .../interfaces/Support/ProjectAndPlanInfo.tsx | 10 +--
 .../ColumnEditor/ColumnType.tsx               | 44 ++++++------
 .../SidePanelEditor/TableEditor/Column.tsx    | 36 +++++-----
 .../UserDropdown/TimezoneDropdown.tsx         | 36 +++++-----
 .../BranchDropdownCommandContent.tsx          | 70 +++++++++----------
 .../layouts/AppLayout/BranchLink.tsx          |  6 +-
 .../layouts/AppLayout/OrgCommandItem.tsx      |  6 +-
 .../OrganizationDropdownCommandContent.tsx    | 64 ++++++++---------
 .../layouts/AppLayout/ProjectDropdown.tsx     | 10 +--
 .../Navigation/NavigationBar/OrgSelector.tsx  | 50 ++++++-------
 .../layouts/ProjectLayout/index.test.tsx      | 10 +--
 .../SQLEditorLayout/SqlEditor.Commands.tsx    | 54 +++++++-------
 .../AIAssistantChatSelector.tsx               | 44 ++++++------
 .../ui/AIAssistantPanel/ModelSelector.tsx     | 24 +++----
 .../ui/DataTable/DataTableViewOptions.tsx     | 12 ++--
 .../studio/components/ui/DatabaseSelector.tsx | 40 +++++------
 .../components/ui/EditorPanel/EditorPanel.tsx | 52 +++++++-------
 .../studio/components/ui/FunctionSelector.tsx | 48 ++++++-------
 .../components/ui/Logs/LogsExplorerHeader.tsx | 32 ++++-----
 .../ui/OrganizationProjectSelector.tsx        | 22 +++---
 .../ProjectCommandItem.tsx                    |  6 +-
 apps/studio/components/ui/SchemaComboBox.tsx  | 32 ++++-----
 apps/studio/components/ui/SchemaSelector.tsx  | 48 ++++++-------
 .../pages/project/[ref]/functions/new.tsx     | 32 ++++-----
 apps/ui-library/components/command-menu.tsx   | 50 ++++++-------
 .../tanstack-db-generator/ComboBox.tsx        | 17 ++---
 apps/www/components/Pricing/UpgradePlan.tsx   | 44 ++++++------
 .../src/CommandMenu/api/CommandMenu.tsx       | 12 ++--
 .../src/CommandMenu/api/CommandMenuInput.tsx  |  8 +--
 .../src/CommandMenu/api/CommandMenuList.tsx   | 10 +--
 .../CommandMenu/internal/CommandMenuGroup.tsx |  8 +--
 .../CommandMenu/internal/CommandMenuItem.tsx  | 10 +--
 .../prepackaged/DocsAi/DocsAiPage.tsx         | 23 +++---
 .../prepackaged/DocsSearch/DocsSearchPage.tsx | 26 +++----
 .../components/ClientSelectDropdown.tsx       | 34 ++++-----
 .../src/MobileSheetNav/MobileSheetNav.tsx     |  4 +-
 .../src/multi-select/multi-select.tsx         | 10 +--
 packages/ui/index.tsx                         | 12 +---
 86 files changed, 1320 insertions(+), 1372 deletions(-)

diff --git a/apps/design-system/components/command-menu.tsx b/apps/design-system/components/command-menu.tsx
index fbd26bea2e8..2fa3cfee17f 100644
--- a/apps/design-system/components/command-menu.tsx
+++ b/apps/design-system/components/command-menu.tsx
@@ -7,12 +7,12 @@ import * as React from 'react'
 import {
   Button,
   CommandDialog,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   DialogProps,
   DialogTitle,
 } from 'ui'
@@ -77,13 +77,13 @@ export function CommandMenu({ ...props }: DialogProps) {
       />
       <CommandDialog open={open} onOpenChange={setOpen}>
         <DialogTitle className="sr-only">Search Design System...</DialogTitle>
-        <CommandInput_Shadcn_ placeholder="Type a command or search..." />
-        <CommandList_Shadcn_>
-          <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
           {docsConfig.sidebarNav.map((group) => (
-            <CommandGroup_Shadcn_ key={group.title} heading={group.title}>
+            <CommandGroup key={group.title} heading={group.title}>
               {group.items.map((navItem) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={navItem.href}
                   value={navItem.title}
                   onSelect={() => {
@@ -94,30 +94,30 @@ export function CommandMenu({ ...props }: DialogProps) {
                     <CircleIcon className="h-3 w-3" strokeWidth={1} />
                   </div>
                   {navItem.title}
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
+            </CommandGroup>
           ))}
-          <CommandSeparator_Shadcn_ />
-          <CommandGroup_Shadcn_ heading="Theme">
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('light'))}>
+          <CommandSeparator />
+          <CommandGroup heading="Theme">
+            <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
               <SunIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Light
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('dark'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Dark
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Classic dark
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
               <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               System
-            </CommandItem_Shadcn_>
-          </CommandGroup_Shadcn_>
-        </CommandList_Shadcn_>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
       </CommandDialog>
     </>
   )
diff --git a/apps/design-system/registry/default/example/combobox-demo.tsx b/apps/design-system/registry/default/example/combobox-demo.tsx
index 558d83237e4..b7f8fabd978 100644
--- a/apps/design-system/registry/default/example/combobox-demo.tsx
+++ b/apps/design-system/registry/default/example/combobox-demo.tsx
@@ -4,12 +4,12 @@ import { Check, ChevronsUpDown } from 'lucide-react'
 import * as React from 'react'
 import {
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -61,13 +61,13 @@ export default function ComboboxDemo() {
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[200px] p-0">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Search framework..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
               {frameworks.map((framework) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={framework.value}
                   value={framework.value}
                   onSelect={(currentValue) => {
@@ -82,11 +82,11 @@ export default function ComboboxDemo() {
                     )}
                   />
                   {framework.label}
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
index ae866941efa..b9885ea531b 100644
--- a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
+++ b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
@@ -4,12 +4,12 @@ import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'
 import * as React from 'react'
 import {
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
@@ -72,14 +72,14 @@ export default function ComboboxDropdownMenu() {
                 Apply label
               </DropdownMenuSubTrigger>
               <DropdownMenuSubContent className="p-0">
-                <Command_Shadcn_>
-                  <CommandInput_Shadcn_ placeholder="Filter label..." autoFocus={true} />
+                <Command>
+                  <CommandInput placeholder="Filter label..." autoFocus={true} />
                   <ScrollArea className="h-20">
-                    <CommandList_Shadcn_>
-                      <CommandEmpty_Shadcn_>No label found.</CommandEmpty_Shadcn_>
-                      <CommandGroup_Shadcn_>
+                    <CommandList>
+                      <CommandEmpty>No label found.</CommandEmpty>
+                      <CommandGroup>
                         {labels.map((label) => (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={label}
                             value={label}
                             onSelect={(value) => {
@@ -88,12 +88,12 @@ export default function ComboboxDropdownMenu() {
                             }}
                           >
                             {label}
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         ))}
-                      </CommandGroup_Shadcn_>
-                    </CommandList_Shadcn_>
+                      </CommandGroup>
+                    </CommandList>
                   </ScrollArea>
-                </Command_Shadcn_>
+                </Command>
               </DropdownMenuSubContent>
             </DropdownMenuSub>
             <DropdownMenuSeparator />
diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx
index b83b07f07fa..b6cd2f507d1 100644
--- a/apps/design-system/registry/default/example/combobox-form.tsx
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -6,12 +6,12 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Form,
   FormControl,
   FormDescription,
@@ -94,13 +94,13 @@ export default function ComboboxForm() {
                   </FormControl>
                 </PopoverTrigger>
                 <PopoverContent className="w-[200px] p-0">
-                  <Command_Shadcn_>
-                    <CommandInput_Shadcn_ placeholder="Search language..." />
-                    <CommandList_Shadcn_>
-                      <CommandEmpty_Shadcn_>No language found.</CommandEmpty_Shadcn_>
-                      <CommandGroup_Shadcn_>
+                  <Command>
+                    <CommandInput placeholder="Search language..." />
+                    <CommandList>
+                      <CommandEmpty>No language found.</CommandEmpty>
+                      <CommandGroup>
                         {languages.map((language) => (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             value={language.label}
                             key={language.value}
                             onSelect={() => {
@@ -114,11 +114,11 @@ export default function ComboboxForm() {
                               )}
                             />
                             {language.label}
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         ))}
-                      </CommandGroup_Shadcn_>
-                    </CommandList_Shadcn_>
-                  </Command_Shadcn_>
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
                 </PopoverContent>
               </Popover>
               <FormDescription>
diff --git a/apps/design-system/registry/default/example/combobox-popover.tsx b/apps/design-system/registry/default/example/combobox-popover.tsx
index 88ac417d507..4c2df6b951c 100644
--- a/apps/design-system/registry/default/example/combobox-popover.tsx
+++ b/apps/design-system/registry/default/example/combobox-popover.tsx
@@ -12,12 +12,12 @@ import {
 import * as React from 'react'
 import {
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -84,13 +84,13 @@ export default function ComboboxPopover() {
           </Button>
         </PopoverTrigger>
         <PopoverContent className="p-0" side="right" align="start">
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Change status..." />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
+          <Command>
+            <CommandInput placeholder="Change status..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
                 {statuses.map((status) => (
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     key={status.value}
                     value={status.value}
                     onSelect={(value) => {
@@ -107,11 +107,11 @@ export default function ComboboxPopover() {
                       )}
                     />
                     <span>{status.label}</span>
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                 ))}
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+              </CommandGroup>
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
     </div>
diff --git a/apps/design-system/registry/default/example/combobox-responsive.tsx b/apps/design-system/registry/default/example/combobox-responsive.tsx
index d09a1fd6285..90dcb2f8506 100644
--- a/apps/design-system/registry/default/example/combobox-responsive.tsx
+++ b/apps/design-system/registry/default/example/combobox-responsive.tsx
@@ -4,12 +4,12 @@ import { Plus } from 'lucide-react'
 import * as React from 'react'
 import {
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Drawer,
   DrawerContent,
   DrawerTrigger,
@@ -97,13 +97,13 @@ function StatusList({
   setSelectedStatus: (status: Status | null) => void
 }) {
   return (
-    <Command_Shadcn_>
-      <CommandInput_Shadcn_ placeholder="Filter status..." />
-      <CommandList_Shadcn_>
-        <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-        <CommandGroup_Shadcn_>
+    <Command>
+      <CommandInput placeholder="Filter status..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup>
           {statuses.map((status) => (
-            <CommandItem_Shadcn_
+            <CommandItem
               key={status.value}
               value={status.value}
               onSelect={(value) => {
@@ -112,10 +112,10 @@ function StatusList({
               }}
             >
               {status.label}
-            </CommandItem_Shadcn_>
+            </CommandItem>
           ))}
-        </CommandGroup_Shadcn_>
-      </CommandList_Shadcn_>
-    </Command_Shadcn_>
+        </CommandGroup>
+      </CommandList>
+    </Command>
   )
 }
diff --git a/apps/design-system/registry/default/example/command-demo.tsx b/apps/design-system/registry/default/example/command-demo.tsx
index 8589373f51d..b51049ab5bc 100644
--- a/apps/design-system/registry/default/example/command-demo.tsx
+++ b/apps/design-system/registry/default/example/command-demo.tsx
@@ -1,54 +1,54 @@
 import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
 import {
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
-  CommandShortcut_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
 } from 'ui'
 
 export default function CommandDemo() {
   return (
-    <Command_Shadcn_ className="rounded-lg border shadow-md">
-      <CommandInput_Shadcn_ placeholder="Type a command or search..." />
-      <CommandList_Shadcn_>
-        <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-        <CommandGroup_Shadcn_ heading="Suggestions">
-          <CommandItem_Shadcn_>
+    <Command className="rounded-lg border shadow-md">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
             <Calendar className="mr-2 h-4 w-4" />
             <span>Calendar</span>
-          </CommandItem_Shadcn_>
-          <CommandItem_Shadcn_>
+          </CommandItem>
+          <CommandItem>
             <Smile className="mr-2 h-4 w-4" />
             <span>Search Emoji</span>
-          </CommandItem_Shadcn_>
-          <CommandItem_Shadcn_>
+          </CommandItem>
+          <CommandItem>
             <Calculator className="mr-2 h-4 w-4" />
             <span>Calculator</span>
-          </CommandItem_Shadcn_>
-        </CommandGroup_Shadcn_>
-        <CommandSeparator_Shadcn_ />
-        <CommandGroup_Shadcn_ heading="Settings">
-          <CommandItem_Shadcn_>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
             <User className="mr-2 h-4 w-4" />
             <span>Profile</span>
-            <CommandShortcut_Shadcn_>⌘P</CommandShortcut_Shadcn_>
-          </CommandItem_Shadcn_>
-          <CommandItem_Shadcn_>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
             <CreditCard className="mr-2 h-4 w-4" />
             <span>Billing</span>
-            <CommandShortcut_Shadcn_>⌘B</CommandShortcut_Shadcn_>
-          </CommandItem_Shadcn_>
-          <CommandItem_Shadcn_>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
             <Settings className="mr-2 h-4 w-4" />
             <span>Settings</span>
-            <CommandShortcut_Shadcn_>⌘S</CommandShortcut_Shadcn_>
-          </CommandItem_Shadcn_>
-        </CommandGroup_Shadcn_>
-      </CommandList_Shadcn_>
-    </Command_Shadcn_>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
   )
 }
diff --git a/apps/design-system/registry/default/example/command-dialog.tsx b/apps/design-system/registry/default/example/command-dialog.tsx
index fc9eab9b0ff..308c3cc1ac2 100644
--- a/apps/design-system/registry/default/example/command-dialog.tsx
+++ b/apps/design-system/registry/default/example/command-dialog.tsx
@@ -4,13 +4,13 @@ import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-
 import * as React from 'react'
 import {
   CommandDialog,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
-  CommandShortcut_Shadcn_,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
 } from 'ui'
 
 export default function CommandDialogDemo() {
@@ -37,42 +37,42 @@ export default function CommandDialogDemo() {
         </kbd>
       </p>
       <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput_Shadcn_ placeholder="Type a command or search..." />
-        <CommandList_Shadcn_>
-          <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_ heading="Suggestions">
-            <CommandItem_Shadcn_>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
               <Calendar className="mr-2 h-4 w-4" />
               <span>Calendar</span>
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_>
+            </CommandItem>
+            <CommandItem>
               <Smile className="mr-2 h-4 w-4" />
               <span>Search Emoji</span>
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_>
+            </CommandItem>
+            <CommandItem>
               <Calculator className="mr-2 h-4 w-4" />
               <span>Calculator</span>
-            </CommandItem_Shadcn_>
-          </CommandGroup_Shadcn_>
-          <CommandSeparator_Shadcn_ />
-          <CommandGroup_Shadcn_ heading="Settings">
-            <CommandItem_Shadcn_>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
               <User className="mr-2 h-4 w-4" />
               <span>Profile</span>
-              <CommandShortcut_Shadcn_>⌘P</CommandShortcut_Shadcn_>
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
               <CreditCard className="mr-2 h-4 w-4" />
               <span>Billing</span>
-              <CommandShortcut_Shadcn_>⌘B</CommandShortcut_Shadcn_>
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
               <Settings className="mr-2 h-4 w-4" />
               <span>Settings</span>
-              <CommandShortcut_Shadcn_>⌘S</CommandShortcut_Shadcn_>
-            </CommandItem_Shadcn_>
-          </CommandGroup_Shadcn_>
-        </CommandList_Shadcn_>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
       </CommandDialog>
     </>
   )
diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx
index fc8d2a50cf5..105cb3e45b6 100644
--- a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx
+++ b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx
@@ -1,21 +1,21 @@
+import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
 import { noop } from 'lodash-es'
 import { Check, ChevronsUpDown } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import {
   Button_Shadcn_ as Button,
   cn,
-  Command_Shadcn_ as Command,
-  CommandGroup_Shadcn_ as CommandGroup,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
-  Popover as Popover,
-  PopoverContent as PopoverContent,
-  PopoverTrigger as PopoverTrigger,
+  Command,
+  CommandGroup as CommandGroup,
+  CommandInput,
+  CommandItem as CommandItem,
+  CommandList as CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   ScrollArea,
 } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
-import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
 
 export interface ComboBoxOption {
   id: string
diff --git a/apps/docs/features/ui/InfoTooltip.tsx b/apps/docs/features/ui/InfoTooltip.tsx
index d8dd67b1da6..d604a0047b1 100644
--- a/apps/docs/features/ui/InfoTooltip.tsx
+++ b/apps/docs/features/ui/InfoTooltip.tsx
@@ -1,20 +1,20 @@
 'use client'
 
+import { useBreakpoint } from 'common'
+import { InfoIcon, XIcon } from 'lucide-react'
 import React, {
-  type PropsWithChildren,
   useCallback,
   useEffect,
   useId,
   useRef,
   useState,
+  type PropsWithChildren,
 } from 'react'
-import { InfoIcon, XIcon } from 'lucide-react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { useBreakpoint } from 'common'
 import {
   Button,
   cn,
-  CommandEmpty_Shadcn_,
+  CommandEmpty,
   Sheet,
   SheetContent,
   SheetHeader,
@@ -105,7 +105,7 @@ const InfoTooltip = ({
               'w-full h-fit min-h-[200px] py-2 px-4'
             )}
           >
-            <ErrorBoundary FallbackComponent={() => <CommandEmpty_Shadcn_ />}>
+            <ErrorBoundary FallbackComponent={() => <CommandEmpty />}>
               <SheetHeader className="flex items-center justify-between gap-2 px-0 py-2 mb-2 max-w-full">
                 <div className="flex items-center gap-2 max-w-[90%]">
                   <InfoIcon className="p-px min-w-4 min-h-4 text-foreground-lighter" />
diff --git a/apps/docs/features/ui/McpConfigPanel.tsx b/apps/docs/features/ui/McpConfigPanel.tsx
index e4723715f4a..ec2cd3c752f 100644
--- a/apps/docs/features/ui/McpConfigPanel.tsx
+++ b/apps/docs/features/ui/McpConfigPanel.tsx
@@ -1,5 +1,9 @@
 'use client'
 
+import { useDebounce } from '~/hooks/useDebounce'
+import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
+import { useProjectsInfiniteQuery } from '~/lib/fetch/projects-infinite'
+import { useSendTelemetryEvent } from '~/lib/telemetry'
 import { useIsLoggedIn, useIsUserLoading } from 'common'
 import { Check, ChevronDown } from 'lucide-react'
 import { useTheme } from 'next-themes'
@@ -8,11 +12,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -25,10 +29,6 @@ import {
   type McpClient,
 } from 'ui-patterns/McpUrlBuilder'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
-import { useDebounce } from '~/hooks/useDebounce'
-import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
-import { useProjectsInfiniteQuery } from '~/lib/fetch/projects-infinite'
-import { useSendTelemetryEvent } from '~/lib/telemetry'
 
 type PlatformType = (typeof PLATFORMS)[number]['value']
 
@@ -135,8 +135,8 @@ function ProjectSelector({
         )}
       </div>
       <PopoverContent className="mt-0 p-0 w-56" side="bottom" align="start">
-        <Command_Shadcn_ shouldFilter={false}>
-          <CommandInput_Shadcn_
+        <Command shouldFilter={false}>
+          <CommandInput
             placeholder="Search ..."
             className="h-8"
             showResetIcon
@@ -144,8 +144,8 @@ function ProjectSelector({
             onValueChange={setSearch}
             handleReset={() => setSearch('')}
           />
-          <CommandList_Shadcn_>
-            <CommandGroup_Shadcn_>
+          <CommandList>
+            <CommandGroup>
               {isLoading ? (
                 <div className="px-2 py-1 flex flex-col gap-2">
                   <ShimmeringLoader className="w-full" />
@@ -160,7 +160,7 @@ function ProjectSelector({
                   )}
                   <ScrollArea className={projects.length > 7 ? 'h-[210px]' : ''}>
                     {projects?.map((project) => (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={project.ref}
                         value={project.ref}
                         onSelect={() => {
@@ -178,16 +178,16 @@ function ProjectSelector({
                             project.ref === selectedProject?.ref ? 'opacity-100' : 'opacity-0'
                           )}
                         />
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     ))}
                     <div ref={sentinelRef} className="h-1 -mt-1" />
                     {hasNextPage && <ShimmeringLoader className="px-2 py-3" />}
                   </ScrollArea>
                 </>
               )}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
@@ -230,11 +230,11 @@ function PlatformSelector({
         </PopoverTrigger>
       </div>
       <PopoverContent className="mt-0 p-0 max-w-48" side="bottom" align="start">
-        <Command_Shadcn_>
-          <CommandList_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandList>
+            <CommandGroup>
               {PLATFORMS.map((platform) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={platform.value}
                   value={platform.value}
                   onSelect={() => {
@@ -252,11 +252,11 @@ function PlatformSelector({
                       platform.value === selectedPlatform ? 'opacity-100' : 'opacity-0'
                     )}
                   />
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/learn/components/command-menu.tsx b/apps/learn/components/command-menu.tsx
index d764ce7e38f..75f055f9a8f 100644
--- a/apps/learn/components/command-menu.tsx
+++ b/apps/learn/components/command-menu.tsx
@@ -4,21 +4,21 @@ import { CircleIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
-
-import { COMMAND_ITEMS } from '@/config/docs'
-import { cn } from '@/lib/utils'
 import {
   Button,
   CommandDialog,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   DialogProps,
 } from 'ui'
 
+import { COMMAND_ITEMS } from '@/config/docs'
+import { cn } from '@/lib/utils'
+
 export function CommandMenu({ ...props }: DialogProps) {
   const router = useRouter()
   const [open, setOpen] = React.useState(false)
@@ -69,12 +69,12 @@ export function CommandMenu({ ...props }: DialogProps) {
         </kbd>
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput_Shadcn_ placeholder="Type a command or search..." />
-        <CommandList_Shadcn_>
-          <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_ key="pages" heading="Pages">
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup key="pages" heading="Pages">
             {COMMAND_ITEMS.map((navItem) => (
-              <CommandItem_Shadcn_
+              <CommandItem
                 key={navItem.href}
                 value={navItem.label}
                 onSelect={() => runCommand(() => router.push(navItem.href as string))}
@@ -83,29 +83,29 @@ export function CommandMenu({ ...props }: DialogProps) {
                   <CircleIcon className="h-3 w-3" strokeWidth={1} />
                 </div>
                 {navItem.label}
-              </CommandItem_Shadcn_>
+              </CommandItem>
             ))}
-          </CommandGroup_Shadcn_>
-          <CommandSeparator_Shadcn_ />
-          <CommandGroup_Shadcn_ heading="Theme">
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('light'))}>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Theme">
+            <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
               <SunIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Light
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('dark'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Dark
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Classic dark
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
               <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               System
-            </CommandItem_Shadcn_>
-          </CommandGroup_Shadcn_>
-        </CommandList_Shadcn_>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
       </CommandDialog>
     </>
   )
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx
index 8f6416c71a1..f1d2e54c9d2 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx
@@ -3,12 +3,12 @@ import { Path, PathValue } from 'react-hook-form'
 import {
   Button,
   Checkbox,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -46,19 +46,19 @@ export const PermissionResourceSelector = <TFormValues extends PermissionsFormVa
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[400px] p-0" align={align}>
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Search resources..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No resources found.</CommandEmpty_Shadcn_>
+        <Command>
+          <CommandInput placeholder="Search resources..." />
+          <CommandList>
+            <CommandEmpty>No resources found.</CommandEmpty>
 
-            <CommandGroup_Shadcn_ className="[&>div]:text-left">
+            <CommandGroup className="[&>div]:text-left">
               <div className="max-h-[210px] overflow-y-auto">
                 {ACCESS_TOKEN_RESOURCES.map((resource) => {
                   const isChecked = permissionRows.some(
                     (row: PermissionRow) => row.resource === resource.resource
                   )
                   return (
-                    <CommandItem_Shadcn_
+                    <CommandItem
                       key={resource.resource}
                       value={`${resource.resource} ${resource.title}`}
                       onSelect={() => handleToggleResource(resource)}
@@ -77,13 +77,13 @@ export const PermissionResourceSelector = <TFormValues extends PermissionsFormVa
                           </span>
                         </div>
                       </div>
-                    </CommandItem_Shadcn_>
+                    </CommandItem>
                   )
                 })}
               </div>
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx
index 2430bf3bdee..63a318f171b 100644
--- a/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx
@@ -6,12 +6,12 @@ import {
   Card,
   CardContent,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -103,13 +103,13 @@ export const TimezoneSettings = () => {
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent id={listboxId} className="w-[--radix-popover-trigger-width] p-0">
-                  <Command_Shadcn_>
-                    <CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
-                    <CommandList_Shadcn_>
-                      <CommandEmpty_Shadcn_>No timezones found</CommandEmpty_Shadcn_>
-                      <CommandGroup_Shadcn_>
+                  <Command>
+                    <CommandInput placeholder="Search timezone..." className="h-9" />
+                    <CommandList>
+                      <CommandEmpty>No timezones found</CommandEmpty>
+                      <CommandGroup>
                         <ScrollArea className="h-72">
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={AUTO_OPTION_VALUE}
                             value={`Auto detect ${browserTimezone}`}
                             onSelect={() => handleSelect('')}
@@ -126,12 +126,12 @@ export const TimezoneSettings = () => {
                                 isAutoDetected ? 'opacity-100' : 'opacity-0'
                               )}
                             />
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                           {TIMEZONES_BY_IANA.map((entry) => {
                             const ianaName = entry.utc[0]
                             const isSelected = !isAutoDetected && storedTimezone === ianaName
                             return (
-                              <CommandItem_Shadcn_
+                              <CommandItem
                                 key={ianaName}
                                 // CommandItem matches against the `value` prop for the input filter — include
                                 // both the human label and the IANA name so search works for either.
@@ -145,13 +145,13 @@ export const TimezoneSettings = () => {
                                     isSelected ? 'opacity-100' : 'opacity-0'
                                   )}
                                 />
-                              </CommandItem_Shadcn_>
+                              </CommandItem>
                             )
                           })}
                         </ScrollArea>
-                      </CommandGroup_Shadcn_>
-                    </CommandList_Shadcn_>
-                  </Command_Shadcn_>
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
                 </PopoverContent>
               </Popover>
             </FormItemLayout>
diff --git a/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx b/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx
index 3eaf23408ef..d798f407c50 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { cn, CommandList_Shadcn_ } from 'ui'
+import { cn, CommandList } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns'
 import { TextHighlighter } from 'ui-patterns/CommandMenu'
 import { CommandMenuGroup } from 'ui-patterns/CommandMenu/internal/CommandMenuGroup'
@@ -86,7 +86,7 @@ export function ResultsList({
   })
 
   return (
-    <CommandList_Shadcn_
+    <CommandList
       className={cn(
         'max-h-full! flex-1 min-h-0 overflow-y-auto overflow-x-hidden bg-transparent',
         className
@@ -106,6 +106,6 @@ export function ResultsList({
           </CommandMenuItem>
         ))}
       </CommandMenuGroup>
-    </CommandList_Shadcn_>
+    </CommandList>
   )
 }
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
index ca41b17194a..01340314da6 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
@@ -11,12 +11,12 @@ import { UseFormReturn } from 'react-hook-form'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   FormControl,
   FormField,
   FormItem,
@@ -182,14 +182,14 @@ export const PolicyDetailsV2 = ({
                         align="start"
                         sameWidthAsTrigger
                       >
-                        <Command_Shadcn_>
-                          <CommandInput_Shadcn_ placeholder="Find a table..." />
-                          <CommandList_Shadcn_ onWheel={(event) => event.stopPropagation()}>
-                            <CommandEmpty_Shadcn_>No tables found</CommandEmpty_Shadcn_>
-                            <CommandGroup_Shadcn_>
+                        <Command>
+                          <CommandInput placeholder="Find a table..." />
+                          <CommandList onWheel={(event) => event.stopPropagation()}>
+                            <CommandEmpty>No tables found</CommandEmpty>
+                            <CommandGroup>
                               <ScrollArea className={(tables ?? []).length > 7 ? 'h-[200px]' : ''}>
                                 {(tables ?? []).map((table) => (
-                                  <CommandItem_Shadcn_
+                                  <CommandItem
                                     key={table.id}
                                     className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                                     onSelect={() => {
@@ -205,12 +205,12 @@ export const PolicyDetailsV2 = ({
                                       {field.value === table.name ? <Check size={13} /> : ''}
                                       {table.name}
                                     </span>
-                                  </CommandItem_Shadcn_>
+                                  </CommandItem>
                                 ))}
                               </ScrollArea>
-                            </CommandGroup_Shadcn_>
-                          </CommandList_Shadcn_>
-                        </Command_Shadcn_>
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
                       </PopoverContent>
                     </Popover>
                   </FormControl>
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx b/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
index 17daee2762c..bd26666b3da 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
+++ b/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
@@ -6,12 +6,12 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -82,8 +82,8 @@ export const UserSelector = () => {
           </Button>
         </PopoverTrigger>
         <PopoverContent sameWidthAsTrigger className="p-0" side="bottom" align="start">
-          <Command_Shadcn_ shouldFilter={false}>
-            <CommandInput_Shadcn_
+          <Command shouldFilter={false}>
+            <CommandInput
               showResetIcon
               placeholder="Search for a user"
               className="text-xs"
@@ -96,10 +96,10 @@ export const UserSelector = () => {
                 Failed to fetch users: {error.message}
               </Admonition>
             ) : (
-              <CommandEmpty_Shadcn_>No user found</CommandEmpty_Shadcn_>
+              <CommandEmpty>No user found</CommandEmpty>
             )}
 
-            <CommandList_Shadcn_>
+            <CommandList>
               {isPending && (
                 <div className="p-2">
                   <GenericSkeletonLoader />
@@ -107,11 +107,11 @@ export const UserSelector = () => {
               )}
 
               {isSuccess && (
-                <CommandGroup_Shadcn_>
+                <CommandGroup>
                   <ScrollArea className={users.length > 7 ? 'h-full md:h-[210px]' : ''}>
                     {users.map((user) => {
                       return (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={user.id}
                           value={user.email}
                           className="cursor-pointer w-full"
@@ -129,14 +129,14 @@ export const UserSelector = () => {
                             </p>
                             {impersonatingUser?.id === user.id && <Check size={16} />}
                           </div>
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       )
                     })}
                   </ScrollArea>
-                </CommandGroup_Shadcn_>
+                </CommandGroup>
               )}
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
     </FormItemLayout>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
index f6682a1b187..6cbbdfab020 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
@@ -3,12 +3,12 @@ import { useId, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   FormControl,
   Popover,
   PopoverContent,
@@ -78,14 +78,14 @@ export const AwsRegionSelector = ({
         </FormControl>
       </PopoverTrigger>
       <PopoverContent id={listboxId} className="p-0" sameWidthAsTrigger>
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Search AWS regions..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No regions found.</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandInput placeholder="Search AWS regions..." />
+          <CommandList>
+            <CommandEmpty>No regions found.</CommandEmpty>
+            <CommandGroup>
               <ScrollArea className="h-72">
                 {AWS_IDP_REGIONS.map((option) => (
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     value={option}
                     key={option}
                     onSelect={(currentValue) => {
@@ -97,12 +97,12 @@ export const AwsRegionSelector = ({
                       className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
                     />
                     {option}
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                 ))}
               </ScrollArea>
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
index 83160919291..6c6abcc3d92 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -20,12 +20,12 @@ import {
   Button,
   Checkbox,
   cn,
-  Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
-  CommandGroup_Shadcn_ as CommandGroup,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   FormControl,
   FormField,
   FormItem,
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx b/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
index 7fcc00cc2e9..544de78c274 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
@@ -1,12 +1,12 @@
 import { Check, GitMerge, Shield } from 'lucide-react'
 import { useState } from 'react'
 import {
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -68,14 +68,14 @@ export const BranchSelector = ({
         </ButtonTooltip>
       </PopoverTrigger>
       <PopoverContent className="p-0 w-80" side="bottom" align="end">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Find branch to review..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No available branches found</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandInput placeholder="Find branch to review..." />
+          <CommandList>
+            <CommandEmpty>No available branches found</CommandEmpty>
+            <CommandGroup>
               <ScrollArea className="max-h-[210px] overflow-y-auto">
                 {availableBranches.map((branch) => (
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     key={branch.id}
                     value={branch.name.replaceAll('"', '')}
                     className="cursor-pointer w-full flex items-center justify-between"
@@ -93,12 +93,12 @@ export const BranchSelector = ({
                     )}
                     {branch.git_branch && <span>Synced to a Git branch</span>}
                     {branch.review_requested_at && <span>Merge request opened</span>}
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                 ))}
               </ScrollArea>
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx b/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx
index 70a25816e18..a2a0b30e9b0 100644
--- a/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectDropdown.tsx
@@ -3,12 +3,12 @@ import { useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -73,13 +73,13 @@ export const ConnectDropdown = ({
         </PopoverTrigger>
       </div>
       <PopoverContent className="p-0 max-w-48" side="bottom" align="start">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Search..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandInput placeholder="Search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
               {items.map((item) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={item.key}
                   value={item.key}
                   onSelect={() => {
@@ -102,11 +102,11 @@ export const ConnectDropdown = ({
                     size={15}
                     className={cn('ml-auto  ', item.key === state ? 'opacity-100' : 'opacity-0')}
                   />
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx b/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
index 1d372e1bdf2..1bf01b509d2 100644
--- a/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
@@ -3,12 +3,12 @@ import { useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -64,13 +64,13 @@ export const FrameworkSelector = ({
         align="start"
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Search..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandInput placeholder="Search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
               {items.map((item) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={item.key}
                   value={item.key}
                   onSelect={() => handleSelect(item.key)}
@@ -82,11 +82,11 @@ export const FrameworkSelector = ({
                     size={15}
                     className={cn('ml-auto', item.key === value ? 'opacity-100' : 'opacity-0')}
                   />
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
index a0a8d24f945..028bd48a27c 100644
--- a/apps/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
@@ -3,12 +3,12 @@ import { useId, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -51,14 +51,14 @@ export const TimezoneSelection = ({
           </Button>
         </PopoverTrigger>
         <PopoverContent id={listboxId} className="w-[350px] p-0">
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No timezones found...</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
+          <Command>
+            <CommandInput placeholder="Search timezone..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>No timezones found...</CommandEmpty>
+              <CommandGroup>
                 <ScrollArea className="h-72">
                   {timezoneOptions.map((option) => (
-                    <CommandItem_Shadcn_
+                    <CommandItem
                       key={option}
                       value={option}
                       onSelect={(text) => {
@@ -78,12 +78,12 @@ export const TimezoneSelection = ({
                           selectedTimezone.text === option ? 'opacity-100' : 'opacity-0'
                         )}
                       />
-                    </CommandItem_Shadcn_>
+                    </CommandItem>
                   ))}
                 </ScrollArea>
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+              </CommandGroup>
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
     </div>
diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
index 68e89737b64..270350ebba9 100644
--- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
@@ -5,12 +5,12 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -195,20 +195,20 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                 </Button>
               </PopoverTrigger>
               <PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
-                <Command_Shadcn_>
-                  <CommandInput_Shadcn_
+                <Command>
+                  <CommandInput
                     placeholder="Find schema..."
                     value={schemaSearchTerm}
                     onValueChange={setSchemaSearchTerm}
                   />
-                  <CommandList_Shadcn_
+                  <CommandList
                     className={cn((schemas ?? []).length > 7 && 'max-h-[210px]! overflow-y-auto')}
                     onWheel={(event) => event.stopPropagation()}
                   >
-                    <CommandEmpty_Shadcn_>No schemas found</CommandEmpty_Shadcn_>
-                    <CommandGroup_Shadcn_>
+                    <CommandEmpty>No schemas found</CommandEmpty>
+                    <CommandGroup>
                       {(schemas ?? []).map((schema) => (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={schema.name}
                           className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                           onSelect={() => {
@@ -222,11 +222,11 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                           {selectedSchema === schema.name && (
                             <Check className="text-brand" strokeWidth={2} size={16} />
                           )}
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       ))}
-                    </CommandGroup_Shadcn_>
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
           </FormItemLayout>
@@ -264,17 +264,17 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
               <PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
                 {/* [Terry] shouldFilter context:
                 https://github.com/pacocoursey/cmdk/issues/267#issuecomment-2252717107 */}
-                <Command_Shadcn_ shouldFilter={false}>
-                  <CommandInput_Shadcn_
+                <Command shouldFilter={false}>
+                  <CommandInput
                     placeholder="Find table..."
                     value={searchTerm}
                     onValueChange={handleSearchChange}
                   />
-                  <CommandList_Shadcn_
+                  <CommandList
                     className={cn(entityTypes.length > 7 && 'max-h-[210px]! overflow-y-auto')}
                     onWheel={(event) => event.stopPropagation()}
                   >
-                    <CommandEmpty_Shadcn_>
+                    <CommandEmpty>
                       {isLoadingEntities ? (
                         <div className="flex items-center gap-2 text-center justify-center">
                           <Loader2 size={12} className="animate-spin" />
@@ -283,10 +283,10 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                       ) : (
                         'No tables found'
                       )}
-                    </CommandEmpty_Shadcn_>
-                    <CommandGroup_Shadcn_>
+                    </CommandEmpty>
+                    <CommandGroup>
                       {entityTypes.map((entity) => (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={entity.name}
                           className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                           onSelect={() => {
@@ -302,11 +302,11 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                           {selectedEntity === entity.name && (
                             <Check className="text-brand" strokeWidth={2} size={16} />
                           )}
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       ))}
-                    </CommandGroup_Shadcn_>
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
           </FormItemLayout>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
index 158a21ab7b4..dd4e9fea9a3 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
@@ -5,13 +5,13 @@ import {
   Badge,
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -74,8 +74,8 @@ export const PublicationsComboBox = ({
         </Button>
       </PopoverTrigger>
       <PopoverContent sameWidthAsTrigger className="p-0" align="start">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_
+        <Command>
+          <CommandInput
             placeholder="Find publication..."
             className="text-xs"
             value={searchTerm}
@@ -86,8 +86,8 @@ export const PublicationsComboBox = ({
               Publications with no tables are hidden
             </p>
           </div>
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>
+          <CommandList>
+            <CommandEmpty>
               {isLoadingPublications ? (
                 <div className="flex items-center gap-2 text-center justify-center">
                   <Loader2 size={12} className="animate-spin" />
@@ -96,9 +96,9 @@ export const PublicationsComboBox = ({
               ) : (
                 'No publications found'
               )}
-            </CommandEmpty_Shadcn_>
+            </CommandEmpty>
 
-            <CommandGroup_Shadcn_>
+            <CommandGroup>
               {publications.length === 0 && (
                 <p className="text-foreground-lighter text-xs py-3 px-2">
                   No publications available
@@ -106,7 +106,7 @@ export const PublicationsComboBox = ({
               )}
               <ScrollArea className={publications.length > 7 ? 'h-[210px]' : ''}>
                 {publications.map((pub) => (
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     key={pub.name}
                     className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                     onSelect={() => {
@@ -128,25 +128,25 @@ export const PublicationsComboBox = ({
                         <Check className="text-brand" strokeWidth={2} size={13} />
                       )}
                     </div>
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                 ))}
               </ScrollArea>
-            </CommandGroup_Shadcn_>
+            </CommandGroup>
 
-            <CommandSeparator_Shadcn_ />
+            <CommandSeparator />
 
-            <CommandGroup_Shadcn_>
-              <CommandItem_Shadcn_
+            <CommandGroup>
+              <CommandItem
                 className="cursor-pointer w-full"
                 onSelect={onNewPublicationClick}
                 onClick={onNewPublicationClick}
               >
                 <Plus size={14} strokeWidth={1.5} className="mr-2" />
                 <p>New publication</p>
-              </CommandItem_Shadcn_>
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
index 774959c9006..d14d8bd5f7e 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
@@ -6,12 +6,12 @@ import { UseFormReturn } from 'react-hook-form'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   FormControl,
   FormField,
   FormItem,
@@ -152,15 +152,15 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
                     </FormControl>
                   </PopoverTrigger>
                   <PopoverContent id={listboxId} className="p-0" sameWidthAsTrigger>
-                    <Command_Shadcn_>
-                      <CommandInput_Shadcn_ placeholder="Search edge functions..." />
-                      <CommandList_Shadcn_>
-                        <CommandEmpty_Shadcn_>No edge function found.</CommandEmpty_Shadcn_>
-                        <CommandGroup_Shadcn_>
+                    <Command>
+                      <CommandInput placeholder="Search edge functions..." />
+                      <CommandList>
+                        <CommandEmpty>No edge function found.</CommandEmpty>
+                        <CommandGroup>
                           <ScrollArea className={edgeFunctions.length > 7 ? 'h-[210px]' : ''}>
                             {edgeFunctions.map((fn) => {
                               return (
-                                <CommandItem_Shadcn_
+                                <CommandItem
                                   value={fn.name}
                                   key={fn.id}
                                   onSelect={() => {
@@ -175,13 +175,13 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
                                     )}
                                   />
                                   {fn.name}
-                                </CommandItem_Shadcn_>
+                                </CommandItem>
                               )
                             })}
                           </ScrollArea>
-                        </CommandGroup_Shadcn_>
-                      </CommandList_Shadcn_>
-                    </Command_Shadcn_>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
                   </PopoverContent>
                 </Popover>
                 <FormMessage />
diff --git a/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx b/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
index 6cbda52b97e..e3426736122 100644
--- a/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
@@ -4,12 +4,12 @@ import {
   Badge,
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -85,14 +85,14 @@ const OrganizationPicker = ({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="p-0 w-full" side="bottom" align="center" sameWidthAsTrigger>
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Search organizations..." />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
+          <Command>
+            <CommandInput placeholder="Search organizations..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
                 {organizationsData?.map((org) => {
                   return (
-                    <CommandItem_Shadcn_
+                    <CommandItem
                       value={org.slug}
                       key={org.slug}
                       className="flex gap-2 items-center"
@@ -112,12 +112,12 @@ const OrganizationPicker = ({
                       {configurationId && installed[org.slug] && (
                         <Badge className="flex-none!">Integration Installed</Badge>
                       )}
-                    </CommandItem_Shadcn_>
+                    </CommandItem>
                   )
                 })}
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+              </CommandGroup>
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
     </>
diff --git a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
index f08401a8858..4a790b302e5 100644
--- a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
+++ b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
@@ -7,13 +7,13 @@ import {
   Badge,
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -262,8 +262,8 @@ const ProjectLinker = ({
                 renderActions={() => {
                   return (
                     projectCreationEnabled && (
-                      <CommandGroup_Shadcn_>
-                        <CommandItem_Shadcn_
+                      <CommandGroup>
+                        <CommandItem
                           className="cursor-pointer w-full"
                           onSelect={() => {
                             setOpenProjectsDropdown(false)
@@ -281,8 +281,8 @@ const ProjectLinker = ({
                             <Plus size={14} strokeWidth={1.5} />
                             <p>Create a new project</p>
                           </Link>
-                        </CommandItem_Shadcn_>
-                      </CommandGroup_Shadcn_>
+                        </CommandItem>
+                      </CommandGroup>
                     )
                   )
                 }}
@@ -324,14 +324,14 @@ const ProjectLinker = ({
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent className="p-0" side="bottom" align="center" sameWidthAsTrigger>
-                  <Command_Shadcn_>
-                    <CommandInput_Shadcn_ placeholder="Search for a project" />
-                    <CommandList_Shadcn_ className="max-h-[170px]!">
-                      <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-                      <CommandGroup_Shadcn_>
+                  <Command>
+                    <CommandInput placeholder="Search for a project" />
+                    <CommandList className="max-h-[170px]!">
+                      <CommandEmpty>No results found.</CommandEmpty>
+                      <CommandGroup>
                         {foreignProjects.map((project, i) => {
                           return (
-                            <CommandItem_Shadcn_
+                            <CommandItem
                               key={project.id}
                               value={`${project.name.replaceAll('"', '')}-${i}`}
                               className="flex gap-2 items-center"
@@ -344,29 +344,29 @@ const ProjectLinker = ({
                               <span className="truncate" title={project.name}>
                                 {project.name}
                               </span>
-                            </CommandItem_Shadcn_>
+                            </CommandItem>
                           )
                         })}
                         {foreignProjects.length === 0 && (
-                          <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+                          <CommandEmpty>No results found.</CommandEmpty>
                         )}
-                      </CommandGroup_Shadcn_>
+                      </CommandGroup>
                       {mode === 'GitHub' && (
                         <>
-                          <CommandSeparator_Shadcn_ />
-                          <CommandGroup_Shadcn_>
-                            <CommandItem_Shadcn_
+                          <CommandSeparator />
+                          <CommandGroup>
+                            <CommandItem
                               className="flex gap-2 items-center cursor-pointer"
                               onSelect={() => openInstallGitHubIntegrationWindow('install')}
                             >
                               <PlusIcon size={16} />
                               Add GitHub Repositories
-                            </CommandItem_Shadcn_>
-                          </CommandGroup_Shadcn_>
+                            </CommandItem>
+                          </CommandGroup>
                         </>
                       )}
-                    </CommandList_Shadcn_>
-                  </Command_Shadcn_>
+                    </CommandList>
+                  </Command>
                 </PopoverContent>
               </Popover>
             </Panel>
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
index e258d44edc6..634cc26a74f 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
@@ -17,13 +17,13 @@ import {
   AlertTitle,
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   CriticalIcon,
   FormControl,
   FormField,
@@ -159,20 +159,20 @@ export const ColumnType = ({
                 </Button>
               </PopoverTrigger>
               <PopoverContent id={listboxId} className="w-[460px] p-0" side="bottom" align="center">
-                <Command_Shadcn_>
-                  <CommandInput_Shadcn_
+                <Command>
+                  <CommandInput
                     placeholder="Search types..."
                     // [Joshen] Addresses style issues when this component is being used in the old Form component
                     // Specifically in WrapperDynamicColumns - can be cleaned up once we're no longer using that
                     className="bg-transparent! focus:shadow-none! focus:ring-0! text-xs"
                   />
-                  <CommandEmpty_Shadcn_>Type not found.</CommandEmpty_Shadcn_>
+                  <CommandEmpty>Type not found.</CommandEmpty>
 
-                  <CommandList_Shadcn_>
+                  <CommandList>
                     <ScrollArea className="h-[240px]">
-                      <CommandGroup_Shadcn_ heading="Postgres data types">
+                      <CommandGroup heading="Postgres data types">
                         {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={option.name}
                             value={option.name}
                             className={cn(
@@ -196,16 +196,16 @@ export const ColumnType = ({
                                 ''
                               )}
                             </span>
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         ))}
-                      </CommandGroup_Shadcn_>
+                      </CommandGroup>
 
                       {enumTypes.length > 0 && (
                         <>
-                          <CommandSeparator_Shadcn_ />
-                          <CommandGroup_Shadcn_ heading="Other types">
+                          <CommandSeparator />
+                          <CommandGroup heading="Other types">
                             {enumTypes.map((option) => (
-                              <CommandItem_Shadcn_
+                              <CommandItem
                                 key={option.id}
                                 value={option.format}
                                 className={cn(
@@ -246,14 +246,14 @@ export const ColumnType = ({
                                     </span>
                                   )}
                                 </div>
-                              </CommandItem_Shadcn_>
+                              </CommandItem>
                             ))}
-                          </CommandGroup_Shadcn_>
+                          </CommandGroup>
                         </>
                       )}
                     </ScrollArea>
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
             {showRecommendation && recommendation !== undefined && (
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
index 12afee25856..ae230c6fe10 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
@@ -12,12 +12,12 @@ import {
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Form,
   FormControl,
   FormField,
@@ -136,14 +136,14 @@ const WrapperTableEditor = ({
                 </Button>
               </PopoverTrigger>
               <PopoverContent id={listboxId} className="p-0" sameWidthAsTrigger>
-                <Command_Shadcn_>
-                  <CommandInput_Shadcn_ placeholder="Find a table..." />
-                  <CommandList_Shadcn_>
-                    <CommandEmpty_Shadcn_>No targets found</CommandEmpty_Shadcn_>
-                    <CommandGroup_Shadcn_>
+                <Command>
+                  <CommandInput placeholder="Find a table..." />
+                  <CommandList>
+                    <CommandEmpty>No targets found</CommandEmpty>
+                    <CommandGroup>
                       <ScrollArea className={(tables ?? []).length > 7 ? 'h-[200px]' : ''}>
                         {(tables ?? []).map((table, i) => (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={table.label}
                             className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                             onSelect={() => {
@@ -162,12 +162,12 @@ const WrapperTableEditor = ({
                             {String(i) === selectedTableIndex && (
                               <Check className={cn('mr-2 h-4 w-4')} />
                             )}
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         ))}
                       </ScrollArea>
-                    </CommandGroup_Shadcn_>
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
           </div>
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
index a91acb83ca6..522214d7b79 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
@@ -10,12 +10,12 @@ import { UseFormReturn } from 'react-hook-form'
 import {
   Button,
   cn,
-  Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
-  CommandGroup_Shadcn_ as CommandGroup,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   FormControl,
   FormField,
   FormMessage,
diff --git a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx
index 1128f408b19..5f603fa83c4 100644
--- a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx
+++ b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx
@@ -5,12 +5,12 @@ import { toast } from 'sonner'
 import {
   Button,
   Checkbox,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Input,
   Popover,
   PopoverContent,
@@ -206,14 +206,14 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                           </Button>
                         </PopoverTrigger>
                         <PopoverContent className="w-[400px] p-0" align="end">
-                          <Command_Shadcn_>
-                            <CommandInput_Shadcn_ placeholder="Search permissions..." />
-                            <CommandList_Shadcn_>
-                              <CommandEmpty_Shadcn_>No permissions found.</CommandEmpty_Shadcn_>
-                              <CommandGroup_Shadcn_ className="[&>div]:text-left">
+                          <Command>
+                            <CommandInput placeholder="Search permissions..." />
+                            <CommandList>
+                              <CommandEmpty>No permissions found.</CommandEmpty>
+                              <CommandGroup className="[&>div]:text-left">
                                 <div className="max-h-[210px] overflow-y-auto">
                                   {PERMISSIONS.map((perm) => (
-                                    <CommandItem_Shadcn_
+                                    <CommandItem
                                       key={perm.id}
                                       value={`${perm.id} ${perm.label}`}
                                       onSelect={() => toggle(perm.id)}
@@ -230,12 +230,12 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                                           {perm.label}
                                         </span>
                                       </div>
-                                    </CommandItem_Shadcn_>
+                                    </CommandItem>
                                   ))}
                                 </div>
-                              </CommandGroup_Shadcn_>
-                            </CommandList_Shadcn_>
-                          </Command_Shadcn_>
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
                         </PopoverContent>
                       </Popover>
                     </div>
diff --git a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
index 4c0c21f4a8c..f9221c0ae2f 100644
--- a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
@@ -5,7 +5,7 @@ import { Check, ChevronDown } from 'lucide-react'
 import Link from 'next/link'
 import { useQueryState } from 'nuqs'
 import { useMemo, useState } from 'react'
-import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui'
+import { Button, cn, CommandGroup, CommandItem } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
@@ -191,8 +191,8 @@ export const Usage = () => {
                       )
                     }}
                     renderActions={() => (
-                      <CommandGroup_Shadcn_>
-                        <CommandItem_Shadcn_
+                      <CommandGroup>
+                        <CommandItem
                           className="cursor-pointer flex items-center justify-between w-full"
                           onSelect={() => {
                             setOpenProjectSelector(false)
@@ -205,8 +205,8 @@ export const Usage = () => {
                         >
                           All projects
                           {!selectedProjectRef && <Check size={16} />}
-                        </CommandItem_Shadcn_>
-                      </CommandGroup_Shadcn_>
+                        </CommandItem>
+                      </CommandGroup>
                     )}
                   />
                 </div>
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
index ca77123d885..1f4b2119ec6 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
@@ -2,10 +2,10 @@ import { ChevronDown, Terminal } from 'lucide-react'
 import { useState } from 'react'
 import {
   Button,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -58,26 +58,26 @@ const LanguageSelector = ({ simplifiedVersion = false }: LanguageSelectorProps)
           </Button>
         </PopoverTrigger>
         <PopoverContent className="p-0 w-24" side="bottom" align="end">
-          <Command_Shadcn_>
-            <CommandList_Shadcn_>
-              <CommandGroup_Shadcn_>
-                <CommandItem_Shadcn_
+          <Command>
+            <CommandList>
+              <CommandGroup>
+                <CommandItem
                   className="cursor-pointer"
                   onSelect={() => updateLanguage('js')}
                   onClick={() => updateLanguage('js')}
                 >
                   <p>Javascript</p>
-                </CommandItem_Shadcn_>
-                <CommandItem_Shadcn_
+                </CommandItem>
+                <CommandItem
                   className="cursor-pointer"
                   onSelect={() => updateLanguage('bash')}
                   onClick={() => updateLanguage('bash')}
                 >
                   <p>Bash</p>
-                </CommandItem_Shadcn_>
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
     </div>
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.ResourcePicker.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.ResourcePicker.tsx
index a0f04bcfd68..dd30ddfade3 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.ResourcePicker.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.ResourcePicker.tsx
@@ -1,10 +1,4 @@
-import {
-  cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-} from 'ui'
+import { cn, Command, CommandGroup, CommandItem, CommandList } from 'ui'
 
 import type { ResourcePickerRenderProps } from './SecondLevelNav.Layout'
 
@@ -28,18 +22,18 @@ export const ResourcePickerList = ({
   }
 
   return (
-    <Command_Shadcn_>
-      <CommandList_Shadcn_>
-        <CommandGroup_Shadcn_>
+    <Command>
+      <CommandList>
+        <CommandGroup>
           {items.length === 0 && (
-            <CommandItem_Shadcn_ disabled className="cursor-default px-4">
+            <CommandItem disabled className="cursor-default px-4">
               <p className="text-foreground-light">{emptyMessage}</p>
-            </CommandItem_Shadcn_>
+            </CommandItem>
           )}
           {items.map((item) => {
             const isActive = item.name === selectedResource
             return (
-              <CommandItem_Shadcn_
+              <CommandItem
                 key={item.name}
                 className={cn(
                   'cursor-pointer px-4',
@@ -48,11 +42,11 @@ export const ResourcePickerList = ({
                 onSelect={() => handleSelect(item.name)}
               >
                 <p className="truncate">{item.name}</p>
-              </CommandItem_Shadcn_>
+              </CommandItem>
             )
           })}
-        </CommandGroup_Shadcn_>
-      </CommandList_Shadcn_>
-    </Command_Shadcn_>
+        </CommandGroup>
+      </CommandList>
+    </Command>
   )
 }
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx
index 3433213358d..60cdc1e505f 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx
@@ -1,15 +1,7 @@
 import { keepPreviousData } from '@tanstack/react-query'
 import { useDebounce, useIntersectionObserver } from '@uidotdev/usehooks'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import {
-  cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-} from 'ui'
+import { cn, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from 'ui'
 
 import type { ResourcePickerRenderProps } from './SecondLevelNav.Layout'
 import { usePaginatedBucketsQuery } from '@/data/storage/buckets-query'
@@ -101,22 +93,19 @@ export const StorageResourceList = ({
     rawQuery.length > 0 ? 'No buckets found for this search' : 'No buckets available'
 
   return (
-    <Command_Shadcn_ shouldFilter={false}>
-      <CommandInput_Shadcn_
+    <Command shouldFilter={false}>
+      <CommandInput
         showResetIcon
         value={rawQuery}
         onValueChange={setSearch}
         placeholder="Search buckets..."
         handleReset={() => setSearch('')}
       />
-      <CommandList_Shadcn_>
-        <CommandEmpty_Shadcn_
-          hidden={!showEmptyState}
-          className="py-3 text-sm text-foreground-light"
-        >
+      <CommandList>
+        <CommandEmpty hidden={!showEmptyState} className="py-3 text-sm text-foreground-light">
           {emptyMessage}
-        </CommandEmpty_Shadcn_>
-        <CommandGroup_Shadcn_>
+        </CommandEmpty>
+        <CommandGroup>
           {isFetching && buckets.length === 0 ? (
             <div className="px-4 py-3 text-sm text-foreground-light">Loading buckets...</div>
           ) : (
@@ -124,7 +113,7 @@ export const StorageResourceList = ({
               {buckets.map((bucket) => {
                 const isActive = bucket.name === selectedResource
                 return (
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     key={bucket.id}
                     value={bucket.name}
                     className={cn(
@@ -134,17 +123,17 @@ export const StorageResourceList = ({
                     onSelect={() => handleSelect(bucket.name)}
                   >
                     <p className="truncate">{bucket.name}</p>
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                 )
               })}
               {hasNextPage && <div ref={sentinelRef} className="h-2 w-full" />}
             </div>
           )}
-        </CommandGroup_Shadcn_>
+        </CommandGroup>
         {isFetchingNextPage && (
           <div className="px-4 py-2 text-sm text-foreground-light">Loading more buckets...</div>
         )}
-      </CommandList_Shadcn_>
-    </Command_Shadcn_>
+      </CommandList>
+    </Command>
   )
 }
diff --git a/apps/studio/components/interfaces/ProjectHome/SnippetDropdown.tsx b/apps/studio/components/interfaces/ProjectHome/SnippetDropdown.tsx
index 5fefc1ce491..fc197b07526 100644
--- a/apps/studio/components/interfaces/ProjectHome/SnippetDropdown.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/SnippetDropdown.tsx
@@ -3,11 +3,11 @@ import { useDebounce, useIntersectionObserver } from '@uidotdev/usehooks'
 import { Plus } from 'lucide-react'
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
@@ -91,8 +91,8 @@ export const SnippetDropdown = ({
         align={align}
         className={['w-80 p-0', className].filter(Boolean).join(' ')}
       >
-        <Command_Shadcn_ shouldFilter={false}>
-          <CommandInput_Shadcn_
+        <Command shouldFilter={false}>
+          <CommandInput
             showResetIcon
             autoFocus={autoFocus}
             placeholder="Search snippets..."
@@ -100,22 +100,22 @@ export const SnippetDropdown = ({
             onValueChange={setSearch}
             handleReset={() => setSearch('')}
           />
-          <CommandList_Shadcn_ ref={scrollRootRef}>
+          <CommandList ref={scrollRootRef}>
             {isLoading ? (
               <p className="text-xs text-center text-foreground-lighter py-3">Loading...</p>
             ) : search.length > 0 && snippets.length === 0 ? (
               <p className="text-xs text-center text-foreground-lighter py-3">No snippets found</p>
             ) : (
-              <CommandGroup_Shadcn_>
+              <CommandGroup>
                 <ScrollArea className={snippets.length > 7 ? 'h-[210px]' : ''}>
                   {snippets.map((snippet) => (
-                    <CommandItem_Shadcn_
+                    <CommandItem
                       key={snippet.id}
                       value={snippet.id}
                       onSelect={() => onSelect({ id: snippet.id, name: snippet.name })}
                     >
                       {snippet.name}
-                    </CommandItem_Shadcn_>
+                    </CommandItem>
                   ))}
                   <div ref={sentinelRef} className="h-1 -mt-1" />
                   {hasNextPage && (
@@ -124,13 +124,13 @@ export const SnippetDropdown = ({
                     </div>
                   )}
                 </ScrollArea>
-              </CommandGroup_Shadcn_>
+              </CommandGroup>
             )}
 
             <div className="h-px bg-border-overlay -mx-1" />
 
-            <CommandGroup_Shadcn_>
-              <CommandItem_Shadcn_
+            <CommandGroup>
+              <CommandItem
                 className="cursor-pointer w-full"
                 onSelect={() => {
                   setOpen(false)
@@ -142,10 +142,10 @@ export const SnippetDropdown = ({
                   <Plus size={14} strokeWidth={1.5} />
                   <p>Create snippet</p>
                 </div>
-              </CommandItem_Shadcn_>
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </DropdownMenuContent>
     </DropdownMenu>
   )
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
index b6ed1cb238f..8d8b07df62e 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
@@ -6,12 +6,12 @@ import {
   AlertDescription,
   AlertTitle,
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -101,12 +101,9 @@ const TableSelector = ({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="p-0 w-64" side="bottom" align="start">
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_
-              placeholder="Find table..."
-              onValueChange={(str) => searchTables(str)}
-            />
-            <CommandList_Shadcn_>
+          <Command>
+            <CommandInput placeholder="Find table..." onValueChange={(str) => searchTables(str)} />
+            <CommandList>
               {isLoading && (
                 <div className="flex items-center justify-center space-x-2 px-3 py-2">
                   <Loader className="animate-spin" size={12} />
@@ -128,13 +125,11 @@ const TableSelector = ({
 
               {isSuccess && (
                 <>
-                  <CommandGroup_Shadcn_ forceMount>
+                  <CommandGroup forceMount>
                     <ScrollArea className={(entities || []).length > 7 ? 'h-[210px]' : ''}>
-                      {entities.length === 0 && (
-                        <CommandEmpty_Shadcn_>No tables found</CommandEmpty_Shadcn_>
-                      )}
+                      {entities.length === 0 && <CommandEmpty>No tables found</CommandEmpty>}
                       {!searchInput && (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key="all-tables"
                           className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                           onSelect={() => {
@@ -150,10 +145,10 @@ const TableSelector = ({
                           {selectedSchemaName === '*' && (
                             <Check className="text-brand" strokeWidth={2} />
                           )}
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       )}
                       {entities?.map((table) => (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={table.id}
                           className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                           onSelect={() => {
@@ -169,14 +164,14 @@ const TableSelector = ({
                           {selectedSchemaName === table.name && (
                             <Check className="text-brand" strokeWidth={2} />
                           )}
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       ))}
                     </ScrollArea>
-                  </CommandGroup_Shadcn_>
+                  </CommandGroup>
                 </>
               )}
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
     </div>
diff --git a/apps/studio/components/interfaces/Reports/MetricOptions.tsx b/apps/studio/components/interfaces/Reports/MetricOptions.tsx
index 831f2eead53..d6066f2f987 100644
--- a/apps/studio/components/interfaces/Reports/MetricOptions.tsx
+++ b/apps/studio/components/interfaces/Reports/MetricOptions.tsx
@@ -3,11 +3,11 @@ import { useParams } from 'common'
 import { Home, Plus } from 'lucide-react'
 import { useState } from 'react'
 import {
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   DropdownMenuCheckboxItem,
   DropdownMenuPortal,
   DropdownMenuSub,
@@ -118,14 +118,14 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
         </DropdownMenuSubTrigger>
         <DropdownMenuPortal>
           <DropdownMenuSubContent className="p-0">
-            <Command_Shadcn_ shouldFilter={false}>
-              <CommandInput_Shadcn_
+            <Command shouldFilter={false}>
+              <CommandInput
                 autoFocus
                 placeholder="Search snippets..."
                 value={search}
                 onValueChange={setSearch}
               />
-              <CommandList_Shadcn_>
+              <CommandList>
                 {isLoading ? (
                   <div className="flex flex-col p-1 gap-y-1">
                     <ShimmeringLoader />
@@ -136,9 +136,9 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
                     No snippets found
                   </p>
                 ) : null}
-                <CommandGroup_Shadcn_>
+                <CommandGroup>
                   {snippets?.map((snippet) => (
-                    <CommandItem_Shadcn_
+                    <CommandItem
                       key={snippet.id}
                       value={snippet.id}
                       className="cursor-pointer"
@@ -163,15 +163,15 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
                       }}
                     >
                       {snippet.name}
-                    </CommandItem_Shadcn_>
+                    </CommandItem>
                   ))}
-                </CommandGroup_Shadcn_>
-              </CommandList_Shadcn_>
+                </CommandGroup>
+              </CommandList>
 
               <div className="h-px bg-border-overlay -mx-1" />
 
-              <CommandGroup_Shadcn_>
-                <CommandItem_Shadcn_
+              <CommandGroup>
+                <CommandItem
                   className="cursor-pointer w-full"
                   onSelect={() => {
                     editorPanelState.openAsNew()
@@ -182,9 +182,9 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
                     <Plus size={14} strokeWidth={1.5} />
                     <p>Create snippet</p>
                   </div>
-                </CommandItem_Shadcn_>
-              </CommandGroup_Shadcn_>
-            </Command_Shadcn_>
+                </CommandItem>
+              </CommandGroup>
+            </Command>
           </DropdownMenuSubContent>
         </DropdownMenuPortal>
       </DropdownMenuSub>
diff --git a/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx b/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
index 1d76a03b682..da045344504 100644
--- a/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
@@ -4,12 +4,12 @@ import { KeyboardEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Input,
   Popover,
   PopoverContent,
@@ -79,8 +79,8 @@ const FilterableInput = ({
 
   return (
     <div className="relative flex-1">
-      <Command_Shadcn_ className="relative overflow-visible bg-transparent">
-        <CommandInput_Shadcn_
+      <Command className="relative overflow-visible bg-transparent">
+        <CommandInput
           placeholder={placeholder}
           value={inputValue}
           onValueChange={handleInputChange}
@@ -96,25 +96,25 @@ const FilterableInput = ({
             isOpen && safeOptions.length > 0 && 'opacity-100 pointer-events-auto'
           )}
         >
-          <CommandList_Shadcn_ className="max-h-60 overflow-auto bg-surface-100 border border-border rounded-md shadow-lg">
-            <CommandEmpty_Shadcn_ className="py-2 px-3 text-sm text-foreground-lighter">
+          <CommandList className="max-h-60 overflow-auto bg-surface-100 border border-border rounded-md shadow-lg">
+            <CommandEmpty className="py-2 px-3 text-sm text-foreground-lighter">
               No matching options found. Press Enter to use "{inputValue}"
-            </CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
+            </CommandEmpty>
+            <CommandGroup>
               {safeOptions.map((option, index) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={`${option}-${index}`}
                   value={option}
                   onSelect={() => handleOptionSelect(option)}
                   className="px-3 py-2 text-sm cursor-pointer"
                 >
                   {option}
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
+            </CommandGroup>
+          </CommandList>
         </div>
-      </Command_Shadcn_>
+      </Command>
       {isOpen && <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />}
     </div>
   )
diff --git a/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx b/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
index fd06a093715..fe867b3c256 100644
--- a/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
+++ b/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
@@ -4,15 +4,7 @@ import { Label } from '@ui/components/shadcn/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
 import { ChevronDown } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import {
-  Button,
-  cn,
-  Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_ as CommandList,
-} from 'ui'
+import { Button, cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from 'ui'
 import { z } from 'zod'
 
 export interface ReportSelectOption {
@@ -95,7 +87,7 @@ export const ReportsSelectFilter = ({
             <CommandEmpty>No options found.</CommandEmpty>
             <CommandGroup>
               {options.map((option) => (
-                <CommandItem_Shadcn_ key={option.value}>
+                <CommandItem key={option.value}>
                   <Label
                     key={option.value}
                     className={
@@ -121,7 +113,7 @@ export const ReportsSelectFilter = ({
                       )}
                     </div>
                   </Label>
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
             </CommandGroup>
           </CommandList>
diff --git a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
index c34f80e9079..981f001b6b7 100644
--- a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
@@ -7,13 +7,13 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -252,13 +252,13 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
                     </Button>
                   </PopoverTrigger>
                   <PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
-                    <Command_Shadcn_>
-                      <CommandInput_Shadcn_ placeholder="Find folder..." />
-                      <CommandList_Shadcn_>
-                        <CommandEmpty_Shadcn_>No folders found</CommandEmpty_Shadcn_>
-                        <CommandGroup_Shadcn_>
+                    <Command>
+                      <CommandInput placeholder="Find folder..." />
+                      <CommandList>
+                        <CommandEmpty>No folders found</CommandEmpty>
+                        <CommandGroup>
                           <ScrollArea className={(folders || []).length > 6 ? 'h-[210px]' : ''}>
-                            <CommandItem_Shadcn_
+                            <CommandItem
                               key="root"
                               value="root"
                               className="cursor-pointer w-full justify-between"
@@ -278,9 +278,9 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
                                   ` (Current)`}
                               </span>
                               {selectedId === 'root' && <Check size={14} />}
-                            </CommandItem_Shadcn_>
+                            </CommandItem>
                             {folders?.map((folder) => (
-                              <CommandItem_Shadcn_
+                              <CommandItem
                                 key={folder.id}
                                 value={folder.name}
                                 className="cursor-pointer w-full justify-between"
@@ -300,13 +300,13 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
                                     ` (Current)`}
                                 </span>
                                 {folder.id === selectedId && <Check size={14} />}
-                              </CommandItem_Shadcn_>
+                              </CommandItem>
                             ))}
                           </ScrollArea>
-                        </CommandGroup_Shadcn_>
-                        <CommandSeparator_Shadcn_ />
-                        <CommandGroup_Shadcn_>
-                          <CommandItem_Shadcn_
+                        </CommandGroup>
+                        <CommandSeparator />
+                        <CommandGroup>
+                          <CommandItem
                             className="cursor-pointer w-full justify-start gap-x-2"
                             onSelect={(_e) => {
                               setOpen(false)
@@ -319,10 +319,10 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
                           >
                             <Plus size={14} strokeWidth={1.5} />
                             <p>New folder</p>
-                          </CommandItem_Shadcn_>
-                        </CommandGroup_Shadcn_>
-                      </CommandList_Shadcn_>
-                    </Command_Shadcn_>
+                          </CommandItem>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
                   </PopoverContent>
                 </Popover>
               </div>
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx
index e7f1cee472e..3e8041fa35f 100644
--- a/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx
+++ b/apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx
@@ -5,11 +5,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -126,15 +126,15 @@ export const ExposedFunctionSelector = ({
         align="start"
         sameWidthAsTrigger
       >
-        <Command_Shadcn_ shouldFilter={false}>
-          <CommandInput_Shadcn_
+        <Command shouldFilter={false}>
+          <CommandInput
             className="text-xs"
             placeholder="Find function..."
             value={search}
             onValueChange={setSearch}
           />
-          <CommandList_Shadcn_>
-            <CommandGroup_Shadcn_>
+          <CommandList>
+            <CommandGroup>
               {isPending ? (
                 <>
                   <div className="px-2 py-1">
@@ -179,7 +179,7 @@ export const ExposedFunctionSelector = ({
                       })
 
                       return (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={key}
                           value={key}
                           className={cn(
@@ -266,7 +266,7 @@ export const ExposedFunctionSelector = ({
                               )}
                             </div>
                           </div>
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       )
                     })}
                     <div ref={sentinelRef} className="h-1 -mt-1" />
@@ -278,9 +278,9 @@ export const ExposedFunctionSelector = ({
                   </ScrollArea>
                 </>
               )}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
index 396ef368cfa..596d9541816 100644
--- a/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
+++ b/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
@@ -3,12 +3,12 @@ import { useMemo, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -85,10 +85,10 @@ export const ExposedSchemaSelector = ({
         align="start"
         sameWidthAsTrigger
       >
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ className="text-xs" placeholder="Find schema..." />
-          <CommandList_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandInput className="text-xs" placeholder="Find schema..." />
+          <CommandList>
+            <CommandGroup>
               {isPending ? (
                 <>
                   <div className="px-2 py-1">
@@ -104,17 +104,17 @@ export const ExposedSchemaSelector = ({
                 </div>
               ) : (
                 <>
-                  <CommandEmpty_Shadcn_>
+                  <CommandEmpty>
                     <p className="text-xs text-center text-foreground-lighter py-3">
                       No schemas found
                     </p>
-                  </CommandEmpty_Shadcn_>
+                  </CommandEmpty>
                   <ScrollArea className={schemas.length > 7 ? 'h-[210px]' : ''}>
                     {schemas.map((schema) => {
                       const isExposed = selectedSet.has(schema.name)
 
                       return (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={schema.id}
                           value={schema.name}
                           className="cursor-pointer w-full"
@@ -128,15 +128,15 @@ export const ExposedSchemaSelector = ({
                             {isExposed && <Check size={16} className="text-brand shrink-0" />}
                             <span className="truncate">{schema.name}</span>
                           </div>
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       )
                     })}
                   </ScrollArea>
                 </>
               )}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
index e7ecfd3411b..21695b9105a 100644
--- a/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
+++ b/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
@@ -5,11 +5,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -120,15 +120,15 @@ export const ExposedTableSelector = ({
         align="start"
         sameWidthAsTrigger
       >
-        <Command_Shadcn_ shouldFilter={false}>
-          <CommandInput_Shadcn_
+        <Command shouldFilter={false}>
+          <CommandInput
             className="text-xs"
             placeholder="Find table..."
             value={search}
             onValueChange={setSearch}
           />
-          <CommandList_Shadcn_>
-            <CommandGroup_Shadcn_>
+          <CommandList>
+            <CommandGroup>
               {isPending ? (
                 <>
                   <div className="px-2 py-1">
@@ -173,7 +173,7 @@ export const ExposedTableSelector = ({
                       })
 
                       return (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={table.id}
                           value={`${table.schema}.${table.name}-${table.id}`}
                           className={cn(
@@ -260,7 +260,7 @@ export const ExposedTableSelector = ({
                               )}
                             </div>
                           </div>
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       )
                     })}
                     <div ref={sentinelRef} className="h-1 -mt-1" />
@@ -272,9 +272,9 @@ export const ExposedTableSelector = ({
                   </ScrollArea>
                 </>
               )}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
index e76a04a69dc..0fda2c6dfee 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
@@ -3,13 +3,13 @@ import { useMemo, useState, type ComponentProps, type ReactNode } from 'react'
 import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
 import {
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   FormControl,
   FormField,
   Popover,
@@ -174,14 +174,14 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
                 </FormControl>
               </PopoverTrigger>
               <PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
-                <Command_Shadcn_>
-                  <CommandInput_Shadcn_ placeholder="Search repositories..." />
-                  <CommandList_Shadcn_ className="!max-h-[220px]">
-                    <CommandEmpty_Shadcn_>No repositories found.</CommandEmpty_Shadcn_>
+                <Command>
+                  <CommandInput placeholder="Search repositories..." />
+                  <CommandList className="!max-h-[220px]">
+                    <CommandEmpty>No repositories found.</CommandEmpty>
                     {repositories.length > 0 ? (
-                      <CommandGroup_Shadcn_>
+                      <CommandGroup>
                         {repositories.map((repo) => (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={repo.id}
                             value={`${repo.name.replaceAll('"', '')}-${repo.id}`}
                             className="flex gap-2 items-center"
@@ -208,12 +208,12 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
                             <span className="truncate" title={repo.name}>
                               {repo.name}
                             </span>
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         ))}
-                      </CommandGroup_Shadcn_>
+                      </CommandGroup>
                     ) : null}
-                    <CommandGroup_Shadcn_>
-                      <CommandItem_Shadcn_
+                    <CommandGroup>
+                      <CommandItem
                         className="flex gap-2 items-center cursor-pointer"
                         onSelect={() => {
                           setIsRepoSelectorOpen(false)
@@ -222,13 +222,13 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
                       >
                         <PlusIcon size={16} />
                         Add GitHub Repositories
-                      </CommandItem_Shadcn_>
-                    </CommandGroup_Shadcn_>
+                      </CommandItem>
+                    </CommandGroup>
                     {hasPartialResponseDueToSSO && (
                       <>
-                        <CommandSeparator_Shadcn_ />
-                        <CommandGroup_Shadcn_>
-                          <CommandItem_Shadcn_
+                        <CommandSeparator />
+                        <CommandGroup>
+                          <CommandItem
                             className="flex gap-2 items-start cursor-pointer"
                             onSelect={() => {
                               setIsRepoSelectorOpen(false)
@@ -239,12 +239,12 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
                             <div className="text-xs text-foreground-light">
                               Re-authorize GitHub with SSO to show all repositories
                             </div>
-                          </CommandItem_Shadcn_>
-                        </CommandGroup_Shadcn_>
+                          </CommandItem>
+                        </CommandGroup>
                       </>
                     )}
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
           )}
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
index b7fab29a9ff..1fa3d8900a7 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
@@ -7,12 +7,12 @@ import {
   Badge,
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   copyToClipboard,
   DropdownMenu,
   DropdownMenuContent,
@@ -280,13 +280,13 @@ const LogsQueryPanel = ({
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent className="p-0" sameWidthAsTrigger>
-                  <Command_Shadcn_>
-                    <CommandInput_Shadcn_ placeholder="Search source..." />
-                    <CommandList_Shadcn_>
-                      <CommandEmpty_Shadcn_>No source found.</CommandEmpty_Shadcn_>
-                      <CommandGroup_Shadcn_>
+                  <Command>
+                    <CommandInput placeholder="Search source..." />
+                    <CommandList>
+                      <CommandEmpty>No source found.</CommandEmpty>
+                      <CommandGroup>
                         {logConstants.schemas.map((schema) => (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={schema.reference}
                             value={schema.reference}
                             onSelect={() => {
@@ -301,11 +301,11 @@ const LogsQueryPanel = ({
                               )}
                             />
                             {schema.name}
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         ))}
-                      </CommandGroup_Shadcn_>
-                    </CommandList_Shadcn_>
-                  </Command_Shadcn_>
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
                 </PopoverContent>
               </Popover>
               <Table
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
index 1000795a3f2..7a96ed77d3b 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
@@ -8,10 +8,10 @@ import { useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -228,26 +228,26 @@ const result = await index.putVectors({
               </div>
             </PopoverTrigger>
             <PopoverContent className="p-0 w-32" side="bottom" align="end">
-              <Command_Shadcn_>
-                <CommandList_Shadcn_>
-                  <CommandGroup_Shadcn_>
-                    <CommandItem_Shadcn_
+              <Command>
+                <CommandList>
+                  <CommandGroup>
+                    <CommandItem
                       className="cursor-pointer"
                       onSelect={() => onLanguageChange('sql')}
                       onClick={() => onLanguageChange('sql')}
                     >
                       <p>SQL</p>
-                    </CommandItem_Shadcn_>
-                    <CommandItem_Shadcn_
+                    </CommandItem>
+                    <CommandItem
                       className="cursor-pointer"
                       onSelect={() => onLanguageChange('javascript')}
                       onClick={() => onLanguageChange('javascript')}
                     >
                       <p>JavaScript</p>
-                    </CommandItem_Shadcn_>
-                  </CommandGroup_Shadcn_>
-                </CommandList_Shadcn_>
-              </Command_Shadcn_>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
             </PopoverContent>
           </Popover>
 
diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
index af6ef46f857..983c187e708 100644
--- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
@@ -6,7 +6,7 @@ import { Check, ChevronsUpDown, ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import type { UseFormReturn } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, FormControl, FormField } from 'ui'
+import { Button, cn, CommandGroup, CommandItem, FormControl, FormField } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
@@ -99,8 +99,8 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
                 )
               }}
               renderActions={(setOpen) => (
-                <CommandGroup_Shadcn_>
-                  <CommandItem_Shadcn_
+                <CommandGroup>
+                  <CommandItem
                     className="w-full gap-x-2"
                     onSelect={() => {
                       field.onChange(NO_PROJECT_MARKER)
@@ -111,8 +111,8 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
                     <p className={cn(field.value !== NO_PROJECT_MARKER && 'ml-6')}>
                       No specific project
                     </p>
-                  </CommandItem_Shadcn_>
-                </CommandGroup_Shadcn_>
+                  </CommandItem>
+                </CommandGroup>
               )}
             />
           </FormControl>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
index 887951359dc..b01df7bc81b 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
@@ -17,13 +17,13 @@ import {
   AlertTitle,
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   CriticalIcon,
   Input,
   InputGroup,
@@ -209,22 +209,22 @@ const ColumnType = ({
           </Button>
         </PopoverTrigger>
         <PopoverContent id={listboxId} className="w-[460px] p-0" side="bottom" align="center">
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_
+          <Command>
+            <CommandInput
               placeholder="Search types..."
               // [Joshen] Addresses style issues when this component is being used in the old Form component
               // Specifically in WrapperDynamicColumns - can be cleaned up once we're no longer using that
               className="bg-transparent! focus:shadow-none! focus:ring-0! text-xs"
             />
-            <CommandEmpty_Shadcn_>Type not found.</CommandEmpty_Shadcn_>
+            <CommandEmpty>Type not found.</CommandEmpty>
 
-            <CommandList_Shadcn_>
+            <CommandList>
               <ScrollArea className="h-[240px]">
-                <CommandGroup_Shadcn_ heading="Postgres data types">
+                <CommandGroup heading="Postgres data types">
                   {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => {
                     const isSelected = matchesBuiltin(option.name, value)
                     return (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={option.name}
                         value={option.name}
                         className={cn('relative', isSelected ? 'bg-surface-200' : '')}
@@ -241,19 +241,19 @@ const ColumnType = ({
                         <span className="absolute right-3 top-2">
                           {isSelected ? <Check className="text-brand" size={14} /> : ''}
                         </span>
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     )
                   })}
-                </CommandGroup_Shadcn_>
+                </CommandGroup>
 
                 {enumTypes.length > 0 && (
                   <>
-                    <CommandSeparator_Shadcn_ />
-                    <CommandGroup_Shadcn_ heading="Other types">
+                    <CommandSeparator />
+                    <CommandGroup heading="Other types">
                       {enumTypes.map((option) => {
                         const isSelected = matchesEnum(option, value)
                         return (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={option.id}
                             value={option.format}
                             className={cn('relative', isSelected ? 'bg-surface-200' : '')}
@@ -287,15 +287,15 @@ const ColumnType = ({
                                 </span>
                               )}
                             </div>
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         )
                       })}
-                    </CommandGroup_Shadcn_>
+                    </CommandGroup>
                   </>
                 )}
               </ScrollArea>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+            </CommandList>
+          </Command>
         </PopoverContent>
       </Popover>
 
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index 9bb7473f3b3..d203b1232ea 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -7,11 +7,11 @@ import {
   Button,
   Checkbox,
   cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Input,
   Popover,
   PopoverContent,
@@ -167,16 +167,16 @@ export const Column = ({
                 <div className="text-xs px-2 pt-2">
                   Involved in {relations.length} foreign key{relations.length > 1 ? 's' : ''}
                 </div>
-                <Command_Shadcn_>
-                  <CommandList_Shadcn_>
-                    <CommandGroup_Shadcn_>
+                <Command>
+                  <CommandList>
+                    <CommandGroup>
                       {relations.map((relation, idx) => {
                         const key = String(relation?.id ?? `${column.id}-relation-${idx}`)
                         const status = getRelationStatus(relation)
                         if (status === 'REMOVE') return null
 
                         return (
-                          <CommandItem_Shadcn_
+                          <CommandItem
                             key={key}
                             value={key}
                             className="cursor-pointer w-full"
@@ -216,23 +216,23 @@ export const Column = ({
                                 </p>
                               </div>
                             )}
-                          </CommandItem_Shadcn_>
+                          </CommandItem>
                         )
                       })}
-                    </CommandGroup_Shadcn_>
-                    <CommandSeparator_Shadcn_ />
-                    <CommandGroup_Shadcn_>
-                      <CommandItem_Shadcn_
+                    </CommandGroup>
+                    <CommandSeparator />
+                    <CommandGroup>
+                      <CommandItem
                         className="cursor-pointer w-full gap-x-2"
                         onSelect={() => onEditForeignKey()}
                         onClick={() => onEditForeignKey()}
                       >
                         <Plus size={14} strokeWidth={1.5} />
                         <p>Add foreign key relation</p>
-                      </CommandItem_Shadcn_>
-                    </CommandGroup_Shadcn_>
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                      </CommandItem>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
           )}
diff --git a/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx b/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
index f6e7cf989be..16fcc29ce99 100644
--- a/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
@@ -2,12 +2,12 @@ import { CheckIcon } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import {
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
@@ -59,13 +59,13 @@ export const TimezoneDropdown = () => {
       </DropdownMenuSubTrigger>
       <DropdownMenuPortal>
         <DropdownMenuSubContent className="p-0 w-[320px]" sideOffset={4}>
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No timezones found</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
+          <Command>
+            <CommandInput placeholder="Search timezone..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>No timezones found</CommandEmpty>
+              <CommandGroup>
                 <ScrollArea className="h-72">
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     key={AUTO_OPTION_VALUE}
                     value={`Auto detect ${browserTimezone}`}
                     onSelect={() => handleSelect('')}
@@ -80,12 +80,12 @@ export const TimezoneDropdown = () => {
                         isAutoDetected ? 'opacity-100' : 'opacity-0'
                       )}
                     />
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                   {TIMEZONES_BY_IANA.map((entry) => {
                     const ianaName = entry.utc[0]
                     const isSelected = !isAutoDetected && storedTimezone === ianaName
                     return (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={ianaName}
                         // CommandItem matches against the `value` prop for the input filter — include
                         // both the human label and the IANA name so search works for either.
@@ -99,13 +99,13 @@ export const TimezoneDropdown = () => {
                             isSelected ? 'opacity-100' : 'opacity-0'
                           )}
                         />
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     )
                   })}
                 </ScrollArea>
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
+              </CommandGroup>
+            </CommandList>
+          </Command>
         </DropdownMenuSubContent>
       </DropdownMenuPortal>
     </DropdownMenuSub>
diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
index 216164c180f..54a044c8e8b 100644
--- a/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
+++ b/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
@@ -3,13 +3,13 @@ import Link from 'next/link'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   ScrollArea,
 } from 'ui'
 
@@ -46,7 +46,7 @@ export function BranchDropdownCommandContent({
 
   if (embedded) {
     return (
-      <Command_Shadcn_ className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
+      <Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
         <div className="grid grid-cols-2 gap-2 shrink-0 p-2 border-b">
           <Button
             type="text"
@@ -96,11 +96,11 @@ export function BranchDropdownCommandContent({
           </Button>
         </div>
         {isBranchingEnabled && (
-          <CommandInput_Shadcn_ placeholder="Find branch..." wrapperClassName="shrink-0 border-b" />
+          <CommandInput placeholder="Find branch..." wrapperClassName="shrink-0 border-b" />
         )}
-        <CommandList_Shadcn_ className="flex flex-col flex-1 p-1 min-h-0 overflow-y-auto max-h-none!">
-          {isBranchingEnabled && <CommandEmpty_Shadcn_>No branches found</CommandEmpty_Shadcn_>}
-          <CommandGroup_Shadcn_ className="min-h-0">
+        <CommandList className="flex flex-col flex-1 p-1 min-h-0 overflow-y-auto max-h-none!">
+          {isBranchingEnabled && <CommandEmpty>No branches found</CommandEmpty>}
+          <CommandGroup className="min-h-0">
             {branchList.map((branch) => (
               <BranchLink
                 key={branch.id}
@@ -109,18 +109,18 @@ export function BranchDropdownCommandContent({
                 onClose={onClose}
               />
             ))}
-          </CommandGroup_Shadcn_>
-        </CommandList_Shadcn_>
-      </Command_Shadcn_>
+          </CommandGroup>
+        </CommandList>
+      </Command>
     )
   }
 
   return (
-    <Command_Shadcn_ className={className}>
-      {isBranchingEnabled && <CommandInput_Shadcn_ placeholder="Find branch..." />}
-      <CommandList_Shadcn_>
-        {isBranchingEnabled && <CommandEmpty_Shadcn_>No branches found</CommandEmpty_Shadcn_>}
-        <CommandGroup_Shadcn_>
+    <Command className={className}>
+      {isBranchingEnabled && <CommandInput placeholder="Find branch..." />}
+      <CommandList>
+        {isBranchingEnabled && <CommandEmpty>No branches found</CommandEmpty>}
+        <CommandGroup>
           <ScrollArea className="max-h-[210px] overflow-y-auto">
             {branchList.map((branch) => (
               <BranchLink
@@ -131,12 +131,12 @@ export function BranchDropdownCommandContent({
               />
             ))}
           </ScrollArea>
-        </CommandGroup_Shadcn_>
+        </CommandGroup>
 
-        <CommandSeparator_Shadcn_ />
+        <CommandSeparator />
 
-        <CommandGroup_Shadcn_>
-          <CommandItem_Shadcn_
+        <CommandGroup>
+          <CommandItem
             className="cursor-pointer w-full"
             onSelect={() => {
               track('branch_selector_create_clicked')
@@ -148,8 +148,8 @@ export function BranchDropdownCommandContent({
               <Plus size={14} strokeWidth={1.5} />
               <p>Create branch</p>
             </div>
-          </CommandItem_Shadcn_>
-          <CommandItem_Shadcn_
+          </CommandItem>
+          <CommandItem
             className="cursor-pointer w-full"
             onSelect={() => {
               track('branch_selector_manage_clicked')
@@ -163,13 +163,13 @@ export function BranchDropdownCommandContent({
               <ListTree size={14} strokeWidth={1.5} />
               <p>Manage branches</p>
             </Link>
-          </CommandItem_Shadcn_>
-        </CommandGroup_Shadcn_>
+          </CommandItem>
+        </CommandGroup>
 
-        <CommandSeparator_Shadcn_ />
+        <CommandSeparator />
 
-        <CommandGroup_Shadcn_>
-          <CommandItem_Shadcn_
+        <CommandGroup>
+          <CommandItem
             className="cursor-pointer w-full"
             onSelect={() => {
               onClose()
@@ -190,9 +190,9 @@ export function BranchDropdownCommandContent({
                 <p className="text-lighter">Join GitHub Discussion</p>
               </div>
             </a>
-          </CommandItem_Shadcn_>
-        </CommandGroup_Shadcn_>
-      </CommandList_Shadcn_>
-    </Command_Shadcn_>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
   )
 }
diff --git a/apps/studio/components/layouts/AppLayout/BranchLink.tsx b/apps/studio/components/layouts/AppLayout/BranchLink.tsx
index 32cdce43d41..aa65952f733 100644
--- a/apps/studio/components/layouts/AppLayout/BranchLink.tsx
+++ b/apps/studio/components/layouts/AppLayout/BranchLink.tsx
@@ -1,7 +1,7 @@
 import { Check, Shield } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { CommandItem_Shadcn_ } from 'ui'
+import { CommandItem } from 'ui'
 
 import { sanitizeRoute } from './ProjectDropdown.utils'
 import type { Branch } from '@/data/branches/branches-query'
@@ -22,7 +22,7 @@ export function BranchLink({ branch, isSelected, onClose }: BranchLinkProps) {
 
   return (
     <Link passHref href={href}>
-      <CommandItem_Shadcn_
+      <CommandItem
         value={branch.name.replaceAll('"', '')}
         className="cursor-pointer w-full flex items-center justify-between text-sm md:text-xs p-2 md:py-1.5 md:px-2"
         onSelect={() => {
@@ -38,7 +38,7 @@ export function BranchLink({ branch, isSelected, onClose }: BranchLinkProps) {
           {branch.name}
         </p>
         {isSelected && <Check size={14} strokeWidth={1.5} />}
-      </CommandItem_Shadcn_>
+      </CommandItem>
     </Link>
   )
 }
diff --git a/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx b/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx
index cfd09ee9d27..a4a0e712248 100644
--- a/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx
@@ -1,6 +1,6 @@
 import { Check } from 'lucide-react'
 import Link from 'next/link'
-import { cn, CommandItem_Shadcn_ } from 'ui'
+import { cn, CommandItem } from 'ui'
 
 import PartnerIcon from '@/components/ui/PartnerIcon'
 import type { Organization } from '@/types'
@@ -25,7 +25,7 @@ export function OrgCommandItem({
   const href = hasRouteSlug ? routePathname.replace('[slug]', org.slug) : `/org/${org.slug}`
 
   return (
-    <CommandItem_Shadcn_
+    <CommandItem
       key={org.slug}
       value={`${org.name.replaceAll('"', '')} - ${org.slug}`}
       className="cursor-pointer w-full"
@@ -44,6 +44,6 @@ export function OrgCommandItem({
         </div>
         {org.slug === selectedSlug && <Check size={16} />}
       </Link>
-    </CommandItem_Shadcn_>
+    </CommandItem>
   )
 }
diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
index 78a395fa35e..3eb12d3705c 100644
--- a/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
@@ -3,13 +3,13 @@ import Link from 'next/link'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   ScrollArea,
 } from 'ui'
 
@@ -55,7 +55,7 @@ export function OrganizationDropdownCommandContent({
 
   if (embedded) {
     return (
-      <Command_Shadcn_ className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
+      <Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
         <div className="flex items-center gap-2 shrink-0 border-b p-2">
           <Button type="text" block size="small" asChild>
             <Link
@@ -84,51 +84,51 @@ export function OrganizationDropdownCommandContent({
             </Button>
           )}
         </div>
-        <CommandInput_Shadcn_
+        <CommandInput
           placeholder="Find organization..."
           wrapperClassName="shrink-0"
           className="text-base sm:text-sm"
         />
-        <CommandList_Shadcn_ className="flex flex-col flex-1 min-h-0 overflow-y-auto p-1 max-h-none!">
-          <CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_ className="min-h-0">{orgList}</CommandGroup_Shadcn_>
-        </CommandList_Shadcn_>
-      </Command_Shadcn_>
+        <CommandList className="flex flex-col flex-1 min-h-0 overflow-y-auto p-1 max-h-none!">
+          <CommandEmpty>No organizations found</CommandEmpty>
+          <CommandGroup className="min-h-0">{orgList}</CommandGroup>
+        </CommandList>
+      </Command>
     )
   }
 
   return (
-    <Command_Shadcn_ className={className}>
-      <CommandInput_Shadcn_ placeholder="Find organization..." />
-      <CommandList_Shadcn_>
-        <CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
-        <CommandGroup_Shadcn_>
+    <Command className={className}>
+      <CommandInput placeholder="Find organization..." />
+      <CommandList>
+        <CommandEmpty>No organizations found</CommandEmpty>
+        <CommandGroup>
           <ScrollArea className={(organizations || []).length > 7 ? 'md:h-[210px]' : ''}>
             {orgList}
           </ScrollArea>
-        </CommandGroup_Shadcn_>
-        <CommandSeparator_Shadcn_ />
-        <CommandGroup_Shadcn_>
-          <CommandItem_Shadcn_ className="cursor-pointer w-full" onSelect={() => onClose()}>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup>
+          <CommandItem className="cursor-pointer w-full" onSelect={() => onClose()}>
             <Link href="/organizations" className="flex items-center gap-2 w-full">
               All Organizations
             </Link>
-          </CommandItem_Shadcn_>
-        </CommandGroup_Shadcn_>
+          </CommandItem>
+        </CommandGroup>
         {organizationCreationEnabled && (
           <>
-            <CommandSeparator_Shadcn_ />
-            <CommandGroup_Shadcn_>
-              <CommandItem_Shadcn_ className="cursor-pointer w-full" onSelect={() => onClose()}>
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem className="cursor-pointer w-full" onSelect={() => onClose()}>
                 <Link href="/new" className="flex items-center gap-2 w-full">
                   <Plus size={14} strokeWidth={1.5} />
                   <p>New organization</p>
                 </Link>
-              </CommandItem_Shadcn_>
-            </CommandGroup_Shadcn_>
+              </CommandItem>
+            </CommandGroup>
           </>
         )}
-      </CommandList_Shadcn_>
-    </Command_Shadcn_>
+      </CommandList>
+    </Command>
   )
 }
diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
index 14acd11c451..671c6947e46 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { ComponentProps } from 'react'
 import { useState } from 'react'
-import { Button, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui'
+import { Button, CommandGroup, CommandItem } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns'
 
 import { AppLayoutDropdownTriggerButton } from './AppLayoutDropdown'
@@ -55,8 +55,8 @@ function ProjectDropdownNewProjectActions({
   }
 
   return (
-    <CommandGroup_Shadcn_>
-      <CommandItem_Shadcn_
+    <CommandGroup>
+      <CommandItem
         className="cursor-pointer w-full"
         onSelect={() => {
           onClose()
@@ -68,8 +68,8 @@ function ProjectDropdownNewProjectActions({
           <Plus size={14} strokeWidth={1.5} />
           <p>New project</p>
         </Link>
-      </CommandItem_Shadcn_>
-    </CommandGroup_Shadcn_>
+      </CommandItem>
+    </CommandGroup>
   )
 }
 
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/OrgSelector.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/OrgSelector.tsx
index d6a9f12c618..fb9f3e09b72 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/OrgSelector.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/OrgSelector.tsx
@@ -4,13 +4,13 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import {
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -107,11 +107,11 @@ export function OrgSelector() {
         <Popover open={open} onOpenChange={setOpen} modal={false}>
           <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
           <PopoverContent className="p-0" side="bottom" align="start">
-            <Command_Shadcn_>
-              <CommandInput_Shadcn_ placeholder="Find organization..." />
-              <CommandList_Shadcn_>
-                <CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
-                <CommandGroup_Shadcn_>
+            <Command>
+              <CommandInput placeholder="Find organization..." />
+              <CommandList>
+                <CommandEmpty>No organizations found</CommandEmpty>
+                <CommandGroup>
                   <ScrollArea
                     className={(organizations || []).length > 7 ? 'h-full md:h-[210px]' : ''}
                   >
@@ -126,10 +126,10 @@ export function OrgSelector() {
                       />
                     ))}
                   </ScrollArea>
-                </CommandGroup_Shadcn_>
-                <CommandSeparator_Shadcn_ />
-                <CommandGroup_Shadcn_>
-                  <CommandItem_Shadcn_
+                </CommandGroup>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
                     className="cursor-pointer w-full"
                     onSelect={() => {
                       setOpen(false)
@@ -140,13 +140,13 @@ export function OrgSelector() {
                     <Link href="/organizations" className="flex items-center gap-2 w-full">
                       <p>All Organizations</p>
                     </Link>
-                  </CommandItem_Shadcn_>
-                </CommandGroup_Shadcn_>
+                  </CommandItem>
+                </CommandGroup>
                 {organizationCreationEnabled && (
                   <>
-                    <CommandSeparator_Shadcn_ />
-                    <CommandGroup_Shadcn_>
-                      <CommandItem_Shadcn_
+                    <CommandSeparator />
+                    <CommandGroup>
+                      <CommandItem
                         className="cursor-pointer w-full"
                         onSelect={() => {
                           setOpen(false)
@@ -158,12 +158,12 @@ export function OrgSelector() {
                           <Plus size={14} strokeWidth={1.5} />
                           <p>New organization</p>
                         </Link>
-                      </CommandItem_Shadcn_>
-                    </CommandGroup_Shadcn_>
+                      </CommandItem>
+                    </CommandGroup>
                   </>
                 )}
-              </CommandList_Shadcn_>
-            </Command_Shadcn_>
+              </CommandList>
+            </Command>
           </PopoverContent>
         </Popover>
       </SidebarMenuItem>
diff --git a/apps/studio/components/layouts/ProjectLayout/index.test.tsx b/apps/studio/components/layouts/ProjectLayout/index.test.tsx
index da21a6aed34..bff3522e1d0 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.test.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.test.tsx
@@ -96,11 +96,11 @@ vi.mock('ui', () => ({
   Alert: ({ children, ...props }: any) => <div {...props}>{children}</div>,
   AlertDescription: ({ children, ...props }: any) => <div {...props}>{children}</div>,
   AlertTitle: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  CommandInput_Shadcn_: { displayName: 'CommandInput' },
-  Command_Shadcn_: { displayName: 'Command' },
-  CommandGroup_Shadcn_: { displayName: 'CommandGroup' },
-  CommandItem_Shadcn_: { displayName: 'CommandItem' },
-  CommandList_Shadcn_: { displayName: 'CommandList' },
+  CommandInput: { displayName: 'CommandInput' },
+  Command: { displayName: 'Command' },
+  CommandGroup: { displayName: 'CommandGroup' },
+  CommandItem: { displayName: 'CommandItem' },
+  CommandList: { displayName: 'CommandList' },
   LogoLoader: () => <div data-testid="logo-loader" />,
   ResizableHandle: (props: any) => <div {...props} />,
   ResizablePanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
index 01b5961e2c0..df8be38a8f1 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
@@ -4,13 +4,7 @@ import { useParams } from 'common'
 import { AlertTriangle, Code, Loader2, Table2 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useRef } from 'react'
-import {
-  cn,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-} from 'ui'
+import { cn, CommandEmpty, CommandGroup, CommandItem, CommandList } from 'ui'
 import { CodeBlock } from 'ui-patterns/CodeBlock'
 import type { CommandOptions } from 'ui-patterns/CommandMenu'
 import {
@@ -166,17 +160,17 @@ function EmptyState({
   return (
     <div className="p-6">
       <p className="mb-2 text-center">No snippets found.</p>
-      <CommandList_Shadcn_ className="py-2">
-        <CommandGroup_Shadcn_>
-          <CommandItem_Shadcn_
+      <CommandList className="py-2">
+        <CommandGroup>
+          <CommandItem
             id="create-snippet"
             className={generateCommandClassNames(false)}
             onSelect={() => router.push(`/project/${projectRef ?? '_'}/sql/new`)}
           >
             {canCreateNew ? 'Create new snippet' : 'Run new SQL'}
-          </CommandItem_Shadcn_>
-        </CommandGroup_Shadcn_>
-      </CommandList_Shadcn_>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
     </div>
   )
 }
@@ -198,16 +192,16 @@ function SnippetSelector({
 
   return (
     <div className="w-full grow min-h-0 grid gap-4 md:grid-cols-2">
-      <CommandList_Shadcn_
+      <CommandList
         className={cn(
           'h-full! min-h-0 max-h-[unset] py-2 overflow-hidden',
           '*:[[cmdk-list-sizer]]:h-full *:[[cmdk-list-sizer]]:flex *:[[cmdk-list-sizer]]:flex-col'
         )}
       >
         {!!snippets && snippets.length > 0 && (
-          <CommandGroup_Shadcn_ className="grow min-h-0 overflow-auto">
+          <CommandGroup className="grow min-h-0 overflow-auto">
             {snippets.map((snippet) => (
-              <CommandItem_Shadcn_
+              <CommandItem
                 key={snippet.id}
                 id={`${snippet.id}-${snippet.name}`}
                 className={generateCommandClassNames(false)}
@@ -215,26 +209,26 @@ function SnippetSelector({
                 onSelect={() => void router.push(`/project/${projectRef ?? '_'}/sql/${snippet.id}`)}
               >
                 {snippet.name}
-              </CommandItem_Shadcn_>
+              </CommandItem>
             ))}
-          </CommandGroup_Shadcn_>
+          </CommandGroup>
         )}
         {canCreateNew && (
           <div className="min-h-fit grow-0">
             <hr className="mt-4 mb-2 mx-2" />
-            <CommandGroup_Shadcn_ forceMount={true}>
-              <CommandItem_Shadcn_
+            <CommandGroup forceMount={true}>
+              <CommandItem
                 id="create-snippet"
                 className={generateCommandClassNames(false)}
                 onSelect={() => router.push(`/project/${projectRef ?? '_'}/sql/new`)}
                 forceMount={true}
               >
                 Create new snippet
-              </CommandItem_Shadcn_>
-            </CommandGroup_Shadcn_>
+              </CommandItem>
+            </CommandGroup>
           </div>
         )}
-      </CommandList_Shadcn_>
+      </CommandList>
       <CodeBlock
         language="sql"
         value={isSQLSnippet ? selectedSnippet?.content?.unchecked_sql : ''}
@@ -321,15 +315,15 @@ function TableSelector() {
         <Breadcrumb />
         <CommandMenuInput autoFocus />
       </CommandHeader>
-      <CommandList_Shadcn_>
+      <CommandList>
         {isLoading && <LoadingState />}
         {isError && <ErrorState />}
         {isSuccess && (
           <>
-            <CommandEmpty_Shadcn_ />
-            <CommandGroup_Shadcn_>
+            <CommandEmpty />
+            <CommandGroup>
               {tables?.map((table) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={table.id}
                   className={generateCommandClassNames(false)}
                   value={escapeAttributeSelector(`${table.schema}.${table.name}`)}
@@ -340,12 +334,12 @@ function TableSelector() {
                   }}
                 >
                   {`${table.schema}.${table.name}`}
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
+            </CommandGroup>
           </>
         )}
-      </CommandList_Shadcn_>
+      </CommandList>
     </CommandWrapper>
   )
 }
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
index 742497e6e0b..5415702eaf6 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
@@ -3,13 +3,13 @@ import { useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Input,
   Popover,
   PopoverContent,
@@ -97,15 +97,15 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[250px] p-0" align="start">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ className="text-xs" placeholder="Search chats..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No chats found.</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandInput className="text-xs" placeholder="Search chats..." />
+          <CommandList>
+            <CommandEmpty>No chats found.</CommandEmpty>
+            <CommandGroup>
               <ScrollArea className={chats.length > 4 ? 'h-40' : ''}>
                 {/* @ts-ignore */}
                 {chats.map(([id, chat]) => (
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     key={id}
                     value={id}
                     onSelect={() => handleSelectChat(id)}
@@ -185,13 +185,13 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
                         )}
                       </div>
                     )}
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                 ))}
               </ScrollArea>
-            </CommandGroup_Shadcn_>
-            <CommandSeparator_Shadcn_ />
-            <CommandGroup_Shadcn_>
-              <CommandItem_Shadcn_
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem
                 className="cursor-pointer w-full gap-x-2"
                 onSelect={() => {
                   snap.newChat()
@@ -205,10 +205,10 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
               >
                 <Plus size={14} strokeWidth={1.5} />
                 <span>Start a new chat</span>
-              </CommandItem_Shadcn_>
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx b/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx
index f9c4740b9a0..8e7817dad49 100644
--- a/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx
@@ -4,10 +4,10 @@ import { useState } from 'react'
 import {
   Badge,
   Button,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -64,11 +64,11 @@ export const ModelSelector = ({ selectedModel, onSelectModel }: ModelSelectorPro
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0 w-44" align="start" side="top">
-        <Command_Shadcn_>
-          <CommandList_Shadcn_>
-            <CommandGroup_Shadcn_>
+        <Command>
+          <CommandList>
+            <CommandGroup>
               {ASSISTANT_MODELS.map((m) => (
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={m.id}
                   value={m.id}
                   disabled={isLoadingEntitlements && isAdvanceOnlyModelId(m.id)}
@@ -94,11 +94,11 @@ export const ModelSelector = ({ selectedModel, onSelectModel }: ModelSelectorPro
                   ) : (
                     selectedModel === m.id && <Check className="h-3.5 w-3.5" />
                   )}
-                </CommandItem_Shadcn_>
+                </CommandItem>
               ))}
-            </CommandGroup_Shadcn_>
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+            </CommandGroup>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
index c61a2b80365..dc92700e354 100644
--- a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
@@ -2,12 +2,12 @@ import { GripVertical, Settings2 } from 'lucide-react'
 import { useId, useMemo, useState } from 'react'
 import {
   Checkbox,
-  Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
-  CommandGroup_Shadcn_ as CommandGroup,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
diff --git a/apps/studio/components/ui/DatabaseSelector.tsx b/apps/studio/components/ui/DatabaseSelector.tsx
index 59796bb70e7..71ed1313537 100644
--- a/apps/studio/components/ui/DatabaseSelector.tsx
+++ b/apps/studio/components/ui/DatabaseSelector.tsx
@@ -9,10 +9,10 @@ import {
   Button,
   ButtonProps,
   cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -123,12 +123,12 @@ export const DatabaseSelector = ({
         </div>
       </PopoverTrigger>
       <PopoverContent className="p-0 w-64" side="bottom" align={align}>
-        <Command_Shadcn_>
-          <CommandList_Shadcn_>
+        <Command>
+          <CommandList>
             {additionalOptions.length > 0 && (
-              <CommandGroup_Shadcn_ className="border-b">
+              <CommandGroup className="border-b">
                 {additionalOptions.map((option) => (
-                  <CommandItem_Shadcn_
+                  <CommandItem
                     key={option.id}
                     value={option.id}
                     className="cursor-pointer w-full"
@@ -147,11 +147,11 @@ export const DatabaseSelector = ({
                       <p>{option.name}</p>
                       {option.id === selectedDatabaseId && <Check size={14} />}
                     </div>
-                  </CommandItem_Shadcn_>
+                  </CommandItem>
                 ))}
-              </CommandGroup_Shadcn_>
+              </CommandGroup>
             )}
-            <CommandGroup_Shadcn_>
+            <CommandGroup>
               <ScrollArea className={(databases || []).length > 7 ? 'h-[210px]' : ''}>
                 {sortedDatabases?.map((database) => {
                   const region = formatDatabaseRegion(database.region)
@@ -185,7 +185,7 @@ export const DatabaseSelector = ({
                   }
 
                   return (
-                    <CommandItem_Shadcn_
+                    <CommandItem
                       key={database.identifier}
                       value={database.identifier}
                       className="cursor-pointer w-full"
@@ -208,14 +208,14 @@ export const DatabaseSelector = ({
                         </p>
                         {database.identifier === selectedDatabaseId && <Check size={16} />}
                       </div>
-                    </CommandItem_Shadcn_>
+                    </CommandItem>
                   )
                 })}
               </ScrollArea>
-            </CommandGroup_Shadcn_>
+            </CommandGroup>
             {IS_PLATFORM && infrastructureReadReplicas && (
-              <CommandGroup_Shadcn_ className="border-t">
-                <CommandItem_Shadcn_
+              <CommandGroup className="border-t">
+                <CommandItem
                   className="cursor-pointer w-full"
                   onSelect={() => {
                     setOpen(false)
@@ -235,11 +235,11 @@ export const DatabaseSelector = ({
                     <Plus size={14} strokeWidth={1.5} />
                     <p>Create a new read replica</p>
                   </Link>
-                </CommandItem_Shadcn_>
-              </CommandGroup_Shadcn_>
+                </CommandItem>
+              </CommandGroup>
             )}
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index afbecfa6363..87a4f2a8b13 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -19,12 +19,12 @@ import { useEffect, useRef, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -330,23 +330,23 @@ export const EditorPanel = () => {
               ></ButtonTooltip>
             </PopoverTrigger>
             <PopoverContent align="end" className="w-[300px] p-0">
-              <Command_Shadcn_ shouldFilter={false}>
-                <CommandInput_Shadcn_
+              <Command shouldFilter={false}>
+                <CommandInput
                   placeholder="Search snippets..."
                   value={snippetSearch}
                   onValueChange={setSnippetSearch}
                 />
-                <CommandList_Shadcn_>
+                <CommandList>
                   {isLoadingSnippets ? (
                     <div className="py-6 text-center text-sm text-foreground-light">
                       Loading snippets...
                     </div>
                   ) : (
-                    <CommandEmpty_Shadcn_>No snippets found.</CommandEmpty_Shadcn_>
+                    <CommandEmpty>No snippets found.</CommandEmpty>
                   )}
-                  <CommandGroup_Shadcn_>
+                  <CommandGroup>
                     {(snippetsData?.content ?? []).map((snippet) => (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={snippet.id}
                         value={snippet.id}
                         className="cursor-pointer"
@@ -357,11 +357,11 @@ export const EditorPanel = () => {
                         }}
                       >
                         {snippet.name}
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     ))}
-                  </CommandGroup_Shadcn_>
-                </CommandList_Shadcn_>
-              </Command_Shadcn_>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
             </PopoverContent>
           </Popover>
           {templates.length > 0 && (
@@ -379,15 +379,15 @@ export const EditorPanel = () => {
                 </Button>
               </PopoverTrigger>
               <PopoverContent align="end" className="w-[300px] p-0">
-                <Command_Shadcn_>
-                  <CommandInput_Shadcn_ placeholder="Search templates..." />
-                  <CommandList_Shadcn_>
-                    <CommandEmpty_Shadcn_>No templates found.</CommandEmpty_Shadcn_>
-                    <CommandGroup_Shadcn_>
+                <Command>
+                  <CommandInput placeholder="Search templates..." />
+                  <CommandList>
+                    <CommandEmpty>No templates found.</CommandEmpty>
+                    <CommandGroup>
                       {templates.map((template) => (
                         <HoverCard key={template.name}>
                           <HoverCardTrigger asChild>
-                            <CommandItem_Shadcn_
+                            <CommandItem
                               value={template.name}
                               onSelect={() => onSelectTemplate(template.content)}
                               className="cursor-pointer"
@@ -406,7 +406,7 @@ export const EditorPanel = () => {
                                   </p>
                                 </div>
                               </div>
-                            </CommandItem_Shadcn_>
+                            </CommandItem>
                           </HoverCardTrigger>
                           <HoverCardContent side="left" className="w-[500px] p-0">
                             <CodeBlock
@@ -418,9 +418,9 @@ export const EditorPanel = () => {
                           </HoverCardContent>
                         </HoverCard>
                       ))}
-                    </CommandGroup_Shadcn_>
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
           )}
diff --git a/apps/studio/components/ui/FunctionSelector.tsx b/apps/studio/components/ui/FunctionSelector.tsx
index bb99e250b85..19c206746e4 100644
--- a/apps/studio/components/ui/FunctionSelector.tsx
+++ b/apps/studio/components/ui/FunctionSelector.tsx
@@ -9,13 +9,13 @@ import {
   AlertDescription,
   AlertTitle,
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -123,25 +123,25 @@ const FunctionSelector = ({
             </Button>
           </PopoverTrigger>
           <PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
-            <Command_Shadcn_>
-              <CommandInput_Shadcn_ placeholder="Search functions..." />
-              <CommandList_Shadcn_
+            <Command>
+              <CommandInput placeholder="Search functions..." />
+              <CommandList
                 onWheel={stopScrollPropagation ? (event) => event.stopPropagation() : undefined}
               >
-                <CommandEmpty_Shadcn_>No functions found</CommandEmpty_Shadcn_>
-                <CommandGroup_Shadcn_>
+                <CommandEmpty>No functions found</CommandEmpty>
+                <CommandGroup>
                   <ScrollArea className={(functions || []).length > 7 ? 'h-[210px]' : ''}>
                     {!functions.length && (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key="no-function-found"
                         disabled={true}
                         className="flex items-center justify-between space-x-2 w-full"
                       >
                         {noResultsLabel}
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     )}
                     {functions.map((func) => (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={func.id}
                         value={func.name.replaceAll('"', '')}
                         className="cursor-pointer flex items-center justify-between space-x-2 w-full"
@@ -158,13 +158,13 @@ const FunctionSelector = ({
                         {value === func.name && (
                           <Check className="text-brand" size={14} strokeWidth={2} />
                         )}
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     ))}
                   </ScrollArea>
-                </CommandGroup_Shadcn_>
-                <CommandSeparator_Shadcn_ />
-                <CommandGroup_Shadcn_>
-                  <CommandItem_Shadcn_
+                </CommandGroup>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
                     className="cursor-pointer w-full"
                     onSelect={() => {
                       setOpen(false)
@@ -182,10 +182,10 @@ const FunctionSelector = ({
                       <Plus size={14} strokeWidth={1.5} />
                       <p>New function</p>
                     </Link>
-                  </CommandItem_Shadcn_>
-                </CommandGroup_Shadcn_>
-              </CommandList_Shadcn_>
-            </Command_Shadcn_>
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
           </PopoverContent>
         </Popover>
       )}
diff --git a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
index d03bb0816cf..8f530ad8036 100644
--- a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -5,12 +5,12 @@ import { logConstants } from 'shared-data'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   copyToClipboard,
   Popover,
   PopoverContent,
@@ -115,13 +115,13 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
                 </Button>
               </PopoverTrigger>
               <PopoverContent className="p-0" sameWidthAsTrigger>
-                <Command_Shadcn_>
-                  <CommandInput_Shadcn_ placeholder="Search source..." />
-                  <CommandList_Shadcn_>
-                    <CommandEmpty_Shadcn_>No source found.</CommandEmpty_Shadcn_>
-                    <CommandGroup_Shadcn_>
+                <Command>
+                  <CommandInput placeholder="Search source..." />
+                  <CommandList>
+                    <CommandEmpty>No source found.</CommandEmpty>
+                    <CommandGroup>
                       {logConstants.schemas.map((schema) => (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={schema.reference}
                           value={schema.reference}
                           onSelect={() => {
@@ -136,11 +136,11 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
                             )}
                           />
                           {schema.name}
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       ))}
-                    </CommandGroup_Shadcn_>
-                  </CommandList_Shadcn_>
-                </Command_Shadcn_>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
               </PopoverContent>
             </Popover>
             <Table
diff --git a/apps/studio/components/ui/OrganizationProjectSelector.tsx b/apps/studio/components/ui/OrganizationProjectSelector.tsx
index 62e5fc72fa0..38b9e9d6413 100644
--- a/apps/studio/components/ui/OrganizationProjectSelector.tsx
+++ b/apps/studio/components/ui/OrganizationProjectSelector.tsx
@@ -5,10 +5,10 @@ import { ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -217,7 +217,7 @@ export const OrganizationProjectSelector = ({
   }
 
   const commandContent = (
-    <Command_Shadcn_
+    <Command
       shouldFilter={false}
       className={cn(className, embedded && 'flex flex-col flex-1 min-h-0 overflow-hidden')}
     >
@@ -226,7 +226,7 @@ export const OrganizationProjectSelector = ({
           {renderActions(setOpen, { embedded: true })}
         </div>
       )}
-      <CommandInput_Shadcn_
+      <CommandInput
         showResetIcon
         value={search}
         onValueChange={setSearch}
@@ -235,24 +235,24 @@ export const OrganizationProjectSelector = ({
         wrapperClassName={embedded ? 'shrink-0 border-b' : undefined}
         className="text-base sm:text-sm"
       />
-      <CommandList_Shadcn_
+      <CommandList
         className={
           embedded
             ? 'flex-1 min-h-0 overflow-y-auto overflow-x-hidden max-h-none!'
             : 'max-h-none md:max-h-[300px] overflow-y-auto overflow-x-hidden'
         }
       >
-        <CommandGroup_Shadcn_ className={embedded ? 'flex-1 min-h-0 overflow-hidden' : ''}>
+        <CommandGroup className={embedded ? 'flex-1 min-h-0 overflow-hidden' : ''}>
           {renderListContent()}
-        </CommandGroup_Shadcn_>
+        </CommandGroup>
         {!!renderActions && !embedded && (
           <>
             <div className="h-px bg-border-overlay -mx-1 shrink-0" />
             {renderActions(setOpen)}
           </>
         )}
-      </CommandList_Shadcn_>
-    </Command_Shadcn_>
+      </CommandList>
+    </Command>
   )
 
   if (embedded) {
diff --git a/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx b/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx
index 1f7b39463ae..d9076d79936 100644
--- a/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx
+++ b/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx
@@ -1,6 +1,6 @@
 import { Check } from 'lucide-react'
 import { ReactNode } from 'react'
-import { cn, CommandItem_Shadcn_ } from 'ui'
+import { cn, CommandItem } from 'ui'
 
 import type { OrgProject } from '@/data/projects/org-projects-infinite-query'
 
@@ -31,7 +31,7 @@ export function ProjectCommandItem({
   const disabled = isOptionDisabled?.(project) ?? false
 
   return (
-    <CommandItem_Shadcn_
+    <CommandItem
       key={project.ref}
       value={`${project.name.replaceAll('"', '')}-${project.ref}`}
       className="cursor-pointer w-full"
@@ -53,6 +53,6 @@ export function ProjectCommandItem({
           {checkPosition === 'right' && project.ref === selectedRef && <Check size={16} />}
         </div>
       )}
-    </CommandItem_Shadcn_>
+    </CommandItem>
   )
 }
diff --git a/apps/studio/components/ui/SchemaComboBox.tsx b/apps/studio/components/ui/SchemaComboBox.tsx
index 673f41754ac..ce0f5f0fc9f 100644
--- a/apps/studio/components/ui/SchemaComboBox.tsx
+++ b/apps/studio/components/ui/SchemaComboBox.tsx
@@ -5,12 +5,12 @@ import {
   AlertDescription,
   AlertTitle,
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -108,14 +108,14 @@ export const SchemaComboBox = ({
             </Button>
           </PopoverTrigger>
           <PopoverContent className="p-0 w-56" side="bottom" align="start">
-            <Command_Shadcn_>
-              <CommandInput_Shadcn_ placeholder="Find schema..." />
-              <CommandList_Shadcn_>
-                <CommandEmpty_Shadcn_>No schemas found</CommandEmpty_Shadcn_>
-                <CommandGroup_Shadcn_>
+            <Command>
+              <CommandInput placeholder="Find schema..." />
+              <CommandList>
+                <CommandEmpty>No schemas found</CommandEmpty>
+                <CommandGroup>
                   <ScrollArea className={(schemas || []).length > 7 ? 'h-[210px]' : ''}>
                     {schemas?.map((schema) => (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={schema.id}
                         className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                         onSelect={() => toggleSchema(schema.name)}
@@ -125,12 +125,12 @@ export const SchemaComboBox = ({
                         {selectedSchemas.includes(schema.name) && (
                           <Check className="text-brand" strokeWidth={2} size={16} />
                         )}
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     ))}
                   </ScrollArea>
-                </CommandGroup_Shadcn_>
-              </CommandList_Shadcn_>
-            </Command_Shadcn_>
+                </CommandGroup>
+              </CommandList>
+            </Command>
           </PopoverContent>
         </Popover>
       )}
diff --git a/apps/studio/components/ui/SchemaSelector.tsx b/apps/studio/components/ui/SchemaSelector.tsx
index 8426adf79e1..bc7832fe38c 100644
--- a/apps/studio/components/ui/SchemaSelector.tsx
+++ b/apps/studio/components/ui/SchemaSelector.tsx
@@ -6,13 +6,13 @@ import {
   AlertDescription,
   AlertTitle,
   Button,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -149,16 +149,16 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
               align={align}
               sameWidthAsTrigger
             >
-              <Command_Shadcn_>
-                <CommandInput_Shadcn_ className="text-xs" placeholder="Find schema..." />
-                <CommandList_Shadcn_
+              <Command>
+                <CommandInput className="text-xs" placeholder="Find schema..." />
+                <CommandList
                   onWheel={stopScrollPropagation ? (event) => event.stopPropagation() : undefined}
                 >
-                  <CommandEmpty_Shadcn_>No schemas found</CommandEmpty_Shadcn_>
-                  <CommandGroup_Shadcn_>
+                  <CommandEmpty>No schemas found</CommandEmpty>
+                  <CommandGroup>
                     <ScrollArea className={(schemas || []).length > 7 ? 'h-[210px]' : ''}>
                       {supportSelectAll && (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key="select-all"
                           className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                           onSelect={() => {
@@ -174,10 +174,10 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
                           {selectedSchemaName === '*' && (
                             <Check className="text-brand" strokeWidth={2} size={16} />
                           )}
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       )}
                       {schemas.map((schema) => (
-                        <CommandItem_Shadcn_
+                        <CommandItem
                           key={schema.id}
                           className="cursor-pointer flex items-center justify-between space-x-2 w-full"
                           onSelect={() => {
@@ -193,15 +193,15 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
                           {selectedSchemaName === schema.name && (
                             <Check className="text-brand" strokeWidth={2} size={16} />
                           )}
-                        </CommandItem_Shadcn_>
+                        </CommandItem>
                       ))}
                     </ScrollArea>
-                  </CommandGroup_Shadcn_>
+                  </CommandGroup>
                   {onSelectCreateSchema !== undefined && canCreateSchemas && (
                     <>
-                      <CommandSeparator_Shadcn_ />
-                      <CommandGroup_Shadcn_>
-                        <CommandItem_Shadcn_
+                      <CommandSeparator />
+                      <CommandGroup>
+                        <CommandItem
                           className="cursor-pointer flex items-center gap-x-2 w-full"
                           onSelect={() => {
                             onSelectCreateSchema()
@@ -214,12 +214,12 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
                         >
                           <Plus size={12} />
                           Create a new schema
-                        </CommandItem_Shadcn_>
-                      </CommandGroup_Shadcn_>
+                        </CommandItem>
+                      </CommandGroup>
                     </>
                   )}
-                </CommandList_Shadcn_>
-              </Command_Shadcn_>
+                </CommandList>
+              </Command>
             </PopoverContent>
           </Popover>
         )}
diff --git a/apps/studio/pages/project/[ref]/functions/new.tsx b/apps/studio/pages/project/[ref]/functions/new.tsx
index 61bb1bd2011..6cb09a857df 100644
--- a/apps/studio/pages/project/[ref]/functions/new.tsx
+++ b/apps/studio/pages/project/[ref]/functions/new.tsx
@@ -10,12 +10,12 @@ import {
   AiIconAnimation,
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Form,
   FormControl,
   FormField,
@@ -313,13 +313,13 @@ const NewFunctionPage = () => {
               </Button>
             </PopoverTrigger>
             <PopoverContent id={templatesListboxId} className="w-[300px] p-0" align="end">
-              <Command_Shadcn_>
-                <CommandInput_Shadcn_ placeholder="Search templates..." />
-                <CommandList_Shadcn_>
-                  <CommandEmpty_Shadcn_>No templates found.</CommandEmpty_Shadcn_>
-                  <CommandGroup_Shadcn_>
+              <Command>
+                <CommandInput placeholder="Search templates..." />
+                <CommandList>
+                  <CommandEmpty>No templates found.</CommandEmpty>
+                  <CommandGroup>
                     {templates.map((template) => (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={template.value}
                         value={template.value}
                         onSelect={onSelectTemplate}
@@ -343,11 +343,11 @@ const NewFunctionPage = () => {
                             {template.description}
                           </span>
                         </div>
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     ))}
-                  </CommandGroup_Shadcn_>
-                </CommandList_Shadcn_>
-              </Command_Shadcn_>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
             </PopoverContent>
           </Popover>
           <Button
diff --git a/apps/ui-library/components/command-menu.tsx b/apps/ui-library/components/command-menu.tsx
index 9ae3afb9824..efe2ee27045 100644
--- a/apps/ui-library/components/command-menu.tsx
+++ b/apps/ui-library/components/command-menu.tsx
@@ -7,12 +7,12 @@ import * as React from 'react'
 import {
   Button,
   CommandDialog,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   DialogProps,
 } from 'ui'
 
@@ -69,12 +69,12 @@ export function CommandMenu({ ...props }: DialogProps) {
         </kbd>
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput_Shadcn_ placeholder="Type a command or search..." />
-        <CommandList_Shadcn_>
-          <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_ key="pages" heading="Pages">
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup key="pages" heading="Pages">
             {COMMAND_ITEMS.map((navItem) => (
-              <CommandItem_Shadcn_
+              <CommandItem
                 key={navItem.href}
                 value={navItem.label}
                 onSelect={() => runCommand(() => router.push(navItem.href as string))}
@@ -83,29 +83,29 @@ export function CommandMenu({ ...props }: DialogProps) {
                   <CircleIcon className="h-3 w-3" strokeWidth={1} />
                 </div>
                 {navItem.label}
-              </CommandItem_Shadcn_>
+              </CommandItem>
             ))}
-          </CommandGroup_Shadcn_>
-          <CommandSeparator_Shadcn_ />
-          <CommandGroup_Shadcn_ heading="Theme">
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('light'))}>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Theme">
+            <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
               <SunIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Light
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('dark'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Dark
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
               <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               Classic dark
-            </CommandItem_Shadcn_>
-            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
+            </CommandItem>
+            <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
               <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
               System
-            </CommandItem_Shadcn_>
-          </CommandGroup_Shadcn_>
-        </CommandList_Shadcn_>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
       </CommandDialog>
     </>
   )
diff --git a/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx b/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx
index 208ab15dc9c..cb5009d850e 100644
--- a/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx
+++ b/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx
@@ -6,17 +6,18 @@ import { useEffect, useRef, useState } from 'react'
 import {
   Button_Shadcn_ as Button,
   cn,
-  Command_Shadcn_ as Command,
-  CommandGroup_Shadcn_ as CommandGroup,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
-  Popover as Popover,
-  PopoverContent as PopoverContent,
-  PopoverTrigger as PopoverTrigger,
+  Command,
+  CommandGroup as CommandGroup,
+  CommandInput,
+  CommandItem as CommandItem,
+  CommandList as CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   ScrollArea,
 } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
+
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 
 export interface ComboBoxOption {
diff --git a/apps/www/components/Pricing/UpgradePlan.tsx b/apps/www/components/Pricing/UpgradePlan.tsx
index d0371567367..2c7b0d6297d 100644
--- a/apps/www/components/Pricing/UpgradePlan.tsx
+++ b/apps/www/components/Pricing/UpgradePlan.tsx
@@ -9,13 +9,13 @@ import {
   Button,
   ButtonProps,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  CommandSeparator_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   Dialog,
   DialogClose,
   DialogContent,
@@ -81,13 +81,13 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
               </Button>
             </PopoverTrigger>
             <PopoverContent className="w-[300px] p-0">
-              <Command_Shadcn_>
-                <CommandInput_Shadcn_ placeholder="Select organization..." />
-                <CommandList_Shadcn_>
-                  <CommandEmpty_Shadcn_>No organizations found.</CommandEmpty_Shadcn_>
-                  <CommandGroup_Shadcn_>
+              <Command>
+                <CommandInput placeholder="Select organization..." />
+                <CommandList>
+                  <CommandEmpty>No organizations found.</CommandEmpty>
+                  <CommandGroup>
                     {organizations.map((organization) => (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         key={organization.slug}
                         value={organization.slug}
                         onSelect={(currentValue) => {
@@ -103,12 +103,12 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
                           )}
                         />
                         {organization.name}
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     ))}
-                  </CommandGroup_Shadcn_>
-                  <CommandSeparator_Shadcn_ />
-                  <CommandGroup_Shadcn_>
-                    <CommandItem_Shadcn_
+                  </CommandGroup>
+                  <CommandSeparator />
+                  <CommandGroup>
+                    <CommandItem
                       value="new-organization"
                       onSelect={(currentValue) => {
                         setValue(currentValue === value ? '' : currentValue)
@@ -123,10 +123,10 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
                         )}
                       />
                       <Plus className="h-4 w-4 mr-2" /> Create a new organization
-                    </CommandItem_Shadcn_>
-                  </CommandGroup_Shadcn_>
-                </CommandList_Shadcn_>
-              </Command_Shadcn_>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
             </PopoverContent>
           </Popover>
         </DialogSection>
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
index bc0ab4c55fc..bb2cbbee04c 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
@@ -10,7 +10,7 @@ import { ErrorBoundary } from 'react-error-boundary'
 import {
   Button,
   cn,
-  Command_Shadcn_,
+  Command,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -50,11 +50,11 @@ function Breadcrumb({ className }: { className?: string }) {
 }
 
 const CommandWrapper = forwardRef<
-  React.ElementRef<typeof Command_Shadcn_>,
-  React.ComponentPropsWithoutRef<typeof Command_Shadcn_>
+  React.ElementRef<typeof Command>,
+  React.ComponentPropsWithoutRef<typeof Command>
 >(({ children, className, ...props }, ref) => {
   return (
-    <Command_Shadcn_
+    <Command
       ref={ref}
       className={cn(
         'h-full w-full flex flex-col overflow-hidden',
@@ -71,10 +71,10 @@ const CommandWrapper = forwardRef<
       {...props}
     >
       {children}
-    </Command_Shadcn_>
+    </Command>
   )
 })
-CommandWrapper.displayName = Command_Shadcn_.displayName
+CommandWrapper.displayName = Command.displayName
 
 function CommandError({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
   return (
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
index 8f3c33c1a66..79036c8894d 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
@@ -3,7 +3,7 @@
 import { useBreakpoint, useDebounce } from 'common'
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import type React from 'react'
-import { cn, CommandInput_Shadcn_ } from 'ui'
+import { cn, CommandInput } from 'ui'
 
 import { useQuery, useSetQuery } from './hooks/queryHooks'
 import { useCommandMenuTelemetryContext } from './hooks/useCommandMenuTelemetryContext'
@@ -42,8 +42,8 @@ function useFocusInputOnWiderScreens(ref: React.ForwardedRef<HTMLInputElement>)
 }
 
 const CommandMenuInput = forwardRef<
-  React.ElementRef<typeof CommandInput_Shadcn_>,
-  React.ComponentPropsWithoutRef<typeof CommandInput_Shadcn_>
+  React.ElementRef<typeof CommandInput>,
+  React.ComponentPropsWithoutRef<typeof CommandInput>
 >(({ className, ...props }, ref) => {
   const inputRef = useFocusInputOnWiderScreens(ref)
 
@@ -113,7 +113,7 @@ const CommandMenuInput = forwardRef<
 
   return (
     <div className="relative w-full" cmdk-input-wrapper="">
-      <CommandInput_Shadcn_
+      <CommandInput
         // Focus needs to be manually handled to check breakpoint first, due to
         // delays from useEffect
         autoFocus={false}
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenuList.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenuList.tsx
index e5f239aab3f..ad7265f6a31 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenuList.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenuList.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { forwardRef, useRef } from 'react'
-import { cn, CommandList_Shadcn_ } from 'ui'
+import { cn, CommandList } from 'ui'
 
 import { CommandMenuEmpty } from '../internal/CommandMenuEmpty'
 import { CommandMenuGroup } from '../internal/CommandMenuGroup'
@@ -11,8 +11,8 @@ import { useQuery } from './hooks/queryHooks'
 import { TextHighlighter } from './TextHighlighter'
 
 const CommandMenuList = forwardRef<
-  React.ElementRef<typeof CommandList_Shadcn_>,
-  React.ComponentPropsWithoutRef<typeof CommandList_Shadcn_>
+  React.ElementRef<typeof CommandList>,
+  React.ComponentPropsWithoutRef<typeof CommandList>
 >(({ className, ...props }, ref) => {
   const commandSections = useCommands()
   const query = useQuery()
@@ -26,7 +26,7 @@ const CommandMenuList = forwardRef<
   }
 
   return (
-    <CommandList_Shadcn_
+    <CommandList
       ref={setRef}
       className={cn('max-h-[initial] overflow-y-auto overflow-x-hidden bg-transparent', className)}
       {...props}
@@ -47,7 +47,7 @@ const CommandMenuList = forwardRef<
           </CommandMenuGroup>
         )
       })}
-    </CommandList_Shadcn_>
+    </CommandList>
   )
 })
 CommandMenuList.displayName = 'CommandMenuList'
diff --git a/packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx
index c100b155ef2..4d4acf40d49 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx
@@ -1,14 +1,14 @@
 'use client'
 
 import { forwardRef } from 'react'
-import { cn, CommandGroup_Shadcn_ } from 'ui'
+import { cn, CommandGroup } from 'ui'
 
 const CommandMenuGroup = forwardRef<
-  React.ElementRef<typeof CommandGroup_Shadcn_>,
-  React.ComponentPropsWithoutRef<typeof CommandGroup_Shadcn_>
+  React.ElementRef<typeof CommandGroup>,
+  React.ComponentPropsWithoutRef<typeof CommandGroup>
 >(({ className, ...props }, ref) => {
   return (
-    <CommandGroup_Shadcn_
+    <CommandGroup
       ref={ref}
       className={cn(
         'overflow-hidden py-3 px-2 text-foreground-lighter/60 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-lighter/60',
diff --git a/packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx
index a6cb83cdd72..1f44b2533ca 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { forwardRef, type PropsWithChildren } from 'react'
-import { cn, CommandItem_Shadcn_ } from 'ui'
+import { cn, CommandItem } from 'ui'
 
 import { useQuery } from '../api/hooks/queryHooks'
 import { useCommandMenuTelemetryContext } from '../api/hooks/useCommandMenuTelemetryContext'
@@ -45,12 +45,12 @@ data-[disabled=true]:opacity-50
 `
   )
 
-interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof CommandItem_Shadcn_> {
+interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof CommandItem> {
   command: ICommand
 }
 
 const CommandMenuItem = forwardRef<
-  React.ElementRef<typeof CommandItem_Shadcn_>,
+  React.ElementRef<typeof CommandItem>,
   PropsWithChildren<CommandItemProps>
 >(({ children, className, command: _command, ...props }, ref) => {
   const router = useCrossCompatRouter()
@@ -95,7 +95,7 @@ const CommandMenuItem = forwardRef<
   }
 
   return (
-    <CommandItem_Shadcn_
+    <CommandItem
       ref={ref}
       onSelect={handleCommandSelect}
       value={command.value ?? command.name}
@@ -114,7 +114,7 @@ const CommandMenuItem = forwardRef<
         </div>
         {command.badge?.()}
       </div>
-    </CommandItem_Shadcn_>
+    </CommandItem>
   )
 })
 CommandMenuItem.displayName = 'CommandMenuItem'
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index 0d13efe3da3..f77a11be38c 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -5,14 +5,7 @@ import { User } from 'lucide-react'
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import {
-  AiIconAnimation,
-  Button,
-  cn,
-  CommandGroup_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-} from 'ui'
+import { AiIconAnimation, Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
 import { markdownComponents } from 'ui-patterns/Markdown'
 import { StatusIcon } from 'ui/src/components/StatusIcon'
 
@@ -195,7 +188,7 @@ function AiMessages({ messages }: { messages: Array<Message> }) {
       error. This display doesn't actually need the Command Menu, but it's
       needed for the empty state to work with the input, so this is a somewhat
       hacktastic way of making it not error. */}
-      <CommandList_Shadcn_ />
+      <CommandList />
       <div
         className={cn(
           'grow min-h-0 overflow-auto p-4',
@@ -289,8 +282,8 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
   const query = useQuery()
 
   return (
-    <CommandList_Shadcn_ className="max-h-[unset]">
-      <CommandGroup_Shadcn_
+    <CommandList className="max-h-[unset]">
+      <CommandGroup
         heading="Examples"
         className={cn(
           'text-border-strong',
@@ -301,7 +294,7 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
         {questions.map((question) => {
           const key = question.replace(/\s+/g, '_')
           return (
-            <CommandItem_Shadcn_
+            <CommandItem
               className={generateCommandClassNames(false)}
               onSelect={() => {
                 if (!query) {
@@ -312,11 +305,11 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
             >
               <AiIconAnimation />
               {question}
-            </CommandItem_Shadcn_>
+            </CommandItem>
           )
         })}
-      </CommandGroup_Shadcn_>
-    </CommandList_Shadcn_>
+      </CommandGroup>
+    </CommandList>
   )
 }
 
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
index 00bf0ab4d74..ba7454ba5c4 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
@@ -8,7 +8,7 @@ import {
 } from 'common'
 import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
 import { useCallback, useEffect, useRef } from 'react'
-import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, CommandList_Shadcn_ } from 'ui'
+import { Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
 import { StatusIcon } from 'ui/src/components/StatusIcon'
 
 import {
@@ -193,18 +193,18 @@ const DocsSearchPage = () => {
         <Breadcrumb />
         <CommandMenuInput placeholder="Search..." ref={inputRef} />
       </CommandHeader>
-      <CommandList_Shadcn_ className="max-h-[initial]">
+      <CommandList className="max-h-[initial]">
         {hasResults &&
           ('results' in state ? state.results : state.staleResults).map((page, i) => {
             return (
-              <CommandGroup_Shadcn_
+              <CommandGroup
                 heading=""
                 key={`${page.path}-group`}
                 value={`${escapeAttributeSelector(page.title)}-group-index-${i}`}
                 forceMount={true}
                 className="overflow-hidden py-3 px-2 text-border-strong **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted"
               >
-                <CommandItem_Shadcn_
+                <CommandItem
                   key={`${page.path}-item`}
                   value={`${escapeAttributeSelector(page.title)}-item-index-${i}`}
                   onSelect={() => {
@@ -227,11 +227,11 @@ const DocsSearchPage = () => {
                   </div>
 
                   <ChevronArrow />
-                </CommandItem_Shadcn_>
+                </CommandItem>
                 {page.sections.length > 0 && (
                   <div className="border-l border-muted ml-3 pt-3">
                     {page.sections.map((section, i) => (
-                      <CommandItem_Shadcn_
+                      <CommandItem
                         className={cn(
                           generateCommandClassNames(true),
                           'border border-overlay/90',
@@ -262,19 +262,19 @@ const DocsSearchPage = () => {
                           </div>
                         </div>
                         <ChevronArrow />
-                      </CommandItem_Shadcn_>
+                      </CommandItem>
                     ))}
                   </div>
                 )}
-              </CommandGroup_Shadcn_>
+              </CommandGroup>
             )
           })}
         {state.status === 'initial' && (
-          <CommandGroup_Shadcn_ className="overflow-hidden py-3 px-2 text-border-strong **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted">
+          <CommandGroup className="overflow-hidden py-3 px-2 text-border-strong **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted">
             {questions.map((question) => {
               const key = question.replace(/\s+/g, '_')
               return (
-                <CommandItem_Shadcn_
+                <CommandItem
                   className={generateCommandClassNames(false)}
                   disabled={hasResults}
                   onSelect={() => {
@@ -287,10 +287,10 @@ const DocsSearchPage = () => {
                 >
                   <Search />
                   {question}
-                </CommandItem_Shadcn_>
+                </CommandItem>
               )
             })}
-          </CommandGroup_Shadcn_>
+          </CommandGroup>
         )}
         {state.status === 'loading' && state.staleResults.length === 0 && (
           <div className="flex items-center gap-3 my-4 justify-center">
@@ -319,7 +319,7 @@ const DocsSearchPage = () => {
             </Button>
           </div>
         )}
-      </CommandList_Shadcn_>
+      </CommandList>
     </CommandWrapper>
   )
 }
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
index 288d14726f1..14fde11eb20 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
@@ -5,12 +5,12 @@ import { useState } from 'react'
 import {
   Button,
   cn,
-  Command_Shadcn_,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -50,7 +50,7 @@ export const ClientSelectDropdown = ({
 
   function renderClient(client: McpClient) {
     return (
-      <CommandItem_Shadcn_
+      <CommandItem
         key={client.key}
         value={client.key}
         onSelect={() => onSelectClient(client.key)}
@@ -71,7 +71,7 @@ export const ClientSelectDropdown = ({
           size={15}
           className={cn('ml-auto', client.key === selectedClient.key ? 'opacity-100' : 'opacity-0')}
         />
-      </CommandItem_Shadcn_>
+      </CommandItem>
     )
   }
 
@@ -109,21 +109,21 @@ export const ClientSelectDropdown = ({
         </PopoverTrigger>
       </div>
       <PopoverContent className="mt-0 p-0 max-w-48" side="bottom" align="start">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Search..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+        <Command>
+          <CommandInput placeholder="Search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
             {groups ? (
               groups.map((group) => (
-                <CommandGroup_Shadcn_ key={group.heading} heading={group.heading}>
+                <CommandGroup key={group.heading} heading={group.heading}>
                   {group.clients.map(renderClient)}
-                </CommandGroup_Shadcn_>
+                </CommandGroup>
               ))
             ) : (
-              <CommandGroup_Shadcn_>{clients.map(renderClient)}</CommandGroup_Shadcn_>
+              <CommandGroup>{clients.map(renderClient)}</CommandGroup>
             )}
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
+          </CommandList>
+        </Command>
       </PopoverContent>
     </Popover>
   )
diff --git a/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx b/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx
index d683197688b..3d29ab996f1 100644
--- a/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx
+++ b/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { useWindowSize } from 'react-use'
-import { CommandEmpty_Shadcn_, Sheet, SheetContent } from 'ui'
+import { CommandEmpty, Sheet, SheetContent } from 'ui'
 import { cn } from 'ui/src/lib/utils'
 
 const MobileSheetNav: React.FC<{
@@ -53,7 +53,7 @@ const MobileSheetNav: React.FC<{
           className
         )}
       >
-        <ErrorBoundary FallbackComponent={() => <CommandEmpty_Shadcn_ />}>{children}</ErrorBoundary>
+        <ErrorBoundary FallbackComponent={() => <CommandEmpty />}>{children}</ErrorBoundary>
       </SheetContent>
     </Sheet>
   )
diff --git a/packages/ui-patterns/src/multi-select/multi-select.tsx b/packages/ui-patterns/src/multi-select/multi-select.tsx
index 4311a2aee1f..837e273e2b9 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.tsx
@@ -8,11 +8,11 @@ import React, { isValidElement, ReactElement, useEffect } from 'react'
 import {
   Badge,
   cn,
-  Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
-  CommandInput_Shadcn_ as CommandInput,
-  CommandItem_Shadcn_ as CommandItem,
-  CommandList_Shadcn_ as CommandList,
+  Command as Command,
+  CommandEmpty as CommandEmpty,
+  CommandInput as CommandInput,
+  CommandItem as CommandItem,
+  CommandList as CommandList,
   Popover,
   PopoverAnchor,
   PopoverContent,
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index c39bd29b88d..0ad715c9a99 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -63,17 +63,7 @@ export * from './src/components/shadcn/ui/toggle-group'
 export * from './src/components/shadcn/ui/toggle'
 export * from './src/components/shadcn/ui/card'
 
-export {
-  Command as Command_Shadcn_,
-  CommandDialog as CommandDialog,
-  CommandInput as CommandInput_Shadcn_,
-  CommandList as CommandList_Shadcn_,
-  CommandEmpty as CommandEmpty_Shadcn_,
-  CommandGroup as CommandGroup_Shadcn_,
-  CommandItem as CommandItem_Shadcn_,
-  CommandShortcut as CommandShortcut_Shadcn_,
-  CommandSeparator as CommandSeparator_Shadcn_,
-} from './src/components/shadcn/ui/command'
+export * from './src/components/shadcn/ui/command'
 
 export * from './src/components/shadcn/ui/context-menu'