chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263)

## Problem

With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore

## Solution

- [x] Remove the `_Shadcn_` suffix 
- [x] Update exports and imports 

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

## Summary by CodeRabbit

* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/design-system/components/theme-settings.tsx

@@ -3,7 +3,7 @@
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 import SVG from 'react-inlinesvg'
-import { RadioGroup_Shadcn_, RadioGroupLargeItem_Shadcn_, singleThemes, Theme } from 'ui'
+import { RadioGroup, RadioGroupLargeItem, singleThemes, Theme } from 'ui'
 
 const ThemeSettings = () => {
   const [mounted, setMounted] = useState(false)
@@ -25,7 +25,7 @@ const ThemeSettings = () => {
   function SingleThemeSelection() {
     return (
       <form className="py-8">
-        <RadioGroup_Shadcn_
+        <RadioGroup
           name="theme"
           onValueChange={setTheme}
           aria-label="Choose a theme"
@@ -34,11 +34,11 @@ const ThemeSettings = () => {
           className="flex flex-wrap gap-3"
         >
           {singleThemes.map((theme: Theme) => (
-            <RadioGroupLargeItem_Shadcn_ key={theme.value} value={theme.value} label={theme.name}>
+            <RadioGroupLargeItem key={theme.value} value={theme.value} label={theme.name}>
               <SVG src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/themes/${theme.value}.svg`} />
-            </RadioGroupLargeItem_Shadcn_>
+            </RadioGroupLargeItem>
           ))}
-        </RadioGroup_Shadcn_>
+        </RadioGroup>
       </form>
     )
   }

apps/design-system/registry/default/example/checkbox-demo.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { Checkbox_Shadcn_ } from 'ui'
+import { Checkbox } from 'ui'
 
 export default function CheckboxDemo() {
   return (
     <div className="flex items-center space-x-2">
-      <Checkbox_Shadcn_ id="terms" />
+      <Checkbox id="terms" />
       <label
         htmlFor="terms"
         className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

apps/design-system/registry/default/example/checkbox-disabled.tsx

@@ -1,9 +1,9 @@
-import { Checkbox_Shadcn_ } from 'ui'
+import { Checkbox } from 'ui'
 
 export default function CheckboxDisabled() {
   return (
     <div className="flex items-center space-x-2">
-      <Checkbox_Shadcn_ id="terms2" disabled />
+      <Checkbox id="terms2" disabled />
       <label
         htmlFor="terms2"
         className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

apps/design-system/registry/default/example/checkbox-form-multiple.tsx

@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Form,
   FormControl,
   FormDescription,
@@ -93,7 +93,7 @@ export default function CheckboxReactHookFormMultiple() {
                         className="flex flex-row items-start space-x-3 space-y-0"
                       >
                         <FormControl>
-                          <Checkbox_Shadcn_
+                          <Checkbox
                             checked={field.value?.includes(item.id)}
                             onCheckedChange={(checked) => {
                               return checked

apps/design-system/registry/default/example/checkbox-form-single.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Form,
   FormControl,
   FormDescription,
@@ -47,7 +47,7 @@ export default function CheckboxReactHookFormSingle() {
           render={({ field }) => (
             <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
               <FormControl>
-                <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
+                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
               </FormControl>
               <div className="space-y-1 leading-none">
                 <FormLabel>Use different settings for my mobile devices</FormLabel>

apps/design-system/registry/default/example/checkbox-with-text.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { Checkbox_Shadcn_ } from 'ui'
+import { Checkbox } from 'ui'
 
 export default function CheckboxWithText() {
   return (
     <div className="items-top flex space-x-2">
-      <Checkbox_Shadcn_ id="terms1" />
+      <Checkbox id="terms1" />
       <div className="grid gap-1.5 leading-none">
         <label
           htmlFor="terms1"

apps/design-system/registry/default/example/data-grid-demo.tsx

@@ -3,7 +3,7 @@ import DataGrid, { Column, useRowSelection } from 'react-data-grid'
 
 import 'react-data-grid/lib/styles.css'
 
-import { Checkbox_Shadcn_, cn } from 'ui'
+import { Checkbox, cn } from 'ui'
 
 type User = {
   id: string
@@ -37,7 +37,7 @@ export default function DataGridDemo() {
 
         return (
           <div className="flex items-center justify-center h-full">
-            <Checkbox_Shadcn_
+            <Checkbox
               checked={isRowSelected}
               onClick={(e) => {
                 e.stopPropagation()

apps/design-system/registry/default/example/data-table-demo.tsx

@@ -17,7 +17,7 @@ import * as React from 'react'
 import {
   Button,
   Card,
-  Checkbox_Shadcn_,
+  Checkbox,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -78,7 +78,7 @@ export const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => (
-      <Checkbox_Shadcn_
+      <Checkbox
         checked={
           table.getIsAllPageRowsSelected() ||
           (table.getIsSomePageRowsSelected() ? 'indeterminate' : false)
@@ -88,7 +88,7 @@ export const columns: ColumnDef<Payment>[] = [
       />
     ),
     cell: ({ row }) => (
-      <Checkbox_Shadcn_
+      <Checkbox
         checked={row.getIsSelected()}
         onCheckedChange={(value) => row.toggleSelected(!!value)}
         aria-label="Select row"

apps/design-system/registry/default/example/field-checkbox.tsx

@@ -1,4 +1,4 @@
-import { Checkbox_Shadcn_ as Checkbox } from 'ui'
+import { Checkbox } from 'ui'
 import {
   Field,
   FieldContent,

apps/design-system/registry/default/example/field-demo.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox_Shadcn_ as Checkbox, Input, Textarea } from 'ui'
+import { Button, Checkbox, Input, Textarea } from 'ui'
 import {
   Field,
   FieldDescription,

apps/design-system/registry/default/example/field-group.tsx

@@ -1,4 +1,4 @@
-import { Checkbox_Shadcn_ as Checkbox } from 'ui'
+import { Checkbox } from 'ui'
 import {
   Field,
   FieldDescription,

apps/design-system/registry/default/example/field-hear.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, Checkbox_Shadcn_ as Checkbox } from 'ui'
+import { Card, CardContent, Checkbox } from 'ui'
 import {
   Field,
   FieldDescription,

apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Checkbox_Shadcn_, Form, FormControl, FormField } from 'ui'
+import { Button, Checkbox, Form, FormControl, FormField } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
 
@@ -77,7 +77,7 @@ export default function FormItemLayoutDemo() {
                         hideMessage
                       >
                         <FormControl>
-                          <Checkbox_Shadcn_
+                          <Checkbox
                             checked={field.value?.includes(item.id)}
                             onCheckedChange={(checked) => {
                               return checked

apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Badge, Button, Checkbox_Shadcn_, Form, FormControl, FormField } from 'ui'
+import { Badge, Button, Checkbox, Form, FormControl, FormField } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
 
@@ -34,7 +34,7 @@ export default function FormItemLayoutDemo() {
               layout="flex"
             >
               <FormControl>
-                <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
+                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
               </FormControl>
             </FormItemLayout>
           )}

apps/design-system/registry/default/example/form-patterns-pagelayout.tsx

@@ -9,7 +9,7 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Checkbox_Shadcn_,
+  Checkbox,
   Form,
   FormControl,
   FormField,
@@ -499,7 +499,7 @@ export default function FormPatternsPageLayout() {
                         render={({ field }) => (
                           <div className="flex items-center w-full justify-start space-x-2">
                             <FormControl>
-                              <Checkbox_Shadcn_
+                              <Checkbox
                                 id="enable-rls"
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
@@ -520,7 +520,7 @@ export default function FormPatternsPageLayout() {
                         render={({ field }) => (
                           <div className="flex items-center w-full justify-start space-x-2">
                             <FormControl>
-                              <Checkbox_Shadcn_
+                              <Checkbox
                                 id="enable-notifications"
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
@@ -541,7 +541,7 @@ export default function FormPatternsPageLayout() {
                         render={({ field }) => (
                           <div className="flex items-center w-full justify-start space-x-2">
                             <FormControl>
-                              <Checkbox_Shadcn_
+                              <Checkbox
                                 id="enable-analytics"
                                 checked={field.value}
                                 onCheckedChange={field.onChange}

apps/design-system/registry/default/example/form-patterns-sidepanel.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form'
 import {
   Button,
   Calendar,
-  Checkbox_Shadcn_,
+  Checkbox,
   Form,
   FormControl,
   FormField,
@@ -484,7 +484,7 @@ export default function FormPatternsSidePanel() {
                       render={({ field }) => (
                         <div className="flex items-center w-full justify-start space-x-2">
                           <FormControl>
-                            <Checkbox_Shadcn_
+                            <Checkbox
                               id="enable-rls"
                               checked={field.value}
                               onCheckedChange={field.onChange}
@@ -505,7 +505,7 @@ export default function FormPatternsSidePanel() {
                       render={({ field }) => (
                         <div className="flex items-center w-full justify-start space-x-2">
                           <FormControl>
-                            <Checkbox_Shadcn_
+                            <Checkbox
                               id="enable-notifications"
                               checked={field.value}
                               onCheckedChange={field.onChange}
@@ -526,7 +526,7 @@ export default function FormPatternsSidePanel() {
                       render={({ field }) => (
                         <div className="flex items-center w-full justify-start space-x-2">
                           <FormControl>
-                            <Checkbox_Shadcn_
+                            <Checkbox
                               id="enable-analytics"
                               checked={field.value}
                               onCheckedChange={field.onChange}

apps/design-system/registry/default/example/label-demo.tsx

@@ -1,10 +1,10 @@
-import { Checkbox_Shadcn_, Label_Shadcn_ } from 'ui'
+import { Checkbox, Label_Shadcn_ } from 'ui'
 
 export default function LabelDemo() {
   return (
     <div>
       <div className="flex items-center space-x-2">
-        <Checkbox_Shadcn_ id="terms" />
+        <Checkbox id="terms" />
         <Label_Shadcn_ htmlFor="terms">Accept terms and conditions</Label_Shadcn_>
       </div>
     </div>

apps/design-system/registry/default/example/radio-group-demo.tsx

@@ -1,20 +1,20 @@
-import { Label_Shadcn_, RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
+import { Label_Shadcn_, RadioGroup, RadioGroupItem } from 'ui'
 
 export default function RadioGroupDemo() {
   return (
-    <RadioGroup_Shadcn_ defaultValue="comfortable">
+    <RadioGroup defaultValue="comfortable">
       <div className="flex items-center space-x-2">
-        <RadioGroupItem_Shadcn_ value="default" id="r1" />
+        <RadioGroupItem value="default" id="r1" />
         <Label_Shadcn_ htmlFor="r1">Default</Label_Shadcn_>
       </div>
       <div className="flex items-center space-x-2">
-        <RadioGroupItem_Shadcn_ value="comfortable" id="r2" />
+        <RadioGroupItem value="comfortable" id="r2" />
         <Label_Shadcn_ htmlFor="r2">Comfortable</Label_Shadcn_>
       </div>
       <div className="flex items-center space-x-2">
-        <RadioGroupItem_Shadcn_ value="compact" id="r3" />
+        <RadioGroupItem value="compact" id="r3" />
         <Label_Shadcn_ htmlFor="r3">Compact</Label_Shadcn_>
       </div>
-    </RadioGroup_Shadcn_>
+    </RadioGroup>
   )
 }

apps/design-system/registry/default/example/radio-group-form.tsx

@@ -11,8 +11,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  RadioGroup_Shadcn_,
-  RadioGroupItem_Shadcn_,
+  RadioGroup,
+  RadioGroupItem,
 } from 'ui'
 import { z } from 'zod'
 
@@ -47,30 +47,30 @@ export default function RadioGroupForm() {
             <FormItem className="space-y-3">
               <FormLabel>Notify me about...</FormLabel>
               <FormControl>
-                <RadioGroup_Shadcn_
+                <RadioGroup
                   onValueChange={field.onChange}
                   defaultValue={field.value}
                   className="flex flex-col space-y-1"
                 >
                   <FormItem className="flex items-center space-x-3 space-y-0">
                     <FormControl>
-                      <RadioGroupItem_Shadcn_ value="all" />
+                      <RadioGroupItem value="all" />
                     </FormControl>
                     <FormLabel className="font-normal">All new messages</FormLabel>
                   </FormItem>
                   <FormItem className="flex items-center space-x-3 space-y-0">
                     <FormControl>
-                      <RadioGroupItem_Shadcn_ value="mentions" />
+                      <RadioGroupItem value="mentions" />
                     </FormControl>
                     <FormLabel className="font-normal">Direct messages and mentions</FormLabel>
                   </FormItem>
                   <FormItem className="flex items-center space-x-3 space-y-0">
                     <FormControl>
-                      <RadioGroupItem_Shadcn_ value="none" />
+                      <RadioGroupItem value="none" />
                     </FormControl>
                     <FormLabel className="font-normal">Nothing</FormLabel>
                   </FormItem>
-                </RadioGroup_Shadcn_>
+                </RadioGroup>
               </FormControl>
               <FormMessage />
             </FormItem>

apps/learn/components/theme-switcher-dropdown.tsx

@@ -3,7 +3,6 @@
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-
 import {
   Button,
   DropdownMenu,
@@ -13,9 +12,9 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  RadioGroup_Shadcn_,
-  Theme,
+  RadioGroup,
   singleThemes,
+  Theme,
 } from 'ui'
 
 const ThemeSwitcherDropdown = () => {
@@ -38,14 +37,14 @@ const ThemeSwitcherDropdown = () => {
   function SingleThemeSelection() {
     return (
       <form>
-        <RadioGroup_Shadcn_
+        <RadioGroup
           name="theme"
           onValueChange={setTheme}
           aria-label="Choose a theme"
           defaultValue={theme}
           value={theme}
           className="flex flex-wrap gap-3"
-        ></RadioGroup_Shadcn_>
+        ></RadioGroup>
       </form>
     )
   }

apps/lite-studio/app/routes/projects.$ref.tsx

@@ -4,7 +4,7 @@ import {
   Badge,
   Button,
   Card,
-  Checkbox_Shadcn_ as Checkbox,
+  Checkbox,
   Input,
   Label_Shadcn_ as Label,
   Separator,

apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx

@@ -2,7 +2,7 @@ import { Key, Plus } from 'lucide-react'
 import { Path, PathValue } from 'react-hook-form'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
@@ -65,7 +65,7 @@ export const PermissionResourceSelector = <TFormValues extends PermissionsFormVa
                       className="text-foreground"
                     >
                       <div className="flex items-center gap-3 w-full">
-                        <Checkbox_Shadcn_
+                        <Checkbox
                           checked={isChecked}
                           onCheckedChange={() => handleToggleResource(resource)}
                           onClick={(e) => e.stopPropagation()}

apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/Permissions.tsx

@@ -2,7 +2,7 @@ import { ChevronDown, RotateCcw, X } from 'lucide-react'
 import { Path, PathValue } from 'react-hook-form'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -112,7 +112,7 @@ export const Permissions = <TFormValues extends PermissionsFormValues = Permissi
                                   key={action}
                                   className="flex items-center gap-2 cursor-pointer"
                                 >
-                                  <Checkbox_Shadcn_
+                                  <Checkbox
                                     checked={row.actions.includes(action)}
                                     onCheckedChange={(checked) => {
                                       const newActions = checked

apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx

@@ -6,8 +6,8 @@ import {
   Card,
   CardContent,
   Label_Shadcn_,
-  RadioGroup_Shadcn_,
-  RadioGroupLargeItem_Shadcn_,
+  RadioGroup,
+  RadioGroupLargeItem,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -50,7 +50,7 @@ export const ThemeSettings = () => {
 
   function SingleThemeSelection() {
     return (
-      <RadioGroup_Shadcn_
+      <RadioGroup
         name="theme"
         onValueChange={setTheme}
         aria-label="Choose a theme"
@@ -59,16 +59,16 @@ export const ThemeSettings = () => {
         className="grid grid-cols-2 gap-4"
       >
         {singleThemes.map((theme: Theme) => (
-          <RadioGroupLargeItem_Shadcn_
+          <RadioGroupLargeItem
             className="p-3 w-full"
             key={theme.value}
             value={theme.value}
             label={theme.name}
           >
             <SVG src={`${BASE_PATH}/img/themes/${theme.value}.svg?v=2`} />
-          </RadioGroupLargeItem_Shadcn_>
+          </RadioGroupLargeItem>
         ))}
-      </RadioGroup_Shadcn_>
+      </RadioGroup>
     )
   }
 

apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx

@@ -20,8 +20,8 @@ import {
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  RadioGroup_Shadcn_,
-  RadioGroupLargeItem_Shadcn_,
+  RadioGroup,
+  RadioGroupLargeItem,
   ScrollArea,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -264,7 +264,7 @@ export const PolicyDetailsV2 = ({
                   Policy Command <code className="text-code-inline">for</code> clause
                 </FormLabel>
                 <FormControl>
-                  <RadioGroup_Shadcn_
+                  <RadioGroup
                     disabled={isEditing}
                     value={field.value}
                     defaultValue={field.value}
@@ -279,7 +279,7 @@ export const PolicyDetailsV2 = ({
                       'insert',
                       ...(authContext === 'database' ? ['update', 'delete', 'all'] : []),
                     ].map((x) => (
-                      <RadioGroupLargeItem_Shadcn_
+                      <RadioGroupLargeItem
                         key={x}
                         value={x}
                         disabled={isEditing}
@@ -287,7 +287,7 @@ export const PolicyDetailsV2 = ({
                         className={cn('w-auto', isEditing && 'cursor-not-allowed')}
                       />
                     ))}
-                  </RadioGroup_Shadcn_>
+                  </RadioGroup>
                 </FormControl>
                 <FormMessage />
               </FormItem>

apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx

@@ -10,7 +10,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   Form,
   Label_Shadcn_,
@@ -461,7 +461,7 @@ export const PolicyEditorPanel = memo(function ({
 
                     {supportWithCheck && (
                       <div className="px-5 py-3 flex items-center gap-x-2">
-                        <Checkbox_Shadcn_
+                        <Checkbox
                           id="use-check"
                           name="use-check"
                           checked={showCheckBlock}

apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Globe, Trash } from 'lucide-react'
-import { Button, Checkbox_Shadcn_ } from 'ui'
+import { Button, Checkbox } from 'ui'
 
 import { ValueContainer } from './ValueContainer'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
@@ -111,7 +111,7 @@ export const RedirectUrlList = ({
               <ValueContainer key={url} isSelected={isSelected} onClick={(e) => onClickUrl(e, url)}>
                 <div className={`flex items-center gap-4 font-mono group w-full`}>
                   <div className="w-5 h-5 flex items-center justify-center">
-                    <Checkbox_Shadcn_ checked={isSelected} onChange={(e) => onClickUrl(e, url)} />
+                    <Checkbox checked={isSelected} onChange={(e) => onClickUrl(e, url)} />
                   </div>
                   <Globe strokeWidth={2} size={14} className="text-foreground-lighter" />
                   <span className="text-sm flex-grow">{url}</span>

apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx

@@ -6,7 +6,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Dialog,
   DialogContent,
   DialogHeader,
@@ -139,7 +139,7 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
               render={({ field }) => (
                 <FormItem className="flex items-center gap-x-2">
                   <FormControl>
-                    <Checkbox_Shadcn_
+                    <Checkbox
                       checked={field.value}
                       onCheckedChange={(value) => field.onChange(value)}
                     />

apps/studio/components/interfaces/Auth/Users/Users.utils.tsx

@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
 import { Copy, Trash, UserIcon } from 'lucide-react'
 import { Column, useRowSelection } from 'react-data-grid'
 import {
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   ContextMenu_Shadcn_,
   ContextMenuContent_Shadcn_,
@@ -323,7 +323,7 @@ export const formatUserColumns = ({
         if (col.id === 'img') {
           return (
             <div className="flex items-center justify-center gap-x-2">
-              <Checkbox_Shadcn_
+              <Checkbox
                 checked={isRowSelected}
                 onClick={(e) => {
                   e.stopPropagation()

apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useRef, useState } from 'react'
 import { toast } from 'sonner'
-import { Button, Checkbox_Shadcn_, Label_Shadcn_, Modal } from 'ui'
+import { Button, Checkbox, Label_Shadcn_, Modal } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import {
@@ -205,7 +205,7 @@ const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps
         />
 
         <div className="flex items-center gap-x-2 mt-4 mb-2">
-          <Checkbox_Shadcn_
+          <Checkbox
             id="save-as-default"
             checked={isDefaultPaymentMethod}
             onCheckedChange={(checked) => {
@@ -220,7 +220,7 @@ const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps
         </div>
 
         <div className="flex items-center gap-x-2 mt-4 mb-2">
-          <Checkbox_Shadcn_
+          <Checkbox
             id="is-primary-billing-address"
             checked={isPrimaryBillingAddress}
             onCheckedChange={(checked) => {

apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx

@@ -18,7 +18,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   Command_Shadcn_ as Command,
   CommandEmpty_Shadcn_ as CommandEmpty,
@@ -337,7 +337,7 @@ export const NewPaymentMethodElement = forwardRef(
 
         {fullyLoaded && (
           <div className="flex items-center space-x-2 py-4">
-            <Checkbox_Shadcn_
+            <Checkbox
               id="business"
               checked={purchasingAsBusiness}
               onCheckedChange={() => setPurchasingAsBusiness(!purchasingAsBusiness)}

apps/studio/components/interfaces/Database/Hooks/FormContents.tsx

@@ -5,7 +5,7 @@ import Image from 'next/legacy/image'
 import { useEffect } from 'react'
 import { UseFormReturn } from 'react-hook-form'
 import {
-  Checkbox_Shadcn_,
+  Checkbox,
   FormControl,
   FormField,
   Input_Shadcn_,
@@ -181,7 +181,7 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
                 <div className="space-y-3">
                   {HOOK_EVENTS.map((event) => (
                     <div key={event.value} className="flex items-start space-x-3">
-                      <Checkbox_Shadcn_
+                      <Checkbox
                         id={`event-${event.value}`}
                         checked={field.value.includes(event.value)}
                         onCheckedChange={(checked) => {

apps/studio/components/interfaces/Database/Tables/TableList.tsx

@@ -10,7 +10,7 @@ import { useState } from 'react'
 import {
   Button,
   Card,
-  Checkbox_Shadcn_,
+  Checkbox,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -232,7 +232,7 @@ export const TableList = ({
                   {Object.entries(ENTITY_TYPE).map(([key, value]) => (
                     <div key={key} className="group flex items-center justify-between py-0.5">
                       <div className="flex items-center gap-x-2">
-                        <Checkbox_Shadcn_
+                        <Checkbox
                           id={key}
                           name={key}
                           checked={visibleTypes.includes(value)}

apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx

@@ -6,7 +6,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   Form,
   FormControl,
@@ -323,7 +323,7 @@ export const TriggerSheet = ({
                                 description={event.description}
                               >
                                 <FormControl>
-                                  <Checkbox_Shadcn_
+                                  <Checkbox
                                     className="translate-y-[2px]"
                                     checked={field.value?.includes(event.value)}
                                     onCheckedChange={(checked) => {

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/create-key-dialog.tsx

@@ -4,7 +4,7 @@ import { toast } from 'sonner'
 import {
   Badge,
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   DialogFooter,
   DialogHeader,
   DialogSection,
@@ -187,11 +187,7 @@ export const CreateKeyDialog = ({
         </div>
         <div className="flex flex-col gap-4">
           <Label_Shadcn_ htmlFor="byok" className="flex items-center gap-x-2">
-            <Checkbox_Shadcn_
-              id="byok"
-              checked={isBYOK}
-              onCheckedChange={(value) => setBYOK(!!value)}
-            />
+            <Checkbox id="byok" checked={isBYOK} onCheckedChange={(value) => setBYOK(!!value)} />
             {newKeyAlgorithm === 'HS256'
               ? 'Import an existing secret'
               : 'Import an existing private key'}
@@ -220,7 +216,7 @@ export const CreateKeyDialog = ({
           {isBYOK && newKeyAlgorithm === 'HS256' && (
             <>
               <Label_Shadcn_ htmlFor="base64" className="flex items-center gap-x-2">
-                <Checkbox_Shadcn_
+                <Checkbox
                   id="base64"
                   checked={isBase64}
                   onCheckedChange={(value) => setBase64(!!value)}

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx

@@ -4,7 +4,7 @@ import { toast } from 'sonner'
 import {
   Badge,
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   DialogDescription,
   DialogFooter,
@@ -142,7 +142,7 @@ export function RotateKeyDialog({
               htmlFor="understands-standby"
               className="flex items-top gap-4 text-sm leading-none"
             >
-              <Checkbox_Shadcn_
+              <Checkbox
                 id="understands-standby"
                 className="mt-0.5"
                 checked={isStandbyUnderstood}
@@ -178,7 +178,7 @@ export function RotateKeyDialog({
               htmlFor="understands-previously-used"
               className="flex items-top gap-4 text-sm leading-none"
             >
-              <Checkbox_Shadcn_
+              <Checkbox
                 className="mt-0.5"
                 id="understands-previously-used"
                 checked={isPreviouslyUsedUnderstood}
@@ -215,7 +215,7 @@ export function RotateKeyDialog({
 
             {verifyJWTEdgeFunctions.length > 0 && (
               <Label_Shadcn_ htmlFor="edge-functions-verify-jwt" className="flex gap-4 text-sm">
-                <Checkbox_Shadcn_
+                <Checkbox
                   id="edge-functions-verify-jwt"
                   className="mt-0.5"
                   checked={isEdgeFunctionsVerifyJWTUnderstood}

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx

@@ -14,7 +14,7 @@ import {
   useState,
 } from 'react'
 import { toast } from 'sonner'
-import { Checkbox_Shadcn_, Listbox } from 'ui'
+import { Checkbox, Listbox } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { getStripeElementsAppearanceOptions } from '@/components/interfaces/Billing/Payment/Payment.utils'
@@ -351,7 +351,7 @@ const PaymentMethodSelection = forwardRef(function PaymentMethodSelection(
             {/* If the customer already has a billing address, optionally allow overwriting it - if they have no address, we use that as a default */}
             {customerProfile?.address != null && (
               <div className="flex items-center space-x-2 mt-4">
-                <Checkbox_Shadcn_
+                <Checkbox
                   id="defaultBillingAddress"
                   checked={useAsDefaultBillingAddress}
                   onCheckedChange={() => {

apps/studio/components/interfaces/Organization/GeneralSettings/AIOptInLevelSelector.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import { Control } from 'react-hook-form'
-import { FormField, RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
+import { FormField, RadioGroup, RadioGroupItem } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { OptInToOpenAIToggle } from './OptInToOpenAIToggle'
@@ -100,7 +100,7 @@ export const AIOptInLevelSelector = ({
           control={control}
           name="aiOptInLevel"
           render={({ field }) => (
-            <RadioGroup_Shadcn_
+            <RadioGroup
               value={field.value}
               onValueChange={field.onChange}
               disabled={disabled}
@@ -108,7 +108,7 @@ export const AIOptInLevelSelector = ({
             >
               {AI_OPT_IN_LEVELS.map((item) => (
                 <div key={item.value} className="flex items-start space-x-3">
-                  <RadioGroupItem_Shadcn_
+                  <RadioGroupItem
                     value={item.value}
                     id={`ai-opt-in-${item.value}`}
                     className="mt-0.5"
@@ -122,7 +122,7 @@ export const AIOptInLevelSelector = ({
                   </label>
                 </div>
               ))}
-            </RadioGroup_Shadcn_>
+            </RadioGroup>
           )}
         />
       </div>

apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.ListAck.tsx

@@ -1,4 +1,4 @@
-import { Checkbox_Shadcn_ } from 'ui'
+import { Checkbox } from 'ui'
 
 import { getComputeSize } from '@/data/projects/org-projects-infinite-query'
 import type { OrgProject } from '@/data/projects/org-projects-infinite-query'
@@ -32,7 +32,7 @@ export const DeleteOrganizationButtonListAck = ({
               }`}
               onClick={() => toggleProject(project.ref, !isChecked)}
             >
-              <Checkbox_Shadcn_
+              <Checkbox
                 className="mt-[2px]"
                 checked={isChecked}
                 onCheckedChange={(nextChecked) => toggleProject(project.ref, nextChecked)}

apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.SingleAck.tsx

@@ -1,4 +1,4 @@
-import { Checkbox_Shadcn_ } from 'ui'
+import { Checkbox } from 'ui'
 
 type Props = {
   acknowledgedAll: boolean
@@ -21,7 +21,7 @@ export const DeleteOrganizationButtonSingleAck = ({
         className="mt-3 flex cursor-pointer items-center gap-2 text-sm text-foreground"
         onClick={() => setAcknowledgedAll(!acknowledgedAll)}
       >
-        <Checkbox_Shadcn_
+        <Checkbox
           checked={acknowledgedAll}
           onCheckedChange={(checked) => setAcknowledgedAll(checked === true)}
           onClick={(e) => e.stopPropagation()}

apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
@@ -220,7 +220,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                                       className="text-foreground"
                                     >
                                       <div className="flex items-center gap-3 w-full">
-                                        <Checkbox_Shadcn_
+                                        <Checkbox
                                           checked={selectedPermissions.includes(perm.id)}
                                           onCheckedChange={() => toggle(perm.id)}
                                           onClick={(e) => e.stopPropagation()}
@@ -350,7 +350,7 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
                         className="w-full rounded-md border border-control bg-surface-200 px-3 py-2 text-xs font-mono resize-none focus:outline-none"
                       />
                       <label className="flex items-center gap-3 cursor-pointer bg-warning-200 border border-warning-400 rounded-md px-3 py-2">
-                        <Checkbox_Shadcn_
+                        <Checkbox
                           id="key-copied"
                           checked={keyCopied}
                           onCheckedChange={(v) => setKeyCopied(Boolean(v))}

apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx

@@ -8,7 +8,7 @@ import {
   AccordionItem_Shadcn_ as AccordionItem,
   AccordionTrigger_Shadcn_ as AccordionTrigger,
   Button,
-  Checkbox_Shadcn_ as Checkbox,
+  Checkbox,
   cn,
   Form,
   FormControl,

apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { UseFormReturn } from 'react-hook-form'
 import {
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   FormControl,
   FormDescription,
@@ -40,7 +40,7 @@ export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptions
             render={({ field }) => (
               <FormItem className="flex items-start gap-3">
                 <FormControl>
-                  <Checkbox_Shadcn_
+                  <Checkbox
                     checked={field.value}
                     disabled={field.disabled}
                     onCheckedChange={(value) => field.onChange(value === true)}
@@ -77,7 +77,7 @@ export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptions
               >
                 <FormControl>
                   {dataApi ? (
-                    <Checkbox_Shadcn_
+                    <Checkbox
                       checked={field.value}
                       disabled={field.disabled}
                       onCheckedChange={(value) => field.onChange(value === true)}
@@ -86,7 +86,7 @@ export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptions
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <span className="cursor-not-allowed">
-                          <Checkbox_Shadcn_ checked={field.value} disabled />
+                          <Checkbox checked={field.value} disabled />
                         </span>
                       </TooltipTrigger>
                       <TooltipContent side="top">
@@ -120,7 +120,7 @@ export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptions
             render={({ field }) => (
               <FormItem className="flex items-start gap-3">
                 <FormControl>
-                  <Checkbox_Shadcn_
+                  <Checkbox
                     checked={field.value}
                     disabled={field.disabled}
                     onCheckedChange={(value) => field.onChange(value === true)}

apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx

@@ -6,7 +6,7 @@ import { useMemo } from 'react'
 import {
   Badge,
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Label_Shadcn_,
   ResizableHandle,
   ResizablePanel,
@@ -269,7 +269,7 @@ export const ChartConfig = ({
         </div>
         <div className="*:flex *:gap-2 *:items-center grid gap-2 *:text-foreground-light *:p-1.5 *:pl-0">
           <Label_Shadcn_ className="" htmlFor="cumulative">
-            <Checkbox_Shadcn_
+            <Checkbox
               id="cumulative"
               name="cumulative"
               checked={config.cumulative}
@@ -279,7 +279,7 @@ export const ChartConfig = ({
           </Label_Shadcn_>
 
           <Label_Shadcn_ htmlFor="showLabels">
-            <Checkbox_Shadcn_
+            <Checkbox
               id="showLabels"
               name="showLabels"
               checked={config.showLabels}
@@ -289,7 +289,7 @@ export const ChartConfig = ({
           </Label_Shadcn_>
 
           <Label_Shadcn_ htmlFor="showGrid">
-            <Checkbox_Shadcn_
+            <Checkbox
               id="showGrid"
               name="showGrid"
               checked={config.showGrid}

apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx

@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
-import { cn, RadioGroup_Shadcn_, RadioGroupLargeItem_Shadcn_, SidePanel } from 'ui'
+import { cn, RadioGroup, RadioGroupLargeItem, SidePanel } from 'ui'
 import { Admonition } from 'ui-patterns'
 
 import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer'
@@ -167,14 +167,14 @@ const IPv4SidePanel = () => {
 
           {isAws && (
             <div className={cn('!mt-8 pb-4', !hasAccessToIPv4 && 'opacity-75')}>
-              <RadioGroup_Shadcn_
+              <RadioGroup
                 name="ipv4"
                 value={selectedOption}
                 onValueChange={setSelectedOption}
                 className="grid grid-cols-1 md:grid-cols-2 gap-4"
               >
                 {ipv4Options.map((option) => (
-                  <RadioGroupLargeItem_Shadcn_
+                  <RadioGroupLargeItem
                     key={option.id}
                     value={option.value}
                     label=""
@@ -196,9 +196,9 @@ const IPv4SidePanel = () => {
                         {option.priceContent}
                       </div>
                     </div>
-                  </RadioGroupLargeItem_Shadcn_>
+                  </RadioGroupLargeItem>
                 ))}
-              </RadioGroup_Shadcn_>
+              </RadioGroup>
               <TaxDisclaimer className="mt-3" />
             </div>
           )}

apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRoleGrantFields.tsx

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import {
-  Checkbox_Shadcn_,
+  Checkbox,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -42,7 +42,7 @@ export function JitDbAccessRoleGrantFields({
           grant.enabled ? 'hover:bg-surface-200/40' : 'hover:bg-surface-100/50'
         }`}
       >
-        <Checkbox_Shadcn_
+        <Checkbox
           id={checkboxId}
           checked={grant.enabled}
           onCheckedChange={(value) => {

apps/studio/components/interfaces/Settings/Logs/LogTable.tsx

@@ -8,7 +8,7 @@ import DataGrid, { Column, RenderRowProps, Row } from 'react-data-grid'
 import { toast } from 'sonner'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   ContextMenu_Shadcn_,
   ContextMenuItem_Shadcn_,
@@ -207,7 +207,7 @@ export const LogTable = ({
             toggle()
           }}
         >
-          <Checkbox_Shadcn_
+          <Checkbox
             className="group-hover:border-foreground-muted"
             checked={selectedRows.has(key)}
             onClick={(e: React.MouseEvent) => e.stopPropagation()}

apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx

@@ -5,7 +5,7 @@ import { ChevronsDown, ChevronsUp, Copy, Eye, FolderPlus, Upload } from 'lucide-
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 import {
-  Checkbox_Shadcn_ as Checkbox,
+  Checkbox,
   cn,
   ContextMenu_Shadcn_,
   ContextMenuContent_Shadcn_,

apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRow.tsx

@@ -18,7 +18,7 @@ import {
 } from 'lucide-react'
 import type { CSSProperties } from 'react'
 import {
-  Checkbox_Shadcn_ as Checkbox,
+  Checkbox,
   cn,
   DropdownMenu,
   DropdownMenuContent,

apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx

@@ -1,5 +1,5 @@
 import { noop } from 'lodash'
-import { Button, Checkbox_Shadcn_ as Checkbox, cn, Modal } from 'ui'
+import { Button, Checkbox, cn, Modal } from 'ui'
 
 import { STORAGE_CLIENT_LIBRARY_MAPPINGS } from '../Storage.constants'
 import { deriveAllowedClientLibraryMethods } from '../Storage.utils'

apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx

@@ -1,13 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { toast } from 'sonner'
-import {
-  Alert_Shadcn_,
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
-  Button,
-  Checkbox_Shadcn_ as Checkbox,
-} from 'ui'
+import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Button, Checkbox } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 import { useTableFilter } from '@/components/grid/hooks/useTableFilter'

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   DialogSectionSeparator,
   Sheet,
@@ -344,7 +344,7 @@ export const ColumnEditor = ({
                       id="isIdentity"
                       description="Automatically assign a sequential unique number to the column"
                     >
-                      <Checkbox_Shadcn_
+                      <Checkbox
                         id="isIdentity"
                         checked={columnFields.isIdentity}
                         onCheckedChange={() => {
@@ -363,7 +363,7 @@ export const ColumnEditor = ({
                       label="Define as Array"
                       description="Allow column to be defined as variable-length multidimensional arrays"
                     >
-                      <Checkbox_Shadcn_
+                      <Checkbox
                         id="isArray"
                         checked={columnFields.isArray}
                         onCheckedChange={() => {

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react'
 import {
   Badge,
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   Command_Shadcn_,
   CommandGroup_Shadcn_,
@@ -283,7 +283,7 @@ export const Column = ({
         </div>
       </div>
       <div className="w-[10%]">
-        <Checkbox_Shadcn_
+        <Checkbox
           aria-label="Check to make this column a primary key"
           checked={column.isPrimaryKey}
           onCheckedChange={() => {
@@ -326,7 +326,7 @@ export const Column = ({
                     label="Is Nullable"
                     description="Specify if the column can assume a NULL value if no value is provided"
                   >
-                    <Checkbox_Shadcn_
+                    <Checkbox
                       id="isNullable"
                       checked={column.isNullable}
                       onCheckedChange={() => onUpdateColumn({ isNullable: !column.isNullable })}
@@ -341,7 +341,7 @@ export const Column = ({
                     label="Is Unique"
                     description="Enforce if values in the column should be unique across rows"
                   >
-                    <Checkbox_Shadcn_
+                    <Checkbox
                       id="isUnique"
                       checked={column.isUnique}
                       onCheckedChange={() => onUpdateColumn({ isUnique: !column.isUnique })}
@@ -356,7 +356,7 @@ export const Column = ({
                     label="Is Identity"
                     description="Automatically assign a sequential unique number to the column"
                   >
-                    <Checkbox_Shadcn_
+                    <Checkbox
                       id="isIdentity"
                       checked={column.isIdentity}
                       onCheckedChange={() => {
@@ -375,7 +375,7 @@ export const Column = ({
                     label="Define as Array"
                     description="Define your column as a variable-length multidimensional array"
                   >
-                    <Checkbox_Shadcn_
+                    <Checkbox
                       id="defineAsArray"
                       checked={column.isArray}
                       onCheckedChange={() => {

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx

@@ -2,7 +2,7 @@ import type { PostgresTable } from '@supabase/postgres-meta'
 import { isEmpty, noop } from 'lodash'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
-import { Badge, Checkbox_Shadcn_, Input, SidePanel } from 'ui'
+import { Badge, Checkbox, Input, SidePanel } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
 
@@ -372,7 +372,7 @@ export const TableEditor = ({
 
       <SidePanel.Content className="space-y-10 py-6">
         <div className="items-top flex space-x-2">
-          <Checkbox_Shadcn_
+          <Checkbox
             id="enable-rls"
             checked={tableFields.isRLSEnabled}
             onCheckedChange={() => {
@@ -439,7 +439,7 @@ export const TableEditor = ({
 
         {realtimeEnabled && (
           <div className="items-top flex space-x-2">
-            <Checkbox_Shadcn_
+            <Checkbox
               id="enable-realtime"
               checked={tableFields.isRealtimeEnabled}
               onCheckedChange={() => {
@@ -490,7 +490,7 @@ export const TableEditor = ({
         {isDuplicating && (
           <>
             <div className="items-top flex space-x-2">
-              <Checkbox_Shadcn_
+              <Checkbox
                 id="duplicate-rows"
                 checked={isDuplicateRows}
                 onCheckedChange={() => setIsDuplicateRows(!isDuplicateRows)}

apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx

@@ -6,7 +6,7 @@ import { Filter, Plus } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Label_Shadcn_,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
@@ -242,7 +242,7 @@ export const TableEditorMenu = () => {
                     {Object.entries(ENTITY_TYPE).map(([key, value]) => (
                       <div key={key} className="group flex items-center justify-between py-0.5">
                         <div className="flex items-center gap-x-2">
-                          <Checkbox_Shadcn_
+                          <Checkbox
                             id={key}
                             name={key}
                             checked={visibleTypes.includes(value)}

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx

@@ -1,6 +1,6 @@
 import { Search } from 'lucide-react'
 import { useState } from 'react'
-import { Checkbox_Shadcn_ as Checkbox, cn, Label_Shadcn_ as Label, Skeleton } from 'ui'
+import { Checkbox, cn, Label_Shadcn_ as Label, Skeleton } from 'ui'
 
 import type { DataTableCheckboxFilterField } from '../DataTable.types'
 import { formatCompactNumber } from '../DataTable.utils'

apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx

@@ -3,7 +3,7 @@ import { useDebounce } from '@uidotdev/usehooks'
 import { useParams } from 'common'
 import { Loader2, Search } from 'lucide-react'
 import { useState } from 'react'
-import { Checkbox_Shadcn_ as Checkbox, cn, Label_Shadcn_ as Label, Skeleton } from 'ui'
+import { Checkbox, cn, Label_Shadcn_ as Label, Skeleton } from 'ui'
 
 import type { DataTableCheckboxFilterField } from '../DataTable.types'
 import { formatCompactNumber } from '../DataTable.utils'

apps/studio/components/ui/DataTable/DataTableViewOptions.tsx

@@ -1,7 +1,7 @@
 import { GripVertical, Settings2 } from 'lucide-react'
 import { useId, useMemo, useState } from 'react'
 import {
-  Checkbox_Shadcn_,
+  Checkbox,
   Command_Shadcn_ as Command,
   CommandEmpty_Shadcn_ as CommandEmpty,
   CommandGroup_Shadcn_ as CommandGroup,
@@ -74,7 +74,7 @@ export function DataTableViewOptions() {
                         className="capitalize p-1"
                         disabled={drag}
                       >
-                        <Checkbox_Shadcn_ checked={column.getIsVisible()} className="mr-2" />
+                        <Checkbox checked={column.getIsVisible()} className="mr-2" />
                         <span>{(column.columnDef.meta as any)?.label || column.id}</span>
                         {enableColumnOrdering && !search ? (
                           <SortableDragHandle

apps/studio/components/ui/FilterPopover.tsx

@@ -4,7 +4,7 @@ import { ChevronDown, X } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import {
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   cn,
   Label_Shadcn_,
   Popover_Shadcn_,
@@ -107,7 +107,7 @@ export const FilterPopover = <T extends Record<string, any>>({
 
     return (
       <div key={value} className="group flex items-center gap-x-2">
-        <Checkbox_Shadcn_
+        <Checkbox
           id={value}
           checked={selectedOptions.includes(value)}
           onCheckedChange={() => {

apps/studio/components/ui/QueryBlock/BlockViewConfiguration.tsx

@@ -1,6 +1,6 @@
 import { BarChart2, Settings2, Table } from 'lucide-react'
 import {
-  Checkbox_Shadcn_,
+  Checkbox,
   Label_Shadcn_,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
@@ -109,7 +109,7 @@ export const BlockViewConfiguration = ({
 
               <div className="*:flex *:gap-2 *:items-center grid gap-2 *:text-foreground-light *:p-1.5 *:pl-0">
                 <Label_Shadcn_ htmlFor="cumulative">
-                  <Checkbox_Shadcn_
+                  <Checkbox
                     id="cumulative"
                     checked={chartConfig?.cumulative}
                     onClick={() =>
@@ -122,7 +122,7 @@ export const BlockViewConfiguration = ({
                   Cumulative
                 </Label_Shadcn_>
                 <Label_Shadcn_ htmlFor="logScale">
-                  <Checkbox_Shadcn_
+                  <Checkbox
                     id="logScale"
                     checked={chartConfig?.logScale}
                     onClick={() =>

apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'common'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { AWS_REGIONS } from 'shared-data'
 import { toast } from 'sonner'
-import { Alert, Button, Checkbox_Shadcn_, Input, Listbox } from 'ui'
+import { Alert, Button, Checkbox, Input, Listbox } from 'ui'
 
 import { isVercelUrl } from '@/components/interfaces/Integrations/Vercel/VercelIntegration.utils'
 import { Markdown } from '@/components/interfaces/Markdown'
@@ -307,7 +307,7 @@ const CreateProject = () => {
       </div>
       <div className="py-2 pb-4">
         <div className="items-top flex space-x-2">
-          <Checkbox_Shadcn_
+          <Checkbox
             id="shouldRunMigrations"
             name="shouldRunMigrations"
             checked={shouldRunMigrations}
@@ -329,7 +329,7 @@ const CreateProject = () => {
       </div>
       <div className="py-2 pb-4">
         <div className="items-top flex space-x-2">
-          <Checkbox_Shadcn_
+          <Checkbox
             id="dataApiDefaultPrivileges"
             name="dataApiDefaultPrivileges"
             checked={dataApiDefaultPrivileges}

apps/ui-library/components/theme-switcher-dropdown.tsx

@@ -12,7 +12,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  RadioGroup_Shadcn_,
+  RadioGroup,
   singleThemes,
   Theme,
 } from 'ui'
@@ -37,14 +37,14 @@ const ThemeSwitcherDropdown = () => {
   function SingleThemeSelection() {
     return (
       <form>
-        <RadioGroup_Shadcn_
+        <RadioGroup
           name="theme"
           onValueChange={setTheme}
           aria-label="Choose a theme"
           defaultValue={theme}
           value={theme}
           className="flex flex-wrap gap-3"
-        ></RadioGroup_Shadcn_>
+        ></RadioGroup>
       </form>
     )
   }

apps/www/pages/features.tsx

@@ -9,7 +9,7 @@ import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/compat/router'
 import Link from 'next/link'
 import React, { useCallback, useEffect, useState } from 'react'
-import { Button, Checkbox_Shadcn_ as Checkbox, cn, Input } from 'ui'
+import { Button, Checkbox, cn, Input } from 'ui'
 
 function FeaturesPage() {
   const router = useRouter()

packages/ui-patterns/src/form/FormLayout2.tsx

@@ -4,12 +4,12 @@ import { useForm } from 'react-hook-form'
 import {
   Badge,
   Button,
-  Checkbox_Shadcn_,
+  Checkbox,
   Form,
   FormControl,
   FormField,
-  RadioGroup_Shadcn_,
-  RadioGroupItem_Shadcn_,
+  RadioGroup,
+  RadioGroupItem,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -302,7 +302,7 @@ export const Page = () => {
                     layout="flex"
                   >
                     <FormControl>
-                      <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
+                      <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -343,7 +343,7 @@ export const Page = () => {
                               hideMessage
                             >
                               <FormControl>
-                                <Checkbox_Shadcn_
+                                <Checkbox
                                   checked={field.value?.includes(item.id)}
                                   onCheckedChange={(checked) => {
                                     return checked
@@ -377,7 +377,7 @@ export const Page = () => {
                     layout="horizontal"
                   >
                     <FormControl>
-                      <RadioGroup_Shadcn_
+                      <RadioGroup
                         onValueChange={field.onChange}
                         defaultValue={field.value}
                         className="flex flex-col space-y-1"
@@ -389,7 +389,7 @@ export const Page = () => {
                           hideMessage
                         >
                           <FormControl>
-                            <RadioGroupItem_Shadcn_ value="all" />
+                            <RadioGroupItem value="all" />
                           </FormControl>
                         </FormItemLayout>
                         <FormItemLayout
@@ -399,7 +399,7 @@ export const Page = () => {
                           hideMessage
                         >
                           <FormControl>
-                            <RadioGroupItem_Shadcn_ value="mentions" />
+                            <RadioGroupItem value="mentions" />
                           </FormControl>
                         </FormItemLayout>
                         <FormItemLayout
@@ -409,10 +409,10 @@ export const Page = () => {
                           hideMessage
                         >
                           <FormControl>
-                            <RadioGroupItem_Shadcn_ value="none" />
+                            <RadioGroupItem value="none" />
                           </FormControl>
                         </FormItemLayout>
-                      </RadioGroup_Shadcn_>
+                      </RadioGroup>
                     </FormControl>
                   </FormItemLayout>
                 )}

packages/ui/index.tsx

@@ -158,11 +158,7 @@ export {
   SelectScrollDownButton as SelectScrollDownButton_Shadcn_,
 } from './src/components/shadcn/ui/select'
 
-export {
-  RadioGroup as RadioGroup_Shadcn_,
-  RadioGroupItem as RadioGroupItem_Shadcn_,
-  RadioGroupLargeItem as RadioGroupLargeItem_Shadcn_,
-} from './src/components/shadcn/ui/radio-group'
+export * from './src/components/shadcn/ui/radio-group'
 
 export { Slider as Slider_Shadcn_ } from './src/components/shadcn/ui/slider'
 
@@ -190,7 +186,7 @@ export * from './src/components/shadcn/ui/input-group'
 
 export * from './src/components/shadcn/ui/switch'
 
-export { Checkbox as Checkbox_Shadcn_ } from './src/components/shadcn/ui/checkbox'
+export * from './src/components/shadcn/ui/checkbox'
 
 export * from './src/components/shadcn/ui/scroll-area'