diff --git a/.claude/skills/studio-ui-patterns/SKILL.md b/.claude/skills/studio-ui-patterns/SKILL.md
index 85acab8a14..2a67de2bee 100644
--- a/.claude/skills/studio-ui-patterns/SKILL.md
+++ b/.claude/skills/studio-ui-patterns/SKILL.md
@@ -34,7 +34,7 @@ Docs: `apps/design-system/content/docs/ui-patterns/forms.mdx`
 
 - Use `react-hook-form` + `zod`
 - Use `FormItemLayout` instead of manually composing `FormItem`/`FormLabel`/`FormMessage`/`FormDescription`
-- Wrap inputs with `FormControl_Shadcn_`; use `_Shadcn_` imports from `ui` for primitives
+- Wrap inputs with `FormControl`; use `_Shadcn_` imports from `ui` for primitives
 
 Layout selection:
 
diff --git a/apps/design-system/content/docs/components/switch.mdx b/apps/design-system/content/docs/components/switch.mdx
index 6e7ec2d1f7..958b3fe49f 100644
--- a/apps/design-system/content/docs/components/switch.mdx
+++ b/apps/design-system/content/docs/components/switch.mdx
@@ -66,13 +66,13 @@ When using Switch in custom flex layouts (especially with height constraints lik
 
 ```tsx
 <div className="relative">
-  <FormField_Shadcn_
+  <FormField
     control={form.control}
     name="enabled"
     render={({ field }) => (
-      <FormControl_Shadcn_>
+      <FormControl>
         <Switch checked={field.value} onCheckedChange={field.onChange} />
-      </FormControl_Shadcn_>
+      </FormControl>
     )}
   />
 </div>
diff --git a/apps/design-system/content/docs/fragments/form-item-layout.mdx b/apps/design-system/content/docs/fragments/form-item-layout.mdx
index dfa5402563..be0b886d09 100644
--- a/apps/design-system/content/docs/fragments/form-item-layout.mdx
+++ b/apps/design-system/content/docs/fragments/form-item-layout.mdx
@@ -21,27 +21,27 @@ The styling and layout of these components can be customized by passing in the c
 The components that can be replaced in `react-hook-form` atoms are highlighted below:
 
 ```tsx showLineNumbers {1-2,6-8}
-<FormItem_Shadcn_>
-  <FormLabel_Shadcn_>Username</FormLabel_Shadcn_>
-  <FormControl_Shadcn_>
+<FormItem>
+  <FormLabel>Username</FormLabel>
+  <FormControl>
     <Input placeholder="shadcn" {...field} />
-  </FormControl_Shadcn_>
-  <FormDescription_Shadcn_>This is your public display name.</FormDescription_Shadcn_>
-  <FormMessage_Shadcn_ />
-</FormItem_Shadcn_>
+  </FormControl>
+  <FormDescription>This is your public display name.</FormDescription>
+  <FormMessage />
+</FormItem>
 ```
 
 Using `FormItemLayout` it can look like this:
 
 ```tsx
 <FormItemLayout label="Username" description="This is your public display name">
-  <FormControl_Shadcn_>
+  <FormControl>
     <Input placeholder="mildtomato" {...field} />
-  </FormControl_Shadcn_>
+  </FormControl>
 </FormItemLayout>
 ```
 
-Please note that you must still use `FormControl_Shadcn_` to wrap input fields.
+Please note that you must still use `FormControl` to wrap input fields.
 
 ## Examples
 
diff --git a/apps/design-system/content/docs/ui-patterns/forms.mdx b/apps/design-system/content/docs/ui-patterns/forms.mdx
index 33097def25..305231b796 100644
--- a/apps/design-system/content/docs/ui-patterns/forms.mdx
+++ b/apps/design-system/content/docs/ui-patterns/forms.mdx
@@ -51,7 +51,7 @@ Build a custom row when the cells are mixed controls, such as an input paired wi
    - Use `layout="horizontal"` for side panels with more width
    - Use `layout="vertical"` for side panels with limited width
 
-3. **Wrap inputs in FormControl*Shadcn***: Always wrap form inputs with `FormControl_Shadcn_` to ensure proper form integration.
+3. **Wrap inputs in FormControl*Shadcn***: Always wrap form inputs with `FormControl` to ensure proper form integration.
 
 4. **Use Cards for grouping**: Wrap form sections in `Card` components with `CardContent` and `CardFooter` for actions.
 
diff --git a/apps/design-system/registry/default/example/calendar-form.tsx b/apps/design-system/registry/default/example/calendar-form.tsx
index 4e88bb391c..aaad24692e 100644
--- a/apps/design-system/registry/default/example/calendar-form.tsx
+++ b/apps/design-system/registry/default/example/calendar-form.tsx
@@ -8,13 +8,13 @@ import { toast } from 'sonner'
 import {
   Button,
   Calendar,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -45,17 +45,17 @@ export default function CalendarForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="dob"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="flex flex-col">
-              <FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
               <Popover_Shadcn_>
                 <PopoverTrigger_Shadcn_ asChild>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Button
                       type={'default'}
                       size="small"
@@ -67,7 +67,7 @@ export default function CalendarForm() {
                     >
                       {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
                     </Button>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </PopoverTrigger_Shadcn_>
                 <PopoverContent_Shadcn_ className="w-auto p-0" align="start" side="right">
                   <Calendar
@@ -79,15 +79,13 @@ export default function CalendarForm() {
                   />
                 </PopoverContent_Shadcn_>
               </Popover_Shadcn_>
-              <FormDescription_Shadcn_>
-                Your date of birth is used to calculate your age.
-              </FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              <FormDescription>Your date of birth is used to calculate your age.</FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
index c5f155210b..fbe9c6685e 100644
--- a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
+++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
@@ -8,13 +8,13 @@ import { toast } from 'sonner'
 import {
   Button,
   Calendar,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -45,17 +45,17 @@ export default function CalendarForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="dob"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="flex flex-col">
-              <FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
               <Popover_Shadcn_>
                 <PopoverTrigger_Shadcn_ asChild>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Button
                       type={'outline'}
                       className={cn(
@@ -66,7 +66,7 @@ export default function CalendarForm() {
                       {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
                       <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                     </Button>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </PopoverTrigger_Shadcn_>
                 <PopoverContent_Shadcn_ className="w-auto p-0" align="start">
                   <Calendar
@@ -78,15 +78,13 @@ export default function CalendarForm() {
                   />
                 </PopoverContent_Shadcn_>
               </Popover_Shadcn_>
-              <FormDescription_Shadcn_>
-                Your date of birth is used to calculate your age.
-              </FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              <FormDescription>Your date of birth is used to calculate your age.</FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
index e2667e7364..f7e8d4e40e 100644
--- a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
@@ -6,13 +6,13 @@ import { toast } from 'sonner'
 import {
   Button,
   Checkbox_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from 'ui'
 import { z } from 'zod'
 
@@ -68,31 +68,31 @@ export default function CheckboxReactHookFormMultiple() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="items"
           render={() => (
-            <FormItem_Shadcn_>
+            <FormItem>
               <div className="mb-4">
-                <FormLabel_Shadcn_ className="text-base">Sidebar</FormLabel_Shadcn_>
-                <FormDescription_Shadcn_>
+                <FormLabel className="text-base">Sidebar</FormLabel>
+                <FormDescription>
                   Select the items you want to display in the sidebar.
-                </FormDescription_Shadcn_>
+                </FormDescription>
               </div>
               {items.map((item) => (
-                <FormField_Shadcn_
+                <FormField
                   key={item.id}
                   control={form.control}
                   name="items"
                   render={({ field }) => {
                     return (
-                      <FormItem_Shadcn_
+                      <FormItem
                         key={item.id}
                         className="flex flex-row items-start space-x-3 space-y-0"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Checkbox_Shadcn_
                             checked={field.value?.includes(item.id)}
                             onCheckedChange={(checked) => {
@@ -101,19 +101,19 @@ export default function CheckboxReactHookFormMultiple() {
                                 : field.onChange(field.value?.filter((value) => value !== item.id))
                             }}
                           />
-                        </FormControl_Shadcn_>
-                        <FormLabel_Shadcn_ className="font-normal">{item.label}</FormLabel_Shadcn_>
-                      </FormItem_Shadcn_>
+                        </FormControl>
+                        <FormLabel className="font-normal">{item.label}</FormLabel>
+                      </FormItem>
                     )
                   }}
                 />
               ))}
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/checkbox-form-single.tsx b/apps/design-system/registry/default/example/checkbox-form-single.tsx
index 928c4b29e5..48d9ec938a 100644
--- a/apps/design-system/registry/default/example/checkbox-form-single.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx
@@ -7,12 +7,12 @@ import { toast } from 'sonner'
 import {
   Button,
   Checkbox_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
 } from 'ui'
 import { z } from 'zod'
 
@@ -39,28 +39,28 @@ export default function CheckboxReactHookFormSingle() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="mobile"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-              <FormControl_Shadcn_>
+            <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} />
-              </FormControl_Shadcn_>
+              </FormControl>
               <div className="space-y-1 leading-none">
-                <FormLabel_Shadcn_>Use different settings for my mobile devices</FormLabel_Shadcn_>
-                <FormDescription_Shadcn_>
+                <FormLabel>Use different settings for my mobile devices</FormLabel>
+                <FormDescription>
                   You can manage your mobile notifications in the{' '}
                   <Link href="/examples/forms">mobile settings</Link> page.
-                </FormDescription_Shadcn_>
+                </FormDescription>
               </div>
-            </FormItem_Shadcn_>
+            </FormItem>
           )}
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx
index 4a9670fb43..edf9116104 100644
--- a/apps/design-system/registry/default/example/combobox-form.tsx
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -12,13 +12,13 @@ import {
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -61,17 +61,17 @@ export default function ComboboxForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="language"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="flex flex-col">
-              <FormLabel_Shadcn_>Language</FormLabel_Shadcn_>
+            <FormItem className="flex flex-col">
+              <FormLabel>Language</FormLabel>
               <Popover_Shadcn_>
                 <PopoverTrigger_Shadcn_ asChild>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Button
                       type="default"
                       role="combobox"
@@ -91,7 +91,7 @@ export default function ComboboxForm() {
                         ? languages.find((language) => language.value === field.value)?.label
                         : 'Select language'}
                     </Button>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </PopoverTrigger_Shadcn_>
                 <PopoverContent_Shadcn_ className="w-[200px] p-0">
                   <Command_Shadcn_>
@@ -121,17 +121,17 @@ export default function ComboboxForm() {
                   </Command_Shadcn_>
                 </PopoverContent_Shadcn_>
               </Popover_Shadcn_>
-              <FormDescription_Shadcn_>
+              <FormDescription>
                 This is the language that will be used in the dashboard.
-              </FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit" type="secondary" size="small">
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/confirmation-modal-demo.tsx b/apps/design-system/registry/default/example/confirmation-modal-demo.tsx
index dc1d91e32d..e3d46a8e84 100644
--- a/apps/design-system/registry/default/example/confirmation-modal-demo.tsx
+++ b/apps/design-system/registry/default/example/confirmation-modal-demo.tsx
@@ -2,9 +2,9 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -46,13 +46,13 @@ export default function ConfirmationModalDemo() {
           </p>
           {/* Dropdown for Postgres version */}
           <div className="pt-4">
-            <Form_Shadcn_ {...form}>
-              <FormField_Shadcn_
+            <Form {...form}>
+              <FormField
                 control={form.control}
                 name="postgresVersion"
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label="Postgres version">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                         <SelectTrigger_Shadcn_>
                           <SelectValue_Shadcn_ />
@@ -62,11 +62,11 @@ export default function ConfirmationModalDemo() {
                           <SelectItem_Shadcn_ value="17.6.1.055">17.6.1.055</SelectItem_Shadcn_>
                         </SelectContent_Shadcn_>
                       </Select_Shadcn_>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-            </Form_Shadcn_>
+            </Form>
           </div>
         </div>
       </ConfirmationModal>
diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx
index 94c59f6997..0f81cc719b 100644
--- a/apps/design-system/registry/default/example/date-picker-form.tsx
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -8,13 +8,13 @@ import { toast } from 'sonner'
 import {
   Button,
   Calendar,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -45,17 +45,17 @@ export default function DatePickerForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="dob"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="flex flex-col">
-              <FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
               <Popover_Shadcn_>
                 <PopoverTrigger_Shadcn_ asChild>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Button
                       type={'outline'}
                       className={cn(
@@ -66,7 +66,7 @@ export default function DatePickerForm() {
                     >
                       {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
                     </Button>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </PopoverTrigger_Shadcn_>
                 <PopoverContent_Shadcn_ className="w-auto p-0" align="start">
                   <Calendar
@@ -78,15 +78,13 @@ export default function DatePickerForm() {
                   />
                 </PopoverContent_Shadcn_>
               </Popover_Shadcn_>
-              <FormDescription_Shadcn_>
-                Your date of birth is used to calculate your age.
-              </FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              <FormDescription>Your date of birth is used to calculate your age.</FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-after-label.tsx b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
index f0993f2cc6..bd0fbcfcab 100644
--- a/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { Button, Form, FormControl, FormField, Switch } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
@@ -24,9 +24,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="functionName"
           render={({ field }) => (
@@ -36,9 +36,9 @@ export default function FormItemLayoutDemo() {
               labelOptional="Optional"
               afterLabel={<InfoTooltip side="top">Added after the label</InfoTooltip>}
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input placeholder="Name of function" {...field} />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -46,6 +46,6 @@ export default function FormItemLayoutDemo() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-before-label.tsx b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
index ee4487f147..a3c7813ec3 100644
--- a/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { Button, Form, FormControl, FormField, Switch } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
@@ -24,9 +24,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="functionName"
           render={({ field }) => (
@@ -36,9 +36,9 @@ export default function FormItemLayoutDemo() {
               labelOptional="Optional"
               beforeLabel={<InfoTooltip side="top">Added before the label</InfoTooltip>}
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input placeholder="Name of function" {...field} />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -46,6 +46,6 @@ export default function FormItemLayoutDemo() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-demo.tsx b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
index ba35f52e28..6adef61bc1 100644
--- a/apps/design-system/registry/default/example/form-item-layout-demo.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { Button, Form, FormControl, FormField } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
@@ -28,9 +28,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           name="username"
           control={form.control}
           render={({ field }) => (
@@ -39,9 +39,9 @@ export default function FormItemLayoutDemo() {
               description="This is your public display name"
               labelOptional="optional"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input placeholder="mildtomato" {...field} />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -49,6 +49,6 @@ export default function FormItemLayoutDemo() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
index ff215787a1..0313425759 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
+++ b/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_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { Button, Checkbox_Shadcn_, Form, FormControl, FormField } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
 
@@ -51,9 +51,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="items"
           render={() => (
@@ -63,7 +63,7 @@ export default function FormItemLayoutDemo() {
               layout="horizontal"
             >
               {items.map((item) => (
-                <FormField_Shadcn_
+                <FormField
                   key={item.id}
                   control={form.control}
                   name="items"
@@ -76,7 +76,7 @@ export default function FormItemLayoutDemo() {
                         layout="flex"
                         hideMessage
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Checkbox_Shadcn_
                             checked={field.value?.includes(item.id)}
                             onCheckedChange={(checked) => {
@@ -85,7 +85,7 @@ export default function FormItemLayoutDemo() {
                                 : field.onChange(field.value?.filter((value) => value !== item.id))
                             }}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )
                   }}
@@ -99,6 +99,6 @@ export default function FormItemLayoutDemo() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
index a21de03539..0edf170445 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
@@ -1,13 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import {
-  Badge,
-  Button,
-  Checkbox_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-} from 'ui'
+import { Badge, Button, Checkbox_Shadcn_, Form, FormControl, FormField } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
 
@@ -29,9 +22,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="consistent_settings"
           render={({ field }) => (
@@ -40,9 +33,9 @@ export default function FormItemLayoutDemo() {
               description="This is your public display name."
               layout="flex"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -50,6 +43,6 @@ export default function FormItemLayoutDemo() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
index 9d0471d8b8..73cf02f14b 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Separator } from 'ui'
+import { Button, Form, FormControl, FormField, Separator } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
@@ -28,9 +28,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-[520px] flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           name="username"
           control={form.control}
           render={({ field }) => (
@@ -40,9 +40,9 @@ export default function FormItemLayoutDemo() {
               description="This is your public display name"
               labelOptional="optional"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input placeholder="mildtomato" {...field} />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -53,6 +53,6 @@ export default function FormItemLayoutDemo() {
           </Button>
         </div>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-select.tsx b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
index 22ae206dc4..21ec964274 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
@@ -2,9 +2,9 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -36,9 +36,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           name="email"
           control={form.control}
           render={({ field }) => (
@@ -48,11 +48,11 @@ export default function FormItemLayoutDemo() {
               labelOptional="Optional"
             >
               <Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl_Shadcn_>
+                <FormControl>
                   <SelectTrigger_Shadcn_>
                     <SelectValue_Shadcn_ placeholder="Select a verified email to display" />
                   </SelectTrigger_Shadcn_>
-                </FormControl_Shadcn_>
+                </FormControl>
                 <SelectContent_Shadcn_>
                   <SelectItem_Shadcn_ value="m@example.com">m@example.com</SelectItem_Shadcn_>
                   <SelectItem_Shadcn_ value="m@google.com">m@google.com</SelectItem_Shadcn_>
@@ -66,6 +66,6 @@ export default function FormItemLayoutDemo() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
index 0e2c373502..f0bd8a5f99 100644
--- a/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
+++ b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { Button, Form, FormControl, FormField, Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
 
@@ -22,9 +22,9 @@ export default function FormItemLayoutDemo() {
     // action('form form.handleSubmit(onSubmit)')(values)
   }
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="switch_option"
           render={({ field }) => (
@@ -34,9 +34,9 @@ export default function FormItemLayoutDemo() {
               description="This is an explanation."
               layout="flex"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Switch checked={field.value} onCheckedChange={field.onChange} />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -44,6 +44,6 @@ export default function FormItemLayoutDemo() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
index b95b8c91c3..9d8b1008b2 100644
--- a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
@@ -10,9 +10,9 @@ import {
   CardContent,
   CardFooter,
   Checkbox_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   FormInputGroupTextArea,
   Input_Shadcn_,
@@ -133,12 +133,12 @@ export default function FormPatternsPageLayout() {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <Card>
                 {/* Text Input */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="name"
                     render={({ field }) => (
@@ -147,9 +147,9 @@ export default function FormPatternsPageLayout() {
                         label="Text Input"
                         description="Single-line text entry for short values"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_ {...field} placeholder="Enter text" />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -157,7 +157,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Password Input */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="password"
                     render={({ field }) => (
@@ -166,9 +166,9 @@ export default function FormPatternsPageLayout() {
                         label="Password Input"
                         description="Masked input for secure text entry"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_ {...field} type="password" placeholder="Enter password" />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -176,7 +176,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Copyable Input */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="apiKey"
                     render={() => (
@@ -185,7 +185,7 @@ export default function FormPatternsPageLayout() {
                         label="Copyable Input"
                         description="Read-only input with copy-to-clipboard functionality"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input
                             copy
                             readOnly
@@ -193,7 +193,7 @@ export default function FormPatternsPageLayout() {
                             onChange={() => {}}
                             onCopy={() => console.log('Copied to clipboard')}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -201,7 +201,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Number Input */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="maxConnections"
                     render={({ field }) => (
@@ -210,7 +210,7 @@ export default function FormPatternsPageLayout() {
                         label="Number Input"
                         description="Numeric input with min/max validation"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_
                             {...field}
                             type="number"
@@ -218,7 +218,7 @@ export default function FormPatternsPageLayout() {
                             max={1000}
                             onChange={(e) => field.onChange(Number(e.target.value))}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -226,7 +226,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Input with Units */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="duration"
                     render={({ field }) => (
@@ -235,7 +235,7 @@ export default function FormPatternsPageLayout() {
                         label="Input with Units"
                         description="Input with additional unit label"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <InputGroup>
                             <FormInputGroupInput
                               {...field}
@@ -248,7 +248,7 @@ export default function FormPatternsPageLayout() {
                               <InputGroupText className="font-mono">MB</InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -256,7 +256,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Textarea */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="description"
                     render={({ field }) => (
@@ -265,14 +265,14 @@ export default function FormPatternsPageLayout() {
                         label="Textarea"
                         description="Multi-line text input for longer content"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Textarea
                             {...field}
                             rows={4}
                             placeholder="Enter multi-line text"
                             className="resize-none"
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -280,7 +280,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Textarea with addon */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="description"
                     render={({ field }) => (
@@ -289,7 +289,7 @@ export default function FormPatternsPageLayout() {
                         label="Textarea"
                         description="Multi-line text input for longer content with addon"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <InputGroup>
                             <FormInputGroupTextArea
                               {...field}
@@ -301,7 +301,7 @@ export default function FormPatternsPageLayout() {
                               <InputGroupText>120 characters left</InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -309,7 +309,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Icon Upload */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="description"
                     render={() => (
@@ -318,7 +318,7 @@ export default function FormPatternsPageLayout() {
                         label="Icon upload"
                         description="For icons, avatars, or small images with preview"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <div className="flex gap-4 items-center">
                             <button
                               type="button"
@@ -367,7 +367,7 @@ export default function FormPatternsPageLayout() {
                               }}
                             />
                           </div>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -375,7 +375,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* File Upload */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="description"
                     render={() => (
@@ -384,7 +384,7 @@ export default function FormPatternsPageLayout() {
                         label="File Upload"
                         description="Drag-and-drop or select files for upload"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <div
                             className={`border-2 rounded-lg p-6 text-center bg-muted transition-colors duration-300 ${
                               isDragging
@@ -460,7 +460,7 @@ export default function FormPatternsPageLayout() {
                               )}
                             </div>
                           </div>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -468,7 +468,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Switch */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="enableFeature"
                     render={({ field }) => (
@@ -477,9 +477,9 @@ export default function FormPatternsPageLayout() {
                         label="Switch"
                         description="Toggle for boolean on/off states"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch checked={field.value} onCheckedChange={field.onChange} />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -493,18 +493,18 @@ export default function FormPatternsPageLayout() {
                     description="Boolean values or multiple selections"
                   >
                     <div className="w-full flex flex-col gap-4">
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="enableRls"
                         render={({ field }) => (
                           <div className="flex items-center w-full justify-start space-x-2">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Checkbox_Shadcn_
                                 id="enable-rls"
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                             <label
                               htmlFor="enable-rls"
                               className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -514,18 +514,18 @@ export default function FormPatternsPageLayout() {
                           </div>
                         )}
                       />
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="enableNotifications"
                         render={({ field }) => (
                           <div className="flex items-center w-full justify-start space-x-2">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Checkbox_Shadcn_
                                 id="enable-notifications"
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                             <label
                               htmlFor="enable-notifications"
                               className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -535,18 +535,18 @@ export default function FormPatternsPageLayout() {
                           </div>
                         )}
                       />
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="enableAnalytics"
                         render={({ field }) => (
                           <div className="flex items-center w-full justify-start space-x-2">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Checkbox_Shadcn_
                                 id="enable-analytics"
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                             <label
                               htmlFor="enable-analytics"
                               className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -562,7 +562,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Select */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="region"
                     render={({ field }) => (
@@ -571,7 +571,7 @@ export default function FormPatternsPageLayout() {
                         label="Select (Dropdown)"
                         description="Single selection from a list of options"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                             <SelectTrigger_Shadcn_>
                               <SelectValue_Shadcn_ placeholder="Select an option" />
@@ -588,7 +588,7 @@ export default function FormPatternsPageLayout() {
                               </SelectItem_Shadcn_>
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -596,7 +596,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Multi-Select */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="schemas"
                     render={({ field }) => (
@@ -633,7 +633,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Radio Group */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="queueType"
                     render={({ field }) => (
@@ -642,7 +642,7 @@ export default function FormPatternsPageLayout() {
                         label="Radio Group"
                         description="Single selection from multiple options"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <RadioGroupStacked value={field.value} onValueChange={field.onChange}>
                             <RadioGroupStackedItem
                               value="basic"
@@ -655,7 +655,7 @@ export default function FormPatternsPageLayout() {
                               description="Second option description"
                             />
                           </RadioGroupStacked>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -663,7 +663,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Date Picker */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="expiryDate"
                     render={({ field }) => (
@@ -672,7 +672,7 @@ export default function FormPatternsPageLayout() {
                         label="Date Picker"
                         description="Date selection with calendar popover"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Popover_Shadcn_>
                             <PopoverTrigger_Shadcn_ asChild>
                               <Button
@@ -692,7 +692,7 @@ export default function FormPatternsPageLayout() {
                               />
                             </PopoverContent_Shadcn_>
                           </Popover_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -700,7 +700,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Field Array */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="redirectUris"
                     render={() => (
@@ -725,7 +725,7 @@ export default function FormPatternsPageLayout() {
 
                 {/* Key/Value Field Array */}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="httpHeaders"
                     render={() => (
@@ -783,7 +783,7 @@ export default function FormPatternsPageLayout() {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
     </div>
diff --git a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
index 994da00ebb..3edd689ac8 100644
--- a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
@@ -7,9 +7,9 @@ import {
   Button,
   Calendar,
   Checkbox_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   Input_Shadcn_,
   InputGroup,
@@ -135,7 +135,7 @@ export default function FormPatternsSidePanel() {
           <SheetHeader>
             <SheetTitle>Create Configuration</SheetTitle>
           </SheetHeader>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={formId}
               onSubmit={form.handleSubmit(onSubmit)}
@@ -143,7 +143,7 @@ export default function FormPatternsSidePanel() {
             >
               {/* Text Input */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="name"
                   render={({ field }) => (
@@ -152,9 +152,9 @@ export default function FormPatternsSidePanel() {
                       label="Text Input"
                       description="Single-line text entry for short values"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Input_Shadcn_ {...field} placeholder="Enter text" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -164,7 +164,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Password Input */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="password"
                   render={({ field }) => (
@@ -173,9 +173,9 @@ export default function FormPatternsSidePanel() {
                       label="Password Input"
                       description="Masked input for secure text entry"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Input_Shadcn_ {...field} type="password" placeholder="Enter password" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -185,7 +185,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Copyable Input */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="apiKey"
                   render={() => (
@@ -194,7 +194,7 @@ export default function FormPatternsSidePanel() {
                       label="Copyable Input"
                       description="Read-only input with copy-to-clipboard functionality"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Input
                           copy
                           readOnly
@@ -203,7 +203,7 @@ export default function FormPatternsSidePanel() {
                           onChange={() => {}}
                           onCopy={() => console.log('Copied to clipboard')}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -213,7 +213,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Number Input */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="maxConnections"
                   render={({ field }) => (
@@ -222,7 +222,7 @@ export default function FormPatternsSidePanel() {
                       label="Number Input"
                       description="Numeric input with min/max validation"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Input_Shadcn_
                           {...field}
                           type="number"
@@ -230,7 +230,7 @@ export default function FormPatternsSidePanel() {
                           max={1000}
                           onChange={(e) => field.onChange(Number(e.target.value))}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -240,7 +240,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Input with Units */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="duration"
                   render={({ field }) => (
@@ -249,14 +249,14 @@ export default function FormPatternsSidePanel() {
                       label="Input with Units"
                       description="Input with additional unit label"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <InputGroup>
                           <FormInputGroupInput {...field} type="number" min={5} max={30} />
                           <InputGroupAddon align="inline-end">
                             <InputGroupText>MB</InputGroupText>
                           </InputGroupAddon>
                         </InputGroup>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -266,7 +266,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Textarea */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="description"
                   render={({ field }) => (
@@ -275,14 +275,14 @@ export default function FormPatternsSidePanel() {
                       label="Textarea"
                       description="Multi-line text input for longer content"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Textarea
                           {...field}
                           rows={3}
                           placeholder="Enter multi-line text"
                           className="resize-none"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -292,7 +292,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Icon Upload */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="description"
                   render={() => (
@@ -301,7 +301,7 @@ export default function FormPatternsSidePanel() {
                       label="Icon upload"
                       description="For icons, avatars, or small images with preview"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <div className="flex gap-4 items-center">
                           <button
                             type="button"
@@ -350,7 +350,7 @@ export default function FormPatternsSidePanel() {
                             }}
                           />
                         </div>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -360,7 +360,7 @@ export default function FormPatternsSidePanel() {
 
               {/* File Upload */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="description"
                   render={() => (
@@ -369,7 +369,7 @@ export default function FormPatternsSidePanel() {
                       label="File Upload"
                       description="Drag-and-drop or select files for upload"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <div
                           className={`border-2 rounded-lg p-6 text-center bg-muted transition-colors duration-300 ${
                             isDragging
@@ -443,7 +443,7 @@ export default function FormPatternsSidePanel() {
                             )}
                           </div>
                         </div>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -453,7 +453,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Switch */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="enableFeature"
                   render={({ field }) => (
@@ -462,9 +462,9 @@ export default function FormPatternsSidePanel() {
                       label="Switch"
                       description="Toggle for boolean on/off states"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Switch checked={field.value} onCheckedChange={field.onChange} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -478,18 +478,18 @@ export default function FormPatternsSidePanel() {
                   description="Boolean values or multiple selections"
                 >
                   <div className="col-span-6 w-full flex flex-col gap-4">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="enableRls"
                       render={({ field }) => (
                         <div className="flex items-center w-full justify-start space-x-2">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Checkbox_Shadcn_
                               id="enable-rls"
                               checked={field.value}
                               onCheckedChange={field.onChange}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                           <label
                             htmlFor="enable-rls"
                             className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -499,18 +499,18 @@ export default function FormPatternsSidePanel() {
                         </div>
                       )}
                     />
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="enableNotifications"
                       render={({ field }) => (
                         <div className="flex items-center w-full justify-start space-x-2">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Checkbox_Shadcn_
                               id="enable-notifications"
                               checked={field.value}
                               onCheckedChange={field.onChange}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                           <label
                             htmlFor="enable-notifications"
                             className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -520,18 +520,18 @@ export default function FormPatternsSidePanel() {
                         </div>
                       )}
                     />
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="enableAnalytics"
                       render={({ field }) => (
                         <div className="flex items-center w-full justify-start space-x-2">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Checkbox_Shadcn_
                               id="enable-analytics"
                               checked={field.value}
                               onCheckedChange={field.onChange}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                           <label
                             htmlFor="enable-analytics"
                             className="text-sm text-foreground-light leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
@@ -549,7 +549,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Select */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="region"
                   render={({ field }) => (
@@ -558,7 +558,7 @@ export default function FormPatternsSidePanel() {
                       label="Select (Dropdown)"
                       description="Single selection from a list of options"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                           <SelectTrigger_Shadcn_>
                             <SelectValue_Shadcn_ placeholder="Select an option" />
@@ -575,7 +575,7 @@ export default function FormPatternsSidePanel() {
                             </SelectItem_Shadcn_>
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -585,7 +585,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Multi-Select */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="schemas"
                   render={({ field }) => (
@@ -627,7 +627,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Radio Group */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="queueType"
                   render={({ field }) => (
@@ -659,7 +659,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Date Picker */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="expiryDate"
                   render={({ field }) => (
@@ -668,7 +668,7 @@ export default function FormPatternsSidePanel() {
                       label="Date Picker"
                       description="Date selection with calendar popover"
                     >
-                      <FormControl_Shadcn_ className="col-span-6">
+                      <FormControl className="col-span-6">
                         <Popover_Shadcn_>
                           <PopoverTrigger_Shadcn_ asChild>
                             <Button
@@ -688,7 +688,7 @@ export default function FormPatternsSidePanel() {
                             />
                           </PopoverContent_Shadcn_>
                         </Popover_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -698,7 +698,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Field Array */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="redirectUris"
                   render={() => (
@@ -727,7 +727,7 @@ export default function FormPatternsSidePanel() {
 
               {/* Key/Value Field Array */}
               <SheetSection>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="httpHeaders"
                   render={() => (
@@ -778,7 +778,7 @@ export default function FormPatternsSidePanel() {
                 </FormItemLayout>
               </SheetSection>
             </form>
-          </Form_Shadcn_>
+          </Form>
           <SheetFooter>
             <Button
               type="default"
diff --git a/apps/design-system/registry/default/example/input-form.tsx b/apps/design-system/registry/default/example/input-form.tsx
index f3619b6dc2..d0d229600d 100644
--- a/apps/design-system/registry/default/example/input-form.tsx
+++ b/apps/design-system/registry/default/example/input-form.tsx
@@ -5,13 +5,13 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input,
 } from 'ui'
 import { z } from 'zod'
@@ -41,26 +41,26 @@ export default function InputForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="username"
           render={({ field }) => (
-            <FormItem_Shadcn_>
-              <FormLabel_Shadcn_>Username</FormLabel_Shadcn_>
-              <FormControl_Shadcn_>
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
                 <Input placeholder="shadcn" {...field} />
-              </FormControl_Shadcn_>
-              <FormDescription_Shadcn_>This is your public display name.</FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormControl>
+              <FormDescription>This is your public display name.</FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit" type="secondary">
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/input-otp-form.tsx b/apps/design-system/registry/default/example/input-otp-form.tsx
index 0adc0dbe29..8a76ba413b 100644
--- a/apps/design-system/registry/default/example/input-otp-form.tsx
+++ b/apps/design-system/registry/default/example/input-otp-form.tsx
@@ -5,13 +5,13 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
@@ -43,15 +43,15 @@ export default function InputOTPForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="pin"
           render={({ field }) => (
-            <FormItem_Shadcn_>
-              <FormLabel_Shadcn_>One-Time Password</FormLabel_Shadcn_>
-              <FormControl_Shadcn_>
+            <FormItem>
+              <FormLabel>One-Time Password</FormLabel>
+              <FormControl>
                 <InputOTP maxLength={6} {...field}>
                   <InputOTPGroup>
                     <InputOTPSlot index={0} />
@@ -62,17 +62,17 @@ export default function InputOTPForm() {
                     <InputOTPSlot index={5} />
                   </InputOTPGroup>
                 </InputOTP>
-              </FormControl_Shadcn_>
-              <FormDescription_Shadcn_>
+              </FormControl>
+              <FormDescription>
                 Please enter the one-time password sent to your phone.
-              </FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
 
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/key-value-field-array-demo.tsx b/apps/design-system/registry/default/example/key-value-field-array-demo.tsx
index d8b6af42c6..ba214ed192 100644
--- a/apps/design-system/registry/default/example/key-value-field-array-demo.tsx
+++ b/apps/design-system/registry/default/example/key-value-field-array-demo.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_ } from 'ui'
+import { Button, Form } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
 import { getKeyValueFieldArrayValidationIssues } from 'ui-patterns/form/KeyValueFieldArray/validation'
@@ -44,7 +44,7 @@ export default function KeyValueFieldArrayDemo() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-full max-w-2xl" onSubmit={form.handleSubmit(onSubmit)}>
         <FormItemLayout
           label="HTTP headers"
@@ -69,6 +69,6 @@ export default function KeyValueFieldArrayDemo() {
           </Button>
         </div>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/page-layout-settings.tsx b/apps/design-system/registry/default/example/page-layout-settings.tsx
index 099aba1823..2eadf93278 100644
--- a/apps/design-system/registry/default/example/page-layout-settings.tsx
+++ b/apps/design-system/registry/default/example/page-layout-settings.tsx
@@ -5,9 +5,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
@@ -96,11 +96,11 @@ export default function PageLayoutSettings() {
             </PageSectionSummary>
           </PageSectionMeta>
           <PageSectionContent>
-            <Form_Shadcn_ {...refreshTokenForm}>
+            <Form {...refreshTokenForm}>
               <form className="space-y-4">
                 <Card>
                   <CardContent className="pt-6">
-                    <FormField_Shadcn_
+                    <FormField
                       control={refreshTokenForm.control}
                       name="REFRESH_TOKEN_ROTATION_ENABLED"
                       render={({ field }) => (
@@ -109,15 +109,15 @@ export default function PageLayoutSettings() {
                           label="Detect and revoke potentially compromised refresh tokens"
                           description="Prevent replay attacks from potentially compromised refresh tokens."
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Switch checked={field.value} onCheckedChange={field.onChange} />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
                   </CardContent>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={refreshTokenForm.control}
                       name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                       render={({ field }) => (
@@ -126,14 +126,14 @@ export default function PageLayoutSettings() {
                           label="Refresh token reuse interval"
                           description="Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds."
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <InputGroupAddon align="inline-end">
                                 <InputGroupText>seconds</InputGroupText>
                               </InputGroupAddon>
                               <InputGroupInput type="number" min={0} {...field} />
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -154,7 +154,7 @@ export default function PageLayoutSettings() {
                   </CardFooter>
                 </Card>
               </form>
-            </Form_Shadcn_>
+            </Form>
           </PageSectionContent>
         </PageSection>
 
@@ -168,11 +168,11 @@ export default function PageLayoutSettings() {
             </PageSectionSummary>
           </PageSectionMeta>
           <PageSectionContent>
-            <Form_Shadcn_ {...userSessionsForm}>
+            <Form {...userSessionsForm}>
               <form className="space-y-4">
                 <Card>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={userSessionsForm.control}
                       name="SESSIONS_SINGLE_PER_USER"
                       render={({ field }) => (
@@ -181,16 +181,16 @@ export default function PageLayoutSettings() {
                           label="Enforce single session per user"
                           description="If enabled, all but a user's most recently active session will be terminated."
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Switch checked={field.value} onCheckedChange={field.onChange} />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
                   </CardContent>
 
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={userSessionsForm.control}
                       name="SESSIONS_TIMEBOX"
                       render={({ field }) => (
@@ -200,7 +200,7 @@ export default function PageLayoutSettings() {
                           description="The amount of time before a user is forced to sign in again. Use 0 for never."
                         >
                           <div className="flex items-center">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <InputGroupAddon align="inline-end">
                                   <InputGroupText>
@@ -209,7 +209,7 @@ export default function PageLayoutSettings() {
                                 </InputGroupAddon>
                                 <InputGroupInput type="number" min={0} {...field} />
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </div>
                         </FormItemLayout>
                       )}
@@ -217,7 +217,7 @@ export default function PageLayoutSettings() {
                   </CardContent>
 
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={userSessionsForm.control}
                       name="SESSIONS_INACTIVITY_TIMEOUT"
                       render={({ field }) => (
@@ -227,7 +227,7 @@ export default function PageLayoutSettings() {
                           description="The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never."
                         >
                           <div className="flex items-center">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <InputGroupAddon align="inline-end">
                                   <InputGroupText>
@@ -236,7 +236,7 @@ export default function PageLayoutSettings() {
                                 </InputGroupAddon>
                                 <InputGroupInput type="number" {...field} />
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </div>
                         </FormItemLayout>
                       )}
@@ -259,7 +259,7 @@ export default function PageLayoutSettings() {
                   </CardFooter>
                 </Card>
               </form>
-            </Form_Shadcn_>
+            </Form>
           </PageSectionContent>
         </PageSection>
       </PageContainer>
diff --git a/apps/design-system/registry/default/example/radio-group-card-form.tsx b/apps/design-system/registry/default/example/radio-group-card-form.tsx
index bc914a7c91..1987aaca02 100644
--- a/apps/design-system/registry/default/example/radio-group-card-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-card-form.tsx
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   RadioGroupCard,
   RadioGroupCardItem,
 } from 'ui'
@@ -39,45 +39,45 @@ export default function RadioGroupForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="type"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="space-y-4">
-              <FormLabel_Shadcn_>Notify me about...</FormLabel_Shadcn_>
-              <FormControl_Shadcn_>
+            <FormItem className="space-y-4">
+              <FormLabel>Notify me about...</FormLabel>
+              <FormControl>
                 <RadioGroupCard
                   onValueChange={field.onChange}
                   defaultValue={field.value}
                   className="flex flex-wrap gap-3"
                 >
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                  <FormItem asChild>
+                    <FormControl>
                       <RadioGroupCardItem value="all" label="All new messages" />
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                    </FormControl>
+                  </FormItem>
+                  <FormItem asChild>
+                    <FormControl>
                       <RadioGroupCardItem value="mentions" label="Direct messages and mentions" />
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                    </FormControl>
+                  </FormItem>
+                  <FormItem asChild>
+                    <FormControl>
                       <RadioGroupCardItem value="none" label="Nothing" />
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                  </FormItem>
                 </RadioGroupCard>
-              </FormControl_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit" type="secondary" size="small">
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/radio-group-form.tsx b/apps/design-system/registry/default/example/radio-group-form.tsx
index fe9bf3b84d..62de2da36e 100644
--- a/apps/design-system/registry/default/example/radio-group-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-form.tsx
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   RadioGroup_Shadcn_,
   RadioGroupItem_Shadcn_,
 } from 'ui'
@@ -38,48 +38,46 @@ export default function RadioGroupForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="type"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="space-y-3">
-              <FormLabel_Shadcn_>Notify me about...</FormLabel_Shadcn_>
-              <FormControl_Shadcn_>
+            <FormItem className="space-y-3">
+              <FormLabel>Notify me about...</FormLabel>
+              <FormControl>
                 <RadioGroup_Shadcn_
                   onValueChange={field.onChange}
                   defaultValue={field.value}
                   className="flex flex-col space-y-1"
                 >
-                  <FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
-                    <FormControl_Shadcn_>
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
                       <RadioGroupItem_Shadcn_ value="all" />
-                    </FormControl_Shadcn_>
-                    <FormLabel_Shadcn_ className="font-normal">All new messages</FormLabel_Shadcn_>
-                  </FormItem_Shadcn_>
-                  <FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
-                    <FormControl_Shadcn_>
+                    </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" />
-                    </FormControl_Shadcn_>
-                    <FormLabel_Shadcn_ className="font-normal">
-                      Direct messages and mentions
-                    </FormLabel_Shadcn_>
-                  </FormItem_Shadcn_>
-                  <FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
-                    <FormControl_Shadcn_>
+                    </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" />
-                    </FormControl_Shadcn_>
-                    <FormLabel_Shadcn_ className="font-normal">Nothing</FormLabel_Shadcn_>
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormLabel className="font-normal">Nothing</FormLabel>
+                  </FormItem>
                 </RadioGroup_Shadcn_>
-              </FormControl_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
index 57eab837c7..ef1a4df1cf 100644
--- a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   RadioGroupStacked,
   RadioGroupStackedItem,
 } from 'ui'
@@ -39,44 +39,44 @@ export default function RadioGroupForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="type"
           render={({ field }) => (
-            <FormItem_Shadcn_ className="space-y-4">
-              <FormLabel_Shadcn_>Notify me about...</FormLabel_Shadcn_>
-              <FormControl_Shadcn_>
+            <FormItem className="space-y-4">
+              <FormLabel>Notify me about...</FormLabel>
+              <FormControl>
                 <RadioGroupStacked onValueChange={field.onChange} defaultValue={field.value}>
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                  <FormItem asChild>
+                    <FormControl>
                       <RadioGroupStackedItem value="all" label="All new messages" />
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                    </FormControl>
+                  </FormItem>
+                  <FormItem asChild>
+                    <FormControl>
                       <RadioGroupStackedItem
                         value="mentions"
                         label="Direct messages and mentions"
                       />
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                    </FormControl>
+                  </FormItem>
+                  <FormItem asChild>
+                    <FormControl>
                       <RadioGroupStackedItem value="none" label="Nothing" />
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                  </FormItem>
                 </RadioGroupStacked>
-              </FormControl_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit" type="secondary" size="small">
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/select-form.tsx b/apps/design-system/registry/default/example/select-form.tsx
index 3fed870c7f..b08c4a2edd 100644
--- a/apps/design-system/registry/default/example/select-form.tsx
+++ b/apps/design-system/registry/default/example/select-form.tsx
@@ -6,13 +6,13 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -45,38 +45,38 @@ export default function SelectForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="email"
           render={({ field }) => (
-            <FormItem_Shadcn_>
-              <FormLabel_Shadcn_>Email</FormLabel_Shadcn_>
+            <FormItem>
+              <FormLabel>Email</FormLabel>
               <Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl_Shadcn_>
+                <FormControl>
                   <SelectTrigger_Shadcn_>
                     <SelectValue_Shadcn_ placeholder="Select a verified email to display" />
                   </SelectTrigger_Shadcn_>
-                </FormControl_Shadcn_>
+                </FormControl>
                 <SelectContent_Shadcn_>
                   <SelectItem_Shadcn_ value="m@example.com">m@example.com</SelectItem_Shadcn_>
                   <SelectItem_Shadcn_ value="m@google.com">m@google.com</SelectItem_Shadcn_>
                   <SelectItem_Shadcn_ value="m@support.com">m@support.com</SelectItem_Shadcn_>
                 </SelectContent_Shadcn_>
               </Select_Shadcn_>
-              <FormDescription_Shadcn_>
+              <FormDescription>
                 You can manage email addresses in your{' '}
                 <Link href="/examples/forms">email settings</Link>.
-              </FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit" type="secondary">
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/single-value-field-array-demo.tsx b/apps/design-system/registry/default/example/single-value-field-array-demo.tsx
index fa142a0d16..9c30dc9dbf 100644
--- a/apps/design-system/registry/default/example/single-value-field-array-demo.tsx
+++ b/apps/design-system/registry/default/example/single-value-field-array-demo.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_ } from 'ui'
+import { Button, Form } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { SingleValueFieldArray } from 'ui-patterns/form/SingleValueFieldArray/SingleValueFieldArray'
 import { z } from 'zod'
@@ -26,7 +26,7 @@ export default function SingleValueFieldArrayDemo() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form className="w-full max-w-2xl" onSubmit={form.handleSubmit(onSubmit)}>
         <FormItemLayout
           label="Redirect URIs"
@@ -50,6 +50,6 @@ export default function SingleValueFieldArrayDemo() {
           </Button>
         </div>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/switch-form.tsx b/apps/design-system/registry/default/example/switch-form.tsx
index 41ebeb069b..f0b4a29b0a 100644
--- a/apps/design-system/registry/default/example/switch-form.tsx
+++ b/apps/design-system/registry/default/example/switch-form.tsx
@@ -5,12 +5,12 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
   Switch,
 } from 'ui'
 import { z } from 'zod'
@@ -39,48 +39,46 @@ export default function SwitchForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
         <div>
           <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
           <div className="space-y-4">
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="marketing_emails"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex flex-row items-center justify-between rounded-lg border p-4">
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                   <div className="space-y-0.5">
-                    <FormLabel_Shadcn_ className="text-base">Marketing emails</FormLabel_Shadcn_>
-                    <FormDescription_Shadcn_>
+                    <FormLabel className="text-base">Marketing emails</FormLabel>
+                    <FormDescription>
                       Receive emails about new products, features, and more.
-                    </FormDescription_Shadcn_>
+                    </FormDescription>
                   </div>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch checked={field.value} onCheckedChange={field.onChange} />
-                  </FormControl_Shadcn_>
-                </FormItem_Shadcn_>
+                  </FormControl>
+                </FormItem>
               )}
             />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="security_emails"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex flex-row items-center justify-between rounded-lg border p-4">
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                   <div className="space-y-0.5">
-                    <FormLabel_Shadcn_ className="text-base">Security emails</FormLabel_Shadcn_>
-                    <FormDescription_Shadcn_>
-                      Receive emails about your account security.
-                    </FormDescription_Shadcn_>
+                    <FormLabel className="text-base">Security emails</FormLabel>
+                    <FormDescription>Receive emails about your account security.</FormDescription>
                   </div>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch
                       checked={field.value}
                       onCheckedChange={field.onChange}
                       disabled
                       aria-readonly
                     />
-                  </FormControl_Shadcn_>
-                </FormItem_Shadcn_>
+                  </FormControl>
+                </FormItem>
               )}
             />
           </div>
@@ -89,6 +87,6 @@ export default function SwitchForm() {
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/design-system/registry/default/example/textarea-form.tsx b/apps/design-system/registry/default/example/textarea-form.tsx
index 4f4c890953..6f2510aed4 100644
--- a/apps/design-system/registry/default/example/textarea-form.tsx
+++ b/apps/design-system/registry/default/example/textarea-form.tsx
@@ -5,13 +5,13 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Textarea,
 } from 'ui'
 import { z } from 'zod'
@@ -43,32 +43,32 @@ export default function TextareaForm() {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="bio"
           render={({ field }) => (
-            <FormItem_Shadcn_>
-              <FormLabel_Shadcn_>Bio</FormLabel_Shadcn_>
-              <FormControl_Shadcn_>
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
                 <Textarea
                   placeholder="Tell us a little bit about yourself"
                   className="resize-none"
                   {...field}
                 />
-              </FormControl_Shadcn_>
-              <FormDescription_Shadcn_>
+              </FormControl>
+              <FormDescription>
                 You can <span>@mention</span> other users and organizations.
-              </FormDescription_Shadcn_>
-              <FormMessage_Shadcn_ />
-            </FormItem_Shadcn_>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button htmlType="submit" type="alternative">
           Submit
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/docs/components/Feedback/FeedbackModal.tsx b/apps/docs/components/Feedback/FeedbackModal.tsx
index c62328be3b..b1e00545bc 100644
--- a/apps/docs/components/Feedback/FeedbackModal.tsx
+++ b/apps/docs/components/Feedback/FeedbackModal.tsx
@@ -1,14 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import {
-  Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-  Modal,
-  Textarea,
-} from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_, Modal, Textarea } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
@@ -53,29 +45,29 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps
       onCancel={handleCancel}
       onEscapeKeyDown={handleCancel}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(handleSubmit)}>
           <Modal.Content className="pt-4 pb-2 flex flex-col gap-2">
             <input type="hidden" id="page" {...form.register('page')} />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="title"
               render={({ field }) => (
                 <FormItemLayout layout="vertical" label="Title">
-                  <FormControl_Shadcn_ className="col-span-6">
+                  <FormControl className="col-span-6">
                     <Input_Shadcn_ {...field} />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="comment"
               render={({ field }) => (
                 <FormItemLayout layout="vertical" label="Comment" afterLabel="(not anonymous)">
-                  <FormControl_Shadcn_ className="col-span-6">
+                  <FormControl className="col-span-6">
                     <Textarea {...field} rows={4} className="resize-none" />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -113,7 +105,7 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps
             </div>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx b/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx
index 28b04f3950..f944dc7e54 100644
--- a/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx
+++ b/apps/studio/components/interfaces/APIKeys/CreatePublishableAPIKeyDialog.tsx
@@ -14,9 +14,9 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -92,13 +92,13 @@ export const CreatePublishableAPIKeyDialog = () => {
         </DialogHeader>
         <DialogSectionSeparator />
         <DialogSection className="flex flex-col gap-4">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               className="flex flex-col gap-4"
               id={FORM_ID}
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 key="name"
                 name="name"
                 control={form.control}
@@ -107,13 +107,13 @@ export const CreatePublishableAPIKeyDialog = () => {
                     label="Name"
                     description="A short name of lowercase alphanumeric characters and underscore, must start with letter or underscore."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 key="description"
                 name="description"
                 control={form.control}
@@ -122,14 +122,14 @@ export const CreatePublishableAPIKeyDialog = () => {
                     label="Description"
                     description="Provide a description about what this key is used for."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder="(Optional)" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           <Button form={FORM_ID} htmlType="submit" loading={isCreatingAPIKey}>
diff --git a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx
index 85b5e4fa8b..957354c08d 100644
--- a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx
+++ b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx
@@ -18,9 +18,9 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -99,13 +99,13 @@ export const CreateSecretAPIKeyDialog = () => {
         </DialogHeader>
         <DialogSectionSeparator />
         <DialogSection className="flex flex-col gap-4">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               className="flex flex-col gap-4"
               id={FORM_ID}
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 key="name"
                 name="name"
                 control={form.control}
@@ -114,29 +114,29 @@ export const CreateSecretAPIKeyDialog = () => {
                     label="Name"
                     description="A short, unique name of lowercased letters, digits and underscore"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder="Example: my_super_secret_key_123" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 key="description"
                 name="description"
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout label="Description" labelOptional="Optional">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         placeholder="Short notes on how or where this key will be used"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
           <Alert_Shadcn_ variant="warning">
             <ShieldCheck />
             <AlertTitle_Shadcn_>Securing your API key</AlertTitle_Shadcn_>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
index 5cb2cd955b..f3bc894c64 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
@@ -13,9 +13,9 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -176,36 +176,36 @@ export const NewTokenDialog = ({
           />
         )}
         <DialogSection className="flex flex-col gap-4">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={formId}
               className="flex flex-col gap-4"
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 key="tokenName"
                 name="tokenName"
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout name="tokenName" label="Name">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         id="tokenName"
                         {...field}
                         placeholder="Provide a name for your token"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 key="expiresAt"
                 name="expiresAt"
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout name="expiresAt" label="Expires in">
                     <div className="flex gap-2">
-                      <FormControl_Shadcn_ className="flex-grow">
+                      <FormControl className="flex-grow">
                         <Select_Shadcn_ value={field.value} onValueChange={handleExpiryChange}>
                           <SelectTrigger_Shadcn_>
                             <SelectValue_Shadcn_ placeholder="Expires at" />
@@ -220,7 +220,7 @@ export const NewTokenDialog = ({
                             )}
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                       {isCustomExpiry && (
                         <DatePicker
                           selectsRange={false}
@@ -247,7 +247,7 @@ export const NewTokenDialog = ({
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           <Button
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/BasicInfo.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/BasicInfo.tsx
index 3b6ff930b7..c7a3e1b1d9 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/BasicInfo.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/BasicInfo.tsx
@@ -2,8 +2,8 @@ import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import { Control, ControllerRenderProps } from 'react-hook-form'
 import {
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -65,31 +65,31 @@ export const BasicInfo = ({
 
   return (
     <div className="space-y-4 px-5 sm:px-6 py-6">
-      <FormField_Shadcn_
+      <FormField
         key="tokenName"
         name="tokenName"
         control={control}
         render={({ field }) => (
           <FormItemLayout name="tokenName" label="Name">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Input_Shadcn_
                 id="tokenName"
                 {...field}
                 placeholder="Provide a name for your token"
               />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
 
-      <FormField_Shadcn_
+      <FormField
         key="expiresAt"
         name="expiresAt"
         control={control}
         render={({ field }) => (
           <FormItemLayout name="expiresAt" label="Expires in">
             <div className="flex gap-2">
-              <FormControl_Shadcn_ className="flex-grow">
+              <FormControl className="flex-grow">
                 <Select_Shadcn_
                   value={field.value}
                   onValueChange={(value) => handleExpiryChange(value, field)}
@@ -107,7 +107,7 @@ export const BasicInfo = ({
                     )}
                   </SelectContent_Shadcn_>
                 </Select_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
               {isCustomSelected && (
                 <DatePicker
                   selectsRange={false}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceAccess.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceAccess.tsx
index 98bbf67b0a..f14184a9b7 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceAccess.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceAccess.tsx
@@ -1,4 +1,4 @@
-import { FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { FormControl, FormField } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { ResourceAccessProps } from './ResourceAccess.types'
@@ -41,13 +41,13 @@ export const ResourceAccess = ({ control, resourceAccess, setValue }: ResourceAc
 
   return (
     <div className="space-y-4 px-5 sm:px-6 py-6">
-      <FormField_Shadcn_
+      <FormField
         key="resourceAccess"
         name="resourceAccess"
         control={control}
         render={({ field }) => (
           <FormItemLayout name="resourceAccess" label="Resource access">
-            <FormControl_Shadcn_>
+            <FormControl>
               <div className="space-y-3">
                 <fieldset className="flex gap-3">
                   <legend className="sr-only">Resource access level</legend>
@@ -69,13 +69,13 @@ export const ResourceAccess = ({ control, resourceAccess, setValue }: ResourceAc
                   {RESOURCE_OPTIONS.find((opt) => opt.value === field.value)?.description}
                 </p>
               </div>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
 
       {resourceAccess === 'selected-orgs' && (
-        <FormField_Shadcn_
+        <FormField
           key="selectedOrganizations"
           name="selectedOrganizations"
           control={control}
@@ -94,7 +94,7 @@ export const ResourceAccess = ({ control, resourceAccess, setValue }: ResourceAc
       )}
 
       {resourceAccess === 'selected-projects' && (
-        <FormField_Shadcn_
+        <FormField
           key="selectedProjects"
           name="selectedProjects"
           control={control}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceMultiSelector.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceMultiSelector.tsx
index 5bb2d24c49..dc9fb0b07f 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceMultiSelector.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/ResourceAccess/ResourceMultiSelector.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { FormControl_Shadcn_ } from 'ui'
+import { FormControl } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   MultiSelector,
@@ -38,7 +38,7 @@ export const ResourceMultiSelector = ({
 
   return (
     <FormItemLayout name={fieldName} label={label}>
-      <FormControl_Shadcn_ className="overflow-visible">
+      <FormControl className="overflow-visible">
         <MultiSelector values={displayValues} onValuesChange={handleValuesChange}>
           <MultiSelectorTrigger
             deletableBadge
@@ -63,7 +63,7 @@ export const ResourceMultiSelector = ({
             )}
           </MultiSelectorContent>
         </MultiSelector>
-      </FormControl_Shadcn_>
+      </FormControl>
     </FormItemLayout>
   )
 }
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
index e8169e8250..cc9a391d7d 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
@@ -7,7 +7,7 @@ import { useForm, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
+  Form,
   ScrollArea,
   Separator,
   Sheet,
@@ -287,7 +287,7 @@ export const NewScopedTokenSheet = ({
               </div>
             )}
 
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <div className="flex flex-col gap-0 overflow-visible">
                 <BasicInfo
                   control={form.control}
@@ -309,7 +309,7 @@ export const NewScopedTokenSheet = ({
                   setResourceSearchOpen={setResourceSearchOpen}
                 />
               </div>
-            </Form_Shadcn_>
+            </Form>
           </div>
         </ScrollArea>
         <SheetFooter className="!justify-end w-full mt-auto py-4 border-t">
diff --git a/apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx
index 39f854b0fe..cb8b36a90a 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useConsentState } from 'common'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Card, CardContent, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { Card, CardContent, Form, FormControl, FormField, Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   PageSection,
@@ -61,10 +61,10 @@ export const AnalyticsSettings = () => {
         </PageSectionSummary>
       </PageSectionMeta>
       <PageSectionContent>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <Card>
             <CardContent>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="telemetryEnabled"
                 render={({ field }) => (
@@ -73,7 +73,7 @@ export const AnalyticsSettings = () => {
                     label="Send telemetry data from Supabase services"
                     description="By opting in to sharing telemetry data, Supabase can analyze usage patterns to enhance user experience and use it for marketing and advertising purposes"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Switch
                         checked={field.value}
                         onCheckedChange={(value) => {
@@ -81,13 +81,13 @@ export const AnalyticsSettings = () => {
                           handleToggle(value)
                         }}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </CardContent>
           </Card>
-        </Form_Shadcn_>
+        </Form>
       </PageSectionContent>
     </PageSection>
   )
diff --git a/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx b/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx
index 94a095d15e..906ad10b57 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx
@@ -7,9 +7,9 @@ import {
   Button,
   DialogFooter,
   DialogSection,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -91,7 +91,7 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form id="update-email-form" onSubmit={form.handleSubmit(onSubmit)}>
         <div className="self-center">
           <HCaptcha
@@ -104,7 +104,7 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
         </div>
 
         <DialogSection>
-          <FormField_Shadcn_
+          <FormField
             name="email"
             control={form.control}
             render={({ field }) => (
@@ -112,9 +112,9 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
                 label="Provide a new email address"
                 description="A confirmation email will be sent to the provided email address"
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input_Shadcn_ {...field} placeholder="example@email.com" />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
@@ -129,6 +129,6 @@ export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) =>
           </Button>
         </DialogFooter>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Account/Preferences/DashboardSettingsToggles.tsx b/apps/studio/components/interfaces/Account/Preferences/DashboardSettingsToggles.tsx
index 44dfd3784b..17df002eb0 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DashboardSettingsToggles.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DashboardSettingsToggles.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Card, Form_Shadcn_ } from 'ui'
+import { Card, Form } from 'ui'
 import * as z from 'zod'
 
 import { DashboardToggle } from './DashboardToggle'
@@ -61,7 +61,7 @@ export const DashboardSettingsToggles = () => {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <Card>
         <DashboardToggle
           form={form}
@@ -79,6 +79,6 @@ export const DashboardSettingsToggles = () => {
           isLast
         />
       </Card>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx b/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
index c52ca6e103..6fd365221b 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
-import { CardContent, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { CardContent, FormControl, FormField, Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 interface DashboardToggleProps<T extends FieldValues> {
@@ -22,12 +22,12 @@ export function DashboardToggle<T extends FieldValues>({
 }: DashboardToggleProps<T>) {
   return (
     <CardContent className={isLast ? undefined : 'border-b'}>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name={name}
         render={({ field }) => (
           <FormItemLayout layout="flex-row-reverse" label={label} description={description}>
-            <FormControl_Shadcn_>
+            <FormControl>
               <Switch
                 checked={field.value}
                 onCheckedChange={(value) => {
@@ -35,7 +35,7 @@ export function DashboardToggle<T extends FieldValues>({
                   onToggle(value)
                 }}
               />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
index d0222e005d..37b63c1ba8 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
@@ -14,11 +14,11 @@ import {
   DialogSection,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
   Input_Shadcn_,
   Separator,
 } from 'ui'
@@ -150,23 +150,23 @@ export const DeleteAccountButton = () => {
                 </DialogFooter>
               </>
             ) : (
-              <Form_Shadcn_ {...form}>
+              <Form {...form}>
                 <form
                   id="account-deletion-request"
                   onSubmit={form.handleSubmit(() => onConfirmDelete())}
                 >
                   <DialogSection>
-                    <FormField_Shadcn_
+                    <FormField
                       name="account"
                       control={form.control}
                       render={({ field }) => (
-                        <FormItem_Shadcn_>
-                          <FormLabel_Shadcn_>
+                        <FormItem>
+                          <FormLabel>
                             Please type{' '}
                             <span className="font-bold">{profile?.primary_email ?? ''}</span> to
                             confirm
-                          </FormLabel_Shadcn_>
-                          <FormControl_Shadcn_>
+                          </FormLabel>
+                          <FormControl>
                             <Input_Shadcn_
                               autoFocus
                               {...field}
@@ -174,8 +174,8 @@ export const DeleteAccountButton = () => {
                               disabled={isPending}
                               placeholder="Enter the account above"
                             />
-                          </FormControl_Shadcn_>
-                        </FormItem_Shadcn_>
+                          </FormControl>
+                        </FormItem>
                       )}
                     />
                   </DialogSection>
@@ -193,7 +193,7 @@ export const DeleteAccountButton = () => {
                     </Button>
                   </DialogFooter>
                 </form>
-              </Form_Shadcn_>
+              </Form>
             )}
           </>
         )}
diff --git a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
index 5df25eaf1c..a6890c2170 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
@@ -7,9 +7,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -96,37 +96,37 @@ export const ProfileInformation = () => {
         </PageSectionSummary>
       </PageSectionMeta>
       <PageSectionContent>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} className="space-y-6 w-full" onSubmit={form.handleSubmit(onSubmit)}>
             <Card>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="first_name"
                   render={({ field }) => (
                     <FormItemLayout label="First name" layout="flex-row-reverse">
-                      <FormControl_Shadcn_ className="col-span-8">
+                      <FormControl className="col-span-8">
                         <Input_Shadcn_ {...field} placeholder="First name" className="w-full" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </CardContent>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="last_name"
                   render={({ field }) => (
                     <FormItemLayout label="Last name" layout="flex-row-reverse">
-                      <FormControl_Shadcn_ className="col-span-8">
+                      <FormControl className="col-span-8">
                         <Input_Shadcn_ {...field} placeholder="Last name" className="w-full" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </CardContent>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="primary_email"
                   render={({ field }) => (
@@ -139,7 +139,7 @@ export const ProfileInformation = () => {
                       }
                       layout="flex-row-reverse"
                     >
-                      <FormControl_Shadcn_ className="col-span-8">
+                      <FormControl className="col-span-8">
                         <div className="flex flex-col gap-1">
                           <Select_Shadcn_
                             value={field.value}
@@ -159,13 +159,13 @@ export const ProfileInformation = () => {
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
                         </div>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </CardContent>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="username"
                   render={({ field }) => (
@@ -178,7 +178,7 @@ export const ProfileInformation = () => {
                       }
                       layout="flex-row-reverse"
                     >
-                      <FormControl_Shadcn_ className="col-span-8">
+                      <FormControl className="col-span-8">
                         <div className="flex flex-col gap-1">
                           <Input_Shadcn_
                             {...field}
@@ -187,7 +187,7 @@ export const ProfileInformation = () => {
                             disabled={profile?.is_sso_user}
                           />
                         </div>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -209,7 +209,7 @@ export const ProfileInformation = () => {
               </CardFooter>
             </Card>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </PageSectionContent>
     </PageSection>
   )
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx
index 56e5de262c..4cefc450d1 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx
@@ -4,7 +4,7 @@ import { LOCAL_STORAGE_KEYS } from 'common'
 import { useEffect, useState } from 'react'
 import { useForm, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input, Input_Shadcn_ } from 'ui'
+import { Form, FormControl, FormField, Input, Input_Shadcn_ } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -91,13 +91,13 @@ const FirstStep = ({ visible, isEnrolling, reset, enroll, onClose }: FirstStepPr
       onCancel={onClose}
       onConfirm={form.handleSubmit(onSubmit)}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form
           id="verify-otp-form"
           className="flex flex-col gap-4"
           onSubmit={form.handleSubmit(onSubmit)}
         >
-          <FormField_Shadcn_
+          <FormField
             key="name"
             name="name"
             control={form.control}
@@ -107,14 +107,14 @@ const FirstStep = ({ visible, isEnrolling, reset, enroll, onClose }: FirstStepPr
                 label="Provide a name to identify this app"
                 description="A string will be randomly generated if a name is not provided"
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input_Shadcn_ id="name" {...field} />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
         </form>
-      </Form_Shadcn_>
+      </Form>
     </ConfirmationModal>
   )
 }
@@ -236,19 +236,19 @@ const SecondStep = ({
             }
           />
 
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id="verify-otp-form"
               className="flex flex-col gap-4"
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 key="code"
                 name="code"
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout name="code" label="Authentication code">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         id="code"
                         autoFocus
@@ -256,12 +256,12 @@ const SecondStep = ({
                         placeholder="XXXXXX"
                         className="font-mono"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </div>
       )}
     </ConfirmationModal>
diff --git a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
index aab5390081..7b973bd15f 100644
--- a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
@@ -7,9 +7,9 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -127,13 +127,13 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
           <SheetTitle>Create a rule for "{lint?.title}"</SheetTitle>
         </SheetHeader>
         <SheetSection className="overflow-auto flex-grow px-0">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={formId}
               className="flex flex-col gap-y-4"
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 name="is_disabled"
                 control={form.control}
                 render={({ field }) => (
@@ -145,13 +145,13 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
                   >
                     <Tooltip>
                       <TooltipTrigger type="button">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={field.disabled || assigned_to === 'all'}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </TooltipTrigger>
                       {assigned_to === 'all' && (
                         <TooltipContent side="bottom" className="w-72">
@@ -168,7 +168,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
 
               <Separator />
 
-              <FormField_Shadcn_
+              <FormField
                 name="assigned_to"
                 control={form.control}
                 render={({ field }) => (
@@ -210,7 +210,7 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
 
               <Separator />
 
-              <FormField_Shadcn_
+              <FormField
                 name="note"
                 control={form.control}
                 render={({ field }) => (
@@ -220,18 +220,18 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
                     label="Description"
                     labelOptional="Optional"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input.TextArea
                         {...field}
                         className="[&>div>div>div>textarea]:text-sm"
                         placeholder="e.g Describe why this rule is being set"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </SheetSection>
         <SheetFooter>
           <Button disabled={isCreating} type="default" onClick={() => onOpenChange(false)}>
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
index 64e429f60c..12e342c6d2 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
@@ -11,11 +11,11 @@ import {
   CardContent,
   CardFooter,
   CardHeader,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -225,12 +225,12 @@ function OrganizationSelector({
   disabled = false,
 }: OrganizationSelectorProps): ReactNode {
   return (
-    <Form_Shadcn_ {...form}>
-      <FormField_Shadcn_
+    <Form {...form}>
+      <FormField
         control={form.control}
         name="selectedOrgSlug"
         render={({ field }) => (
-          <FormItem_Shadcn_>
+          <FormItem>
             <FormLayout
               label="Organization to grant API access to"
               description={
@@ -240,7 +240,7 @@ function OrganizationSelector({
               }
               isReactForm
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Select_Shadcn_
                   value={field.value || undefined}
                   disabled={disabled}
@@ -261,12 +261,12 @@ function OrganizationSelector({
                     ))}
                   </SelectContent_Shadcn_>
                 </Select_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormLayout>
-          </FormItem_Shadcn_>
+          </FormItem>
         )}
       />
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
diff --git a/apps/studio/components/interfaces/App/UpdateBillingAddressModal.tsx b/apps/studio/components/interfaces/App/UpdateBillingAddressModal.tsx
index 2bea198cc7..920fd85fe5 100644
--- a/apps/studio/components/interfaces/App/UpdateBillingAddressModal.tsx
+++ b/apps/studio/components/interfaces/App/UpdateBillingAddressModal.tsx
@@ -15,7 +15,7 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_ as Form,
+  Form,
 } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
diff --git a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
index b6de78934a..4e2a60fb64 100644
--- a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
@@ -4,16 +4,7 @@ import { useParams } from 'common'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Card,
-  CardContent,
-  CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Switch,
-} from 'ui'
+import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
@@ -123,11 +114,11 @@ export const AuditLogsForm = () => {
         </PageSectionSummary>
       </PageSectionMeta>
       <PageSectionContent>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmitAuditLogs)} className="space-y-4">
             <Card>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="AUDIT_LOG_DISABLE_POSTGRES"
                   render={({ field }) => (
@@ -157,13 +148,13 @@ export const AuditLogsForm = () => {
                         </p>
                       }
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Switch
                           checked={!field.value}
                           onCheckedChange={(value) => field.onChange(!value)}
                           disabled={!canUpdateConfig}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -209,7 +200,7 @@ export const AuditLogsForm = () => {
               </CardFooter>
             </Card>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </PageSectionContent>
     </PageSection>
   )
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
index 2da5f06e91..35a1e364b4 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -6,8 +6,7 @@ import ReactMarkdown from 'react-markdown'
 import {
   Button,
   Calendar,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
   FormInputGroupInput,
   Input_Shadcn_,
   InputGroup,
@@ -24,7 +23,8 @@ import {
   SheetSection,
   Switch,
   Textarea,
-  useWatch_Shadcn_,
+  FormField as UIFormField,
+  useWatch,
 } from 'ui'
 import { Input as DataInput } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -65,7 +65,7 @@ const FormField = ({
     )
   }
 
-  const fieldValue = useWatch_Shadcn_({ control, name })
+  const fieldValue = useWatch({ control, name })
   if (!hasAccess) {
     const planMessage = organizationSlug
       ? `Only available on [Pro plan](/org/${organizationSlug}/billing?panel=subscriptionPlan) and above.`
@@ -75,7 +75,7 @@ const FormField = ({
   const disabled =
     disabledProp || (properties.type === 'boolean' ? !hasAccess && !fieldValue : !hasAccess)
 
-  const showValue = useWatch_Shadcn_({
+  const showValue = useWatch({
     control,
     name: properties.show?.key,
     disabled: properties.show == null,
@@ -102,7 +102,7 @@ const FormField = ({
       return (
         <>
           <SheetSection>
-            <FormField_Shadcn_
+            <UIFormField
               control={control}
               name={name}
               disabled={disabled || readOnly}
@@ -118,7 +118,7 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Popover_Shadcn_>
                       <PopoverTrigger_Shadcn_ asChild>
                         <Button
@@ -141,7 +141,7 @@ const FormField = ({
                         />
                       </PopoverContent_Shadcn_>
                     </Popover_Shadcn_>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -154,7 +154,7 @@ const FormField = ({
       return (
         <>
           <SheetSection>
-            <FormField_Shadcn_
+            <UIFormField
               control={control}
               name={name}
               disabled={disabled}
@@ -168,7 +168,7 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl_Shadcn_ className="col-span-6">
+                  <FormControl className="col-span-6">
                     {properties.isSecret ? (
                       <DataInput
                         {...field}
@@ -181,7 +181,7 @@ const FormField = ({
                     ) : (
                       <Input_Shadcn_ {...field} id={name} readOnly={readOnly} />
                     )}
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -194,7 +194,7 @@ const FormField = ({
       return (
         <>
           <SheetSection>
-            <FormField_Shadcn_
+            <UIFormField
               control={control}
               name={name}
               disabled={disabled}
@@ -208,7 +208,7 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl_Shadcn_ className="col-span-6">
+                  <FormControl className="col-span-6">
                     <Textarea
                       {...field}
                       id={name}
@@ -217,7 +217,7 @@ const FormField = ({
                       className="resize-none"
                       readOnly={readOnly}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -230,7 +230,7 @@ const FormField = ({
       return (
         <>
           <SheetSection>
-            <FormField_Shadcn_
+            <UIFormField
               control={control}
               name={name}
               disabled={disabled}
@@ -244,7 +244,7 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl_Shadcn_ className="col-span-6">
+                  <FormControl className="col-span-6">
                     {properties.units ? (
                       <InputGroup>
                         <FormInputGroupInput
@@ -273,7 +273,7 @@ const FormField = ({
                         readOnly={readOnly}
                       />
                     )}
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -286,7 +286,7 @@ const FormField = ({
       return (
         <>
           <SheetSection>
-            <FormField_Shadcn_
+            <UIFormField
               control={control}
               name={name}
               disabled={disabled || readOnly}
@@ -309,14 +309,14 @@ const FormField = ({
                     </div>
                   }
                 >
-                  <FormControl_Shadcn_ className="col-span-6">
+                  <FormControl className="col-span-6">
                     <Switch
                       id={name}
                       checked={field.value}
                       onCheckedChange={field.onChange}
                       size="small"
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -329,7 +329,7 @@ const FormField = ({
       return (
         <>
           <SheetSection>
-            <FormField_Shadcn_
+            <UIFormField
               control={control}
               name={name}
               disabled={disabled || readOnly}
@@ -347,7 +347,7 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl_Shadcn_ className="col-span-6">
+                  <FormControl className="col-span-6">
                     <Select_Shadcn_
                       defaultValue={properties.enum[0]?.value}
                       value={field.value}
@@ -373,7 +373,7 @@ const FormField = ({
                         ))}
                       </SelectContent_Shadcn_>
                     </Select_Shadcn_>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 5fc691fac2..d12be39924 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -10,7 +10,7 @@ import ReactMarkdown from 'react-markdown'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
+  Form,
   Sheet,
   SheetContent,
   SheetFooter,
@@ -216,7 +216,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
             />
             <SheetTitle>{provider.title}</SheetTitle>
           </SheetHeader>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={formId}
               name={formId}
@@ -273,7 +273,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
                 </SheetSection>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
           <SheetFooter className="shrink-0">
             <div className="flex items-center justify-between w-full">
               <DocsButton href={provider.link} />
diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
index cdadbcfbc7..e050379d5e 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
@@ -14,9 +14,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Switch,
   WarningIcon,
 } from 'ui'
@@ -160,11 +160,11 @@ export const BasicAuthSettingsForm = () => {
         )}
 
         {isSuccess && (
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="DISABLE_SIGNUP"
                     render={({ field }) => (
@@ -173,20 +173,20 @@ export const BasicAuthSettingsForm = () => {
                         label="Allow new users to sign up"
                         description="If this is disabled, new users will not be able to sign up to your application"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </CardContent>
                 {showManualLinking && (
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="SECURITY_MANUAL_LINKING_ENABLED"
                       render={({ field }) => (
@@ -206,20 +206,20 @@ export const BasicAuthSettingsForm = () => {
                             </>
                           }
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Switch
                               checked={field.value}
                               onCheckedChange={field.onChange}
                               disabled={!canUpdateConfig}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
                   </CardContent>
                 )}
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="EXTERNAL_ANONYMOUS_USERS_ENABLED"
                     render={({ field }) => (
@@ -239,13 +239,13 @@ export const BasicAuthSettingsForm = () => {
                           </>
                         }
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -305,7 +305,7 @@ export const BasicAuthSettingsForm = () => {
                     )}
                 </CardContent>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="MAILER_AUTOCONFIRM"
                     render={({ field }) => (
@@ -314,13 +314,13 @@ export const BasicAuthSettingsForm = () => {
                         label="Confirm email"
                         description="Users will need to confirm their email address before signing in for the first time"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -342,7 +342,7 @@ export const BasicAuthSettingsForm = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         )}
       </PageSectionContent>
     </PageSection>
diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
index 1d779d58d3..16390563d9 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
@@ -8,9 +8,9 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   Input,
   Input_Shadcn_,
@@ -28,7 +28,7 @@ import {
   SheetSection,
   SheetTitle,
   Switch,
-  useWatch_Shadcn_,
+  useWatch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
@@ -233,7 +233,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
   }
 
   const isManualConfiguration =
-    useWatch_Shadcn_({ control: form.control, name: 'provider_type' }) === 'oauth2'
+    useWatch({ control: form.control, name: 'provider_type' }) === 'oauth2'
 
   const {
     confirmOnClose,
@@ -247,7 +247,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
     },
   })
 
-  const issuerUrlValue = useWatch_Shadcn_({ control: form.control, name: 'issuer' })
+  const issuerUrlValue = useWatch({ control: form.control, name: 'issuer' })
 
   return (
     <Sheet open={visible} onOpenChange={handleOpenChange}>
@@ -275,14 +275,14 @@ export const CreateOrUpdateCustomProviderSheet = ({
             </SheetTitle>
           </div>
         </SheetHeader>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             className="flex-grow overflow-auto"
             onSubmit={form.handleSubmit(onSubmit)}
             id={FORM_ID}
           >
             <SheetSection className="flex-grow px-5 space-y-4">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="identifier"
                 render={({ field }) => (
@@ -291,7 +291,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
                     label="Provider Identifier"
                     description="Lowercase letters, numbers, and hyphens only. Used in SDK: signInWithOAuth({ provider: 'custom:my-company' })"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <InputGroup>
                         <InputGroupAddon align="inline-start">
                           <InputGroupText>custom:</InputGroupText>
@@ -307,24 +307,24 @@ export const CreateOrUpdateCustomProviderSheet = ({
                           }}
                         />
                       </InputGroup>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
 
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItemLayout layout="horizontal" label="Display Name">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder="Provider name" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
 
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="provider_type"
                 render={({ field }) => (
@@ -350,7 +350,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
             <Separator />
             <SheetSection className="flex-grow px-5 space-y-4">
               <FormSectionLabel>OAuth Endpoints</FormSectionLabel>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="issuer"
                 render={({ field }) => (
@@ -359,58 +359,58 @@ export const CreateOrUpdateCustomProviderSheet = ({
                     label="Issuer URL"
                     description="Base URL of your OAuth provider. Discovery runs when you save."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder="https://auth.company.com" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </SheetSection>
             {isManualConfiguration ? (
               <SheetSection className="flex-grow px-5 pt-0 space-y-4" key="manual-config">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="authorization_url"
                   render={({ field }) => (
                     <FormItemLayout layout="horizontal" label="Authorization URL">
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           {...field}
                           placeholder="https://auth.company.com/oauth/authorize"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="token_url"
                   render={({ field }) => (
                     <FormItemLayout layout="horizontal" label="Token URL">
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           {...field}
                           placeholder="https://auth.company.com/oauth/token"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="userinfo_url"
                   render={({ field }) => (
                     <FormItemLayout layout="horizontal" label="Userinfo URL">
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           {...field}
                           placeholder="https://auth.company.com/oauth/userinfo"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="jwks_uri"
                   render={({ field }) => (
@@ -419,19 +419,19 @@ export const CreateOrUpdateCustomProviderSheet = ({
                       label="JWKS URI"
                       description="Required for ID token verification"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           {...field}
                           placeholder="https://auth.company.com/.well-known/jwks.json"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </SheetSection>
             ) : (
               <SheetSection className="flex-grow px-5 pt-0 space-y-4" key="discovery-config">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="discovery_url"
                   render={({ field }) => (
@@ -440,7 +440,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
                       label="Discovery URL"
                       description="Leave empty to use standard path: {issuer}/.well-known/openid-configuration. Only needed if your provider uses a non-standard discovery path. Discovery runs when you save."
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           {...field}
                           placeholder={
@@ -449,7 +449,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
                               : 'https://github.company.com/.well-known/openid-configuration'
                           }
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -457,32 +457,32 @@ export const CreateOrUpdateCustomProviderSheet = ({
             )}
             <Separator />
             <SheetSection className="flex-grow px-5 space-y-4">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="client_id"
                 render={({ field }) => (
                   <FormItemLayout layout="horizontal" label="Client ID">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder="Client ID" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="client_secret"
                 render={({ field }) => (
                   <FormItemLayout layout="horizontal" label="Client Secret">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} type="password" placeholder="Client secret" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </SheetSection>
             <Separator />
             <SheetSection className="flex-grow px-5 space-y-4">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="scopes"
                 render={({ field }) => (
@@ -491,13 +491,13 @@ export const CreateOrUpdateCustomProviderSheet = ({
                     label="Scopes"
                     description="Comma-separated list. Common: openid, email, profile"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder="openid, email, profile" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="email_optional"
                 render={({ field }) => (
@@ -506,9 +506,9 @@ export const CreateOrUpdateCustomProviderSheet = ({
                     label="Allow users without email"
                     description="Allows the user to successfully authenticate when the provider does not return an email address."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Switch checked={field.value} onCheckedChange={field.onChange} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -530,7 +530,7 @@ export const CreateOrUpdateCustomProviderSheet = ({
               </FormItemLayout>
             </SheetSection>
           </form>
-        </Form_Shadcn_>
+        </Form>
         <SheetFooter>
           <Button type="default" onClick={confirmOnClose}>
             Cancel
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
index 8b275aecab..2f7f6c4e78 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -6,16 +6,7 @@ import Link from 'next/link'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Card,
-  CardContent,
-  CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Switch,
-} from 'ui'
+import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 import {
   PageSection,
@@ -192,7 +183,7 @@ export const EmailTemplates = () => {
               </PageSectionSummary>
             </PageSectionMeta>
             <PageSectionContent>
-              <Form_Shadcn_ {...notificationsForm}>
+              <Form {...notificationsForm}>
                 <form onSubmit={notificationsForm.handleSubmit(onSubmit)} className="space-y-4">
                   <Card>
                     {TEMPLATES_SCHEMAS.filter((t) => t.misc?.emailTemplateType === 'security').map(
@@ -219,17 +210,17 @@ export const EmailTemplates = () => {
                             </Link>
 
                             <div className="flex items-center gap-4 h-full pl-2 relative">
-                              <FormField_Shadcn_
+                              <FormField
                                 control={notificationsForm.control}
                                 name={templateEnabledKey}
                                 render={({ field }) => (
-                                  <FormControl_Shadcn_>
+                                  <FormControl>
                                     <Switch
                                       checked={field.value}
                                       onCheckedChange={field.onChange}
                                       disabled={!canUpdateConfig}
                                     />
-                                  </FormControl_Shadcn_>
+                                  </FormControl>
                                 )}
                               />
 
@@ -265,7 +256,7 @@ export const EmailTemplates = () => {
                     </CardFooter>
                   </Card>
                 </form>
-              </Form_Shadcn_>
+              </Form>
             </PageSectionContent>
           </PageSection>
         </>
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index 650a2389f8..bfca12d180 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -10,9 +10,9 @@ import {
   Button,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Label_Shadcn_,
   Tooltip,
@@ -227,14 +227,14 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
   }, [hasChanges])
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <CardContent>
           {Object.keys(properties).map((x: string) => {
             const property = properties[x]
             if (property.type === 'string' && x !== messageSlug) {
               return (
-                <FormField_Shadcn_
+                <FormField
                   key={x}
                   control={form.control}
                   name={x}
@@ -258,9 +258,9 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
                         ) : null
                       }
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ id={x} {...field} disabled={!canUpdateConfig} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -367,6 +367,6 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
         )}
       </form>
       <PreventNavigationOnUnsavedChanges hasChanges={hasChanges} />
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
index bfe90b9835..eed3c63820 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
@@ -6,9 +6,9 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   RadioGroupStacked,
   RadioGroupStackedItem,
@@ -296,13 +296,13 @@ export const CreateHookSheet = ({
         </SheetHeader>
         <Separator />
         <SheetSection className="overflow-auto flex-grow px-0">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={FORM_ID}
               className="space-y-6 w-full py-5 flex-1"
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 key="enabled"
                 name="enabled"
                 control={form.control}
@@ -317,23 +317,23 @@ export const CreateHookSheet = ({
                         : undefined
                     }
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Switch
                         checked={field.value}
                         onCheckedChange={field.onChange}
                         disabled={field.disabled}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
               <Separator />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="selectedType"
                 render={({ field }) => (
                   <FormItemLayout label="Hook type" className="px-5">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <RadioGroupStacked
                         value={field.value}
                         onValueChange={(value) => field.onChange(value)}
@@ -353,14 +353,14 @@ export const CreateHookSheet = ({
                           description="Used to call any HTTPS endpoint."
                         />
                       </RadioGroupStacked>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
               {values.selectedType === 'postgres' ? (
                 <>
                   <div className="grid grid-cols-2 gap-8 px-5">
-                    <FormField_Shadcn_
+                    <FormField
                       key="postgresValues.schema"
                       control={form.control}
                       name="postgresValues.schema"
@@ -369,7 +369,7 @@ export const CreateHookSheet = ({
                           label="Postgres Schema"
                           description="Postgres schema where the function is defined"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <SchemaSelector
                               size="small"
                               showError={false}
@@ -378,11 +378,11 @@ export const CreateHookSheet = ({
                               onSelectSchema={(name) => field.onChange(name)}
                               disabled={field.disabled}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
-                    <FormField_Shadcn_
+                    <FormField
                       key="postgresValues.functionName"
                       control={form.control}
                       name="postgresValues.functionName"
@@ -391,7 +391,7 @@ export const CreateHookSheet = ({
                           label="Postgres function"
                           description="This function will be called by Supabase Auth each time the hook is triggered"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <FunctionSelector
                               size="small"
                               schema={values.postgresValues.schema}
@@ -419,7 +419,7 @@ export const CreateHookSheet = ({
                                 </span>
                               }
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -441,7 +441,7 @@ export const CreateHookSheet = ({
                 </>
               ) : (
                 <div className="flex flex-col gap-4 px-5">
-                  <FormField_Shadcn_
+                  <FormField
                     key="httpsValues.url"
                     control={form.control}
                     name="httpsValues.url"
@@ -450,13 +450,13 @@ export const CreateHookSheet = ({
                         label="URL"
                         description="Supabase Auth will send a HTTPS POST request to this URL each time the hook is triggered."
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_ {...field} />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
-                  <FormField_Shadcn_
+                  <FormField
                     key="httpsValues.secret"
                     control={form.control}
                     name="httpsValues.secret"
@@ -477,7 +477,7 @@ export const CreateHookSheet = ({
                           </div>
                         }
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <div className="flex flex-row">
                             <Input_Shadcn_ {...field} className="rounded-r-none border-r-0" />
                             <Button
@@ -494,14 +494,14 @@ export const CreateHookSheet = ({
                               Generate secret
                             </Button>
                           </div>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </div>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
         </SheetSection>
         <SheetFooter>
           {!isCreating && (
diff --git a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
index cd78fb8cb2..6c94c0c953 100644
--- a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
@@ -11,9 +11,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   Input_Shadcn_,
   InputGroup,
@@ -350,11 +350,11 @@ export const MfaAuthSettingsForm = () => {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...totpForm}>
+          <Form {...totpForm}>
             <form onSubmit={totpForm.handleSubmit(onSubmitTotpForm)} className="space-y-4">
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={totpForm.control}
                     name="MFA_TOTP"
                     render={({ field }) => (
@@ -363,7 +363,7 @@ export const MfaAuthSettingsForm = () => {
                         label="TOTP (App Authenticator)"
                         description="Control use of TOTP (App Authenticator) factors"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select_Shadcn_
                             value={field.value}
                             onValueChange={field.onChange}
@@ -380,14 +380,14 @@ export const MfaAuthSettingsForm = () => {
                               ))}
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={totpForm.control}
                     name="MFA_MAX_ENROLLED_FACTORS"
                     render={({ field }) => (
@@ -396,7 +396,7 @@ export const MfaAuthSettingsForm = () => {
                         label="Maximum number of per-user MFA factors"
                         description="How many MFA factors can be enrolled at once per user."
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <InputGroup>
                             <FormInputGroupInput
                               type="number"
@@ -413,7 +413,7 @@ export const MfaAuthSettingsForm = () => {
                               <InputGroupText>factors</InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -436,7 +436,7 @@ export const MfaAuthSettingsForm = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
 
@@ -447,7 +447,7 @@ export const MfaAuthSettingsForm = () => {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...phoneForm}>
+          <Form {...phoneForm}>
             <form
               onSubmit={(e) => {
                 e.preventDefault()
@@ -456,7 +456,7 @@ export const MfaAuthSettingsForm = () => {
             >
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={phoneForm.control}
                     name="MFA_PHONE"
                     render={({ field }) => (
@@ -465,7 +465,7 @@ export const MfaAuthSettingsForm = () => {
                         label="Phone"
                         description="Control use of phone factors"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select_Shadcn_
                             value={field.value}
                             onValueChange={field.onChange}
@@ -482,7 +482,7 @@ export const MfaAuthSettingsForm = () => {
                               ))}
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -498,7 +498,7 @@ export const MfaAuthSettingsForm = () => {
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={phoneForm.control}
                     name="MFA_PHONE_OTP_LENGTH"
                     render={({ field }) => (
@@ -507,7 +507,7 @@ export const MfaAuthSettingsForm = () => {
                         label="Phone OTP Length"
                         description="Number of digits in OTP"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <InputGroup>
                             <FormInputGroupInput
                               type="number"
@@ -524,14 +524,14 @@ export const MfaAuthSettingsForm = () => {
                               <InputGroupText>digits</InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={phoneForm.control}
                     name="MFA_PHONE_TEMPLATE"
                     render={({ field }) => (
@@ -540,7 +540,7 @@ export const MfaAuthSettingsForm = () => {
                         label="Phone verification message"
                         description="To format the OTP code use `{{ .Code }}`"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_
                             type="text"
                             {...field}
@@ -550,7 +550,7 @@ export const MfaAuthSettingsForm = () => {
                             data-form-type="other" // Dashlane
                             data-bwignore // Bitwarden
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -588,7 +588,7 @@ export const MfaAuthSettingsForm = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
 
@@ -619,11 +619,11 @@ export const MfaAuthSettingsForm = () => {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...securityForm}>
+          <Form {...securityForm}>
             <form onSubmit={securityForm.handleSubmit(onSubmitSecurityForm)}>
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={securityForm.control}
                     name="MFA_ALLOW_LOW_AAL"
                     render={({ field }) => (
@@ -632,13 +632,13 @@ export const MfaAuthSettingsForm = () => {
                         label="Limit duration of AAL1 sessions"
                         description="A user's session will be terminated unless they verify one of their factors within 15 minutes of initial sign in. Recommendation: ON"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={!field.value}
                             onCheckedChange={(value) => field.onChange(!value)}
                             disabled={!canUpdateConfig || !hasAccessToEnhanceSecurity}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -673,7 +673,7 @@ export const MfaAuthSettingsForm = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
     </>
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
index d1fd421714..8a5e22cc9c 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
@@ -12,11 +12,11 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormLabel_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormLabel,
   Input_Shadcn_,
   Separator,
   Sheet,
@@ -265,27 +265,27 @@ export const CreateOrUpdateOAuthAppSheet = ({
             </div>
           </SheetHeader>
           <SheetSection className="overflow-auto flex-grow px-0">
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)} id={FORM_ID}>
                 <div className="px-5 flex items-start justify-between gap-4">
                   <div className="flex-grow space-y-4">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="name"
                       render={({ field }) => (
                         <FormItemLayout label="Name">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input_Shadcn_ {...field} placeholder="My OAuth App" />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="logo_uri"
                       render={() => (
                         <FormItemLayout label="Logo" description="Upload a logo for your OAuth app">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <div className="flex gap-4 items-center">
                               <button
                                 type="button"
@@ -325,7 +325,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                                 onChange={onFileUpload}
                               />
                             </div>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -338,12 +338,12 @@ export const CreateOrUpdateOAuthAppSheet = ({
                     <div className="px-5">
                       <Panel>
                         <Panel.Content className="space-y-2">
-                          <FormField_Shadcn_
+                          <FormField
                             control={form.control}
                             name="client_id"
                             render={() => (
                               <FormItemLayout label="Client ID">
-                                <FormControl_Shadcn_>
+                                <FormControl>
                                   <Input
                                     copy
                                     readOnly
@@ -352,14 +352,14 @@ export const CreateOrUpdateOAuthAppSheet = ({
                                     onChange={() => {}}
                                     onCopy={() => toast.success('Client ID copied to clipboard')}
                                   />
-                                </FormControl_Shadcn_>
+                                </FormControl>
                               </FormItemLayout>
                             )}
                           />
 
                           {!isPublicClient && (
                             <>
-                              <FormField_Shadcn_
+                              <FormField
                                 control={form.control}
                                 name="client_secret"
                                 render={() => (
@@ -367,7 +367,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                                     label="Client Secret"
                                     description="Client secret is hidden for security. Use the regenerate button to create a new one."
                                   >
-                                    <FormControl_Shadcn_>
+                                    <FormControl>
                                       <Input
                                         readOnly
                                         type="password"
@@ -375,7 +375,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                                         value="****************************************************************"
                                         onChange={() => {}}
                                       />
-                                    </FormControl_Shadcn_>
+                                    </FormControl>
                                   </FormItemLayout>
                                 )}
                               />
@@ -397,7 +397,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                 )}
 
                 <div className="px-5 gap-2 flex flex-col">
-                  <FormLabel_Shadcn_ className="text-foreground">Redirect URIs</FormLabel_Shadcn_>
+                  <FormLabel className="text-foreground">Redirect URIs</FormLabel>
                   <SingleValueFieldArray
                     control={form.control}
                     name="redirect_uris"
@@ -409,13 +409,13 @@ export const CreateOrUpdateOAuthAppSheet = ({
                     minimumRows={1}
                     rowsClassName="space-y-2"
                   />
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  <FormDescription className="text-foreground-lighter">
                     URLs where users will be redirected after authentication.
-                  </FormDescription_Shadcn_>
+                  </FormDescription>
                 </div>
 
                 <Separator />
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="client_type"
                   render={({ field }) => (
@@ -435,7 +435,7 @@ export const CreateOrUpdateOAuthAppSheet = ({
                       }
                       className={'px-5'}
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Switch
                           checked={field.value === 'public'}
                           onCheckedChange={(checked) =>
@@ -443,12 +443,12 @@ export const CreateOrUpdateOAuthAppSheet = ({
                           }
                           disabled={isEditMode}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </form>
-            </Form_Shadcn_>
+            </Form>
           </SheetSection>
           <SheetFooter>
             <Button type="default" disabled={isCreating || isUpdating} onClick={onClose}>
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
index 0feed4f1f1..f3aab923ca 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
@@ -11,9 +11,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Switch,
 } from 'ui'
@@ -214,11 +214,11 @@ export const OAuthServerSettingsForm = () => {
     <>
       <PageSection>
         <PageSectionContent>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="OAUTH_SERVER_ENABLED"
                     render={({ field }) => (
@@ -227,13 +227,13 @@ export const OAuthServerSettingsForm = () => {
                         label="Enable the Supabase OAuth Server"
                         description="Enable OAuth server functionality for your project to create and manage OAuth applications."
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={handleOAuthServerToggle}
                             disabled={!canUpdateConfig}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -266,7 +266,7 @@ export const OAuthServerSettingsForm = () => {
                       </FormItemLayout>
                     </CardContent>
                     <CardContent className="space-y-4">
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="OAUTH_SERVER_AUTHORIZATION_PATH"
                         render={({ field }) => (
@@ -275,9 +275,9 @@ export const OAuthServerSettingsForm = () => {
                             layout="flex-row-reverse"
                             description="Path where you'll implement the OAuth authorization UI (consent screens)."
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_ {...field} placeholder="/auth/authorize" />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -315,7 +315,7 @@ export const OAuthServerSettingsForm = () => {
                       })()}
                     </CardContent>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="OAUTH_SERVER_ALLOW_DYNAMIC_REGISTRATION"
                         render={({ field }) => (
@@ -334,13 +334,13 @@ export const OAuthServerSettingsForm = () => {
                               </>
                             }
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch
                                 checked={field.value}
                                 onCheckedChange={handleDynamicAppsToggle}
                                 disabled={!canUpdateConfig}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -363,7 +363,7 @@ export const OAuthServerSettingsForm = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
       {isSuccess && authConfig?.OAUTH_SERVER_ENABLED && form.watch('OAUTH_SERVER_ENABLED') && (
diff --git a/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx b/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
index ad3fae0dbf..d6550f1db3 100644
--- a/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
@@ -8,12 +8,12 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Switch,
-  useWatch_Shadcn_,
+  useWatch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -279,7 +279,7 @@ export const PasskeysSettingsForm = () => {
     updateAuthConfig({ projectRef, config: payload })
   }
 
-  const passKeysEnabled = useWatch_Shadcn_({ control: form.control, name: 'PASSKEY_ENABLED' })
+  const passKeysEnabled = useWatch({ control: form.control, name: 'PASSKEY_ENABLED' })
 
   if (isPermissionsLoaded && !canReadConfig) {
     return <NoPermission resourceText="view passkey settings" />
@@ -290,11 +290,11 @@ export const PasskeysSettingsForm = () => {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <Card>
           <CardContent>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="PASSKEY_ENABLED"
               render={({ field }) => (
@@ -309,13 +309,13 @@ export const PasskeysSettingsForm = () => {
                     </>
                   }
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch
                       checked={field.value}
                       onCheckedChange={field.onChange}
                       disabled={!canUpdateConfig}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -324,7 +324,7 @@ export const PasskeysSettingsForm = () => {
           {passKeysEnabled && (
             <>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="WEBAUTHN_RP_DISPLAY_NAME"
                   render={({ field }) => (
@@ -333,15 +333,15 @@ export const PasskeysSettingsForm = () => {
                       label="Relying Party Display Name"
                       description="A human-readable name for your application shown during passkey registration."
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ {...field} placeholder="My project" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </CardContent>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="WEBAUTHN_RP_ID"
                   render={({ field }) => (
@@ -350,15 +350,15 @@ export const PasskeysSettingsForm = () => {
                       label="Relying Party ID"
                       description='The domain name for your application (e.g. "example.com"). This determines which passkeys can be used.'
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ {...field} placeholder="example.com" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </CardContent>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="WEBAUTHN_RP_ORIGINS"
                   render={({ field }) => (
@@ -367,9 +367,9 @@ export const PasskeysSettingsForm = () => {
                       label="Relying Party Origins"
                       description='Comma-separated list of allowed origins (e.g. "https://example.com"). HTTPS is required except for localhost.'
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ {...field} placeholder="https://example.com" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -396,6 +396,6 @@ export const PasskeysSettingsForm = () => {
           </CardFooter>
         </Card>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
index 9235a5f47e..e9fd74510d 100644
--- a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
@@ -8,9 +8,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -219,11 +219,11 @@ export const PerformanceSettingsForm = () => {
       <ScaffoldSection isFullWidth>
         <ScaffoldSectionTitle className="mb-4">Request duration</ScaffoldSectionTitle>
 
-        <Form_Shadcn_ {...requestDurationForm}>
+        <Form {...requestDurationForm}>
           <form onSubmit={requestDurationForm.handleSubmit(onSubmitRequestDurationForm)}>
             <Card>
               <CardContent className="pt-6">
-                <FormField_Shadcn_
+                <FormField
                   control={requestDurationForm.control}
                   name="API_MAX_REQUEST_DURATION"
                   render={({ field }) => (
@@ -239,7 +239,7 @@ export const PerformanceSettingsForm = () => {
                     >
                       <div className="flex flex-col gap-2">
                         <div className="relative">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 type="number"
@@ -252,7 +252,7 @@ export const PerformanceSettingsForm = () => {
                                 <InputGroupText>seconds</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </div>
 
                         <p className="text-xs text-right text-foreground-muted">
@@ -286,17 +286,17 @@ export const PerformanceSettingsForm = () => {
               </CardFooter>
             </Card>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </ScaffoldSection>
 
       <ScaffoldSection isFullWidth>
         <ScaffoldSectionTitle className="mb-4">Connection management</ScaffoldSectionTitle>
 
-        <Form_Shadcn_ {...databaseForm}>
+        <Form {...databaseForm}>
           <form onSubmit={databaseForm.handleSubmit(onSubmitDatabaseForm)} className="space-y-4">
             <Card>
               <CardContent className="pt-6 flex flex-col gap-4">
-                <FormField_Shadcn_
+                <FormField
                   control={databaseForm.control}
                   name="DB_MAX_POOL_SIZE_UNIT"
                   render={({ field }) => (
@@ -311,7 +311,7 @@ export const PerformanceSettingsForm = () => {
                         </p>
                       }
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_
                           value={field.value}
                           onValueChange={(value) => {
@@ -357,13 +357,13 @@ export const PerformanceSettingsForm = () => {
                             </SelectItem_Shadcn_>
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </CardContent>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={databaseForm.control}
                   name="DB_MAX_POOL_SIZE"
                   render={({ field }) => (
@@ -382,7 +382,7 @@ export const PerformanceSettingsForm = () => {
                     >
                       <div className="flex flex-col gap-2">
                         <div className="relative">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 type="number"
@@ -395,7 +395,7 @@ export const PerformanceSettingsForm = () => {
                                 </InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </div>
                         {isLoadingMaxConns ? (
                           <ShimmeringLoader className="py-2 w-16 ml-auto" />
@@ -436,7 +436,7 @@ export const PerformanceSettingsForm = () => {
               </CardFooter>
             </Card>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </ScaffoldSection>
     </>
   )
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
index 50500f0cee..53563b70ae 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
@@ -11,11 +11,11 @@ import {
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
@@ -110,36 +110,36 @@ export const PolicyDetailsV2 = ({
     <>
       <div className="px-5 py-5 flex flex-col gap-y-4 border-b">
         <div className="items-start justify-between gap-4 grid grid-cols-12">
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="name"
             render={({ field }) => (
-              <FormItem_Shadcn_ className="col-span-6 flex flex-col gap-y-1">
-                <FormLabel_Shadcn_>Policy Name</FormLabel_Shadcn_>
-                <FormControl_Shadcn_>
+              <FormItem className="col-span-6 flex flex-col gap-y-1">
+                <FormLabel>Policy Name</FormLabel>
+                <FormControl>
                   <Input_Shadcn_
                     {...field}
                     disabled={!canUpdatePolicies}
                     className="bg-control border-control"
                     placeholder="Provide a name for your policy"
                   />
-                </FormControl_Shadcn_>
-                <FormMessage_Shadcn_ />
-              </FormItem_Shadcn_>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
           />
 
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="table"
             render={({ field }) => (
-              <FormItem_Shadcn_ className="col-span-6 flex flex-col gap-y-1">
-                <FormLabel_Shadcn_>
+              <FormItem className="col-span-6 flex flex-col gap-y-1">
+                <FormLabel>
                   Table
                   <code className="text-code-inline">on</code> clause
-                </FormLabel_Shadcn_>
+                </FormLabel>
                 {authContext === 'database' && (
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
                       <PopoverTrigger_Shadcn_ asChild>
                         <Button
@@ -199,32 +199,32 @@ export const PolicyDetailsV2 = ({
                         </Command_Shadcn_>
                       </PopoverContent_Shadcn_>
                     </Popover_Shadcn_>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 )}
                 {authContext === 'realtime' && (
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_
                       disabled
                       value="messages.realtime"
                       className="bg-control border-control"
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 )}
 
-                <FormMessage_Shadcn_ />
-              </FormItem_Shadcn_>
+                <FormMessage />
+              </FormItem>
             )}
           />
 
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="behavior"
             render={({ field }) => (
-              <FormItem_Shadcn_ className="col-span-6 flex flex-col gap-y-1">
-                <FormLabel_Shadcn_>
+              <FormItem className="col-span-6 flex flex-col gap-y-1">
+                <FormLabel>
                   Policy Behavior <code className="text-code-inline">as</code> clause
-                </FormLabel_Shadcn_>
-                <FormControl_Shadcn_>
+                </FormLabel>
+                <FormControl>
                   <Select_Shadcn_
                     disabled={isEditing}
                     value={field.value}
@@ -250,20 +250,20 @@ export const PolicyDetailsV2 = ({
                       </SelectGroup_Shadcn_>
                     </SelectContent_Shadcn_>
                   </Select_Shadcn_>
-                </FormControl_Shadcn_>
-                <FormMessage_Shadcn_ />
-              </FormItem_Shadcn_>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
           />
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="command"
             render={({ field }) => (
-              <FormItem_Shadcn_ className="col-span-12 flex flex-col gap-y-1">
-                <FormLabel_Shadcn_>
+              <FormItem className="col-span-12 flex flex-col gap-y-1">
+                <FormLabel>
                   Policy Command <code className="text-code-inline">for</code> clause
-                </FormLabel_Shadcn_>
-                <FormControl_Shadcn_>
+                </FormLabel>
+                <FormControl>
                   <RadioGroup_Shadcn_
                     disabled={isEditing}
                     value={field.value}
@@ -288,20 +288,20 @@ export const PolicyDetailsV2 = ({
                       />
                     ))}
                   </RadioGroup_Shadcn_>
-                </FormControl_Shadcn_>
-                <FormMessage_Shadcn_ />
-              </FormItem_Shadcn_>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
           />
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="roles"
             render={({ field }) => (
-              <FormItem_Shadcn_ className="col-span-12 flex flex-col gap-y-1">
-                <FormLabel_Shadcn_>
+              <FormItem className="col-span-12 flex flex-col gap-y-1">
+                <FormLabel>
                   Target Roles <code className="text-code-inline">to</code> clause
-                </FormLabel_Shadcn_>
-                <FormControl_Shadcn_>
+                </FormLabel>
+                <FormControl>
                   <MultiSelectV2
                     disabled={!canUpdatePolicies}
                     options={formattedRoles}
@@ -310,9 +310,9 @@ export const PolicyDetailsV2 = ({
                     searchPlaceholder="Search for a role"
                     onChange={(roles) => form.setValue('roles', roles.join(', '))}
                   />
-                </FormControl_Shadcn_>
-                <FormMessage_Shadcn_ />
-              </FormItem_Shadcn_>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
           />
         </div>
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
index 6a8dc027f5..449db9b14f 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
@@ -12,7 +12,7 @@ import {
   Button,
   Checkbox_Shadcn_,
   cn,
-  Form_Shadcn_,
+  Form,
   Label_Shadcn_,
   ScrollArea,
   Sheet,
@@ -290,7 +290,7 @@ export const PolicyEditorPanel = memo(function ({
 
   return (
     <>
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
           <Sheet open={visible} onOpenChange={handleOpenChange}>
             <SheetContent
@@ -571,7 +571,7 @@ export const PolicyEditorPanel = memo(function ({
             </SheetContent>
           </Sheet>
         </form>
-      </Form_Shadcn_>
+      </Form>
 
       <DiscardChangesConfirmationDialog
         {...modalProps}
diff --git a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
index 603a1fbb73..f1d8f94d48 100644
--- a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
@@ -11,9 +11,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -250,11 +250,11 @@ export const ProtectionAuthSettingsForm = () => {
         </PageSectionSummary>
       </PageSectionMeta>
       <PageSectionContent>
-        <Form_Shadcn_ {...protectionForm}>
+        <Form {...protectionForm}>
           <form onSubmit={protectionForm.handleSubmit(onSubmitProtection)} className="space-y-4">
             <Card>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={protectionForm.control}
                   name="SECURITY_CAPTCHA_ENABLED"
                   render={({ field }) => (
@@ -263,13 +263,13 @@ export const ProtectionAuthSettingsForm = () => {
                       label="Enable Captcha protection"
                       description="Protect authentication endpoints from bots and abuse."
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Switch
                           checked={field.value}
                           onCheckedChange={field.onChange}
                           disabled={!canUpdateConfig}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -278,7 +278,7 @@ export const ProtectionAuthSettingsForm = () => {
               {SECURITY_CAPTCHA_ENABLED && (
                 <>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={protectionForm.control}
                       name="SECURITY_CAPTCHA_PROVIDER"
                       render={({ field }) => {
@@ -287,7 +287,7 @@ export const ProtectionAuthSettingsForm = () => {
                         )
                         return (
                           <FormItemLayout layout="flex-row-reverse" label="Choose Captcha Provider">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Select_Shadcn_
                                 value={field.value}
                                 onValueChange={field.onChange}
@@ -304,7 +304,7 @@ export const ProtectionAuthSettingsForm = () => {
                                   ))}
                                 </SelectContent_Shadcn_>
                               </Select_Shadcn_>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                             <InlineLink
                               href={
                                 field.value === 'hcaptcha'
@@ -324,7 +324,7 @@ export const ProtectionAuthSettingsForm = () => {
                   </CardContent>
 
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={protectionForm.control}
                       name="SECURITY_CAPTCHA_SECRET"
                       render={({ field }) => (
@@ -333,9 +333,9 @@ export const ProtectionAuthSettingsForm = () => {
                           label="Captcha secret"
                           description="Obtain this secret from the provider."
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input {...field} reveal copy disabled={!canUpdateConfig} />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -344,7 +344,7 @@ export const ProtectionAuthSettingsForm = () => {
               )}
 
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={protectionForm.control}
                   name="PASSWORD_HIBP_ENABLED"
                   render={({ field }) => (
@@ -383,7 +383,7 @@ export const ProtectionAuthSettingsForm = () => {
               </CardFooter>
             </Card>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </PageSectionContent>
     </PageSection>
   )
diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
index c286afce06..43bb41cb0d 100644
--- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
@@ -10,9 +10,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -221,11 +221,11 @@ export const RateLimits = () => {
     <>
       <PageSection>
         <PageSectionContent>
-          <Form_Shadcn_ {...rateLimitForm}>
+          <Form {...rateLimitForm}>
             <form onSubmit={rateLimitForm.handleSubmit(onSubmitRateLimitForm)}>
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={rateLimitForm.control}
                     name="RATE_LIMIT_EMAIL_SENT"
                     render={({ field }) => (
@@ -236,7 +236,7 @@ export const RateLimits = () => {
                       >
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   type="number"
@@ -248,7 +248,7 @@ export const RateLimits = () => {
                                   <InputGroupText>emails/h</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </TooltipTrigger>
                           {!canUpdateConfig || !canUpdateEmailLimit ? (
                             <TooltipContent side="left" className="w-80 p-4">
@@ -296,7 +296,7 @@ export const RateLimits = () => {
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={rateLimitForm.control}
                     name="RATE_LIMIT_SMS_SENT"
                     render={({ field }) => (
@@ -307,7 +307,7 @@ export const RateLimits = () => {
                       >
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   type="number"
@@ -319,7 +319,7 @@ export const RateLimits = () => {
                                   <InputGroupText>sms/h</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </TooltipTrigger>
                           {!canUpdateConfig || !canUpdateSMSRateLimit ? (
                             <TooltipContent side="left" className="w-80 p-4">
@@ -345,7 +345,7 @@ export const RateLimits = () => {
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={rateLimitForm.control}
                     name="RATE_LIMIT_TOKEN_REFRESH"
                     render={({ field }) => (
@@ -356,7 +356,7 @@ export const RateLimits = () => {
                       >
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   type="number"
@@ -368,7 +368,7 @@ export const RateLimits = () => {
                                   <InputGroupText>requests/5 min</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </TooltipTrigger>
                           {!canUpdateConfig && (
                             <TooltipContent side="left" className="w-80 p-4">
@@ -393,7 +393,7 @@ export const RateLimits = () => {
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={rateLimitForm.control}
                     name="RATE_LIMIT_VERIFY"
                     render={({ field }) => (
@@ -404,7 +404,7 @@ export const RateLimits = () => {
                       >
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   type="number"
@@ -416,7 +416,7 @@ export const RateLimits = () => {
                                   <InputGroupText>requests/5 min</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </TooltipTrigger>
                           {!canUpdateConfig && (
                             <TooltipContent side="left" className="w-80 p-4">
@@ -441,7 +441,7 @@ export const RateLimits = () => {
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={rateLimitForm.control}
                     name="RATE_LIMIT_ANONYMOUS_USERS"
                     render={({ field }) => (
@@ -452,7 +452,7 @@ export const RateLimits = () => {
                       >
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   type="number"
@@ -464,7 +464,7 @@ export const RateLimits = () => {
                                   <InputGroupText>requests/h</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </TooltipTrigger>
                           {!canUpdateConfig || !canUpdateAnonymousUsersRateLimit ? (
                             <TooltipContent side="left" className="w-80 p-4">
@@ -488,7 +488,7 @@ export const RateLimits = () => {
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={rateLimitForm.control}
                     name="RATE_LIMIT_OTP"
                     render={({ field }) => (
@@ -499,7 +499,7 @@ export const RateLimits = () => {
                       >
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   type="number"
@@ -511,7 +511,7 @@ export const RateLimits = () => {
                                   <InputGroupText>requests/5 min</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </TooltipTrigger>
                           {!canUpdateConfig && (
                             <TooltipContent side="left" className="w-80 p-4">
@@ -536,7 +536,7 @@ export const RateLimits = () => {
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={rateLimitForm.control}
                     name="RATE_LIMIT_WEB3"
                     render={({ field }) => (
@@ -547,7 +547,7 @@ export const RateLimits = () => {
                       >
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   type="number"
@@ -559,7 +559,7 @@ export const RateLimits = () => {
                                   <InputGroupText>requests/5 min</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </TooltipTrigger>
                           {!canUpdateConfig || !canUpdateWeb3RateLimit ? (
                             <TooltipContent side="left" className="w-80 p-4">
@@ -601,7 +601,7 @@ export const RateLimits = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
 
@@ -615,11 +615,11 @@ export const RateLimits = () => {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...ipForwardingForm}>
+          <Form {...ipForwardingForm}>
             <form onSubmit={ipForwardingForm.handleSubmit(onSubmitIPForwardingForm)}>
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={ipForwardingForm.control}
                     name="SECURITY_SB_FORWARDED_FOR_ENABLED"
                     render={({ field }) => (
@@ -636,13 +636,13 @@ export const RateLimits = () => {
                           </InlineLink>
                         </>
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={(value) => field.onChange(value)}
                             disabled={!canUpdateConfig}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -666,7 +666,7 @@ export const RateLimits = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
     </>
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
index 7e1c3fc4c5..c8532caf27 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, cn, DialogSectionSeparator, Form_Shadcn_, Modal, ScrollArea } from 'ui'
+import { Button, cn, DialogSectionSeparator, Form, Modal, ScrollArea } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { SingleValueFieldArray } from 'ui-patterns/form/SingleValueFieldArray/SingleValueFieldArray'
 import * as z from 'zod'
@@ -94,7 +94,7 @@ export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalPr
       header="Add new redirect URLs"
       description="This will add a URL to a list of allowed URLs that can interact with your Authentication services for this project."
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <Modal.Content className="flex flex-col gap-y-2 px-0">
             <Label className="px-5">URL</Label>
@@ -130,7 +130,7 @@ export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalPr
             </Button>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
index 4bd9dde293..03b333ed17 100644
--- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
@@ -9,9 +9,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -203,14 +203,14 @@ export const SessionsAuthSettingsForm = () => {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...refreshTokenForm}>
+          <Form {...refreshTokenForm}>
             <form
               onSubmit={refreshTokenForm.handleSubmit(onSubmitRefreshTokens)}
               className="space-y-4"
             >
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={refreshTokenForm.control}
                     name="REFRESH_TOKEN_ROTATION_ENABLED"
                     render={({ field }) => (
@@ -219,19 +219,19 @@ export const SessionsAuthSettingsForm = () => {
                         label="Detect and revoke potentially compromised refresh tokens"
                         description="Prevent replay attacks from potentially compromised refresh tokens."
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </CardContent>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={refreshTokenForm.control}
                     name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                     render={({ field }) => (
@@ -240,7 +240,7 @@ export const SessionsAuthSettingsForm = () => {
                         label="Refresh token reuse interval"
                         description="Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds."
                       >
-                        <FormControl_Shadcn_ className="w-full">
+                        <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
                               type="number"
@@ -252,7 +252,7 @@ export const SessionsAuthSettingsForm = () => {
                               <InputGroupText>seconds</InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -278,7 +278,7 @@ export const SessionsAuthSettingsForm = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
 
@@ -289,14 +289,14 @@ export const SessionsAuthSettingsForm = () => {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...userSessionsForm}>
+          <Form {...userSessionsForm}>
             <form
               onSubmit={userSessionsForm.handleSubmit(onSubmitUserSessions)}
               className="space-y-4"
             >
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={userSessionsForm.control}
                     name="SESSIONS_SINGLE_PER_USER"
                     render={({ field }) => (
@@ -305,20 +305,20 @@ export const SessionsAuthSettingsForm = () => {
                         label="Enforce single session per user"
                         description="If enabled, all but a user's most recently active session will be terminated."
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={userSessionsForm.control}
                     name="SESSIONS_TIMEBOX"
                     render={({ field }) => (
@@ -327,7 +327,7 @@ export const SessionsAuthSettingsForm = () => {
                         label="Time-box user sessions"
                         description="The amount of time before a user is forced to sign in again. Use 0 for never."
                       >
-                        <FormControl_Shadcn_ className="w-full">
+                        <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
                               type="number"
@@ -341,14 +341,14 @@ export const SessionsAuthSettingsForm = () => {
                               </InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </CardContent>
 
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={userSessionsForm.control}
                     name="SESSIONS_INACTIVITY_TIMEOUT"
                     render={({ field }) => (
@@ -357,7 +357,7 @@ export const SessionsAuthSettingsForm = () => {
                         label="Inactivity timeout"
                         description="The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never."
                       >
-                        <FormControl_Shadcn_ className="w-full">
+                        <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
                               type="number"
@@ -371,7 +371,7 @@ export const SessionsAuthSettingsForm = () => {
                               </InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -408,7 +408,7 @@ export const SessionsAuthSettingsForm = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
     </>
diff --git a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
index a78fa23950..875d218dc1 100644
--- a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
+++ b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
@@ -9,9 +9,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
@@ -112,11 +112,11 @@ const SiteUrl = () => {
         </PageSectionSummary>
       </PageSectionMeta>
       <PageSectionContent>
-        <Form_Shadcn_ {...siteUrlForm}>
+        <Form {...siteUrlForm}>
           <form onSubmit={siteUrlForm.handleSubmit(onSubmitSiteUrl)}>
             <Card>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={siteUrlForm.control}
                   name="SITE_URL"
                   render={({ field }) => (
@@ -125,9 +125,9 @@ const SiteUrl = () => {
                       label="Site URL"
                       description="Configure the default redirect URL used when a redirect URL is not specified or doesn't match one from the allow list. This value is also exposed as a template variable in the email templates section. Wildcards cannot be used here."
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ {...field} disabled={!canUpdateConfig} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -150,7 +150,7 @@ const SiteUrl = () => {
               </CardFooter>
             </Card>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </PageSectionContent>
     </PageSection>
   )
diff --git a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
index f611667215..599acb3121 100644
--- a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
@@ -10,9 +10,9 @@ import {
   CardContent,
   CardFooter,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   Input_Shadcn_,
   InputGroup,
@@ -221,11 +221,11 @@ export const SmtpForm = () => {
   return (
     <PageSection>
       <PageSectionContent>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <Card>
               <CardContent>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="ENABLE_SMTP"
                   render={({ field }) => (
@@ -243,13 +243,13 @@ export const SmtpForm = () => {
                         </p>
                       }
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Switch
                           checked={field.value}
                           onCheckedChange={field.onChange}
                           disabled={!canUpdateConfig}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -275,7 +275,7 @@ export const SmtpForm = () => {
                         </p>
                       </div>
                       <div className="col-span-8 space-y-4">
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="SMTP_ADMIN_EMAIL"
                           render={({ field }) => (
@@ -283,18 +283,18 @@ export const SmtpForm = () => {
                               label="Sender email address"
                               description="The email address the emails are sent from."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Input_Shadcn_
                                   {...field}
                                   placeholder="noreply@yourdomain.com"
                                   disabled={!canUpdateConfig}
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
 
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="SMTP_SENDER_NAME"
                           render={({ field }) => (
@@ -302,13 +302,13 @@ export const SmtpForm = () => {
                               label="Sender name"
                               description="Name displayed in the recipient's inbox."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Input_Shadcn_
                                   {...field}
                                   placeholder="Your Name"
                                   disabled={!canUpdateConfig}
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
@@ -325,7 +325,7 @@ export const SmtpForm = () => {
                         </p>
                       </div>
                       <div className="col-span-8 space-y-4">
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="SMTP_HOST"
                           render={({ field }) => (
@@ -333,13 +333,13 @@ export const SmtpForm = () => {
                               label="Host"
                               description="Hostname or IP address of your SMTP server."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Input_Shadcn_
                                   {...field}
                                   placeholder="your.smtp.host.com"
                                   disabled={!canUpdateConfig}
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
@@ -355,7 +355,7 @@ export const SmtpForm = () => {
                           />
                         )}
 
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="SMTP_PORT"
                           render={({ field }) => (
@@ -371,7 +371,7 @@ export const SmtpForm = () => {
                                 </>
                               }
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Input_Shadcn_
                                   type="number"
                                   value={field.value}
@@ -379,12 +379,12 @@ export const SmtpForm = () => {
                                   placeholder="587"
                                   disabled={!canUpdateConfig}
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
 
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="SMTP_MAX_FREQUENCY"
                           render={({ field }) => (
@@ -392,7 +392,7 @@ export const SmtpForm = () => {
                               label="Minimum interval per user"
                               description="The minimum time in seconds between emails before another email can be sent to the same user."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <InputGroup>
                                   <FormInputGroupInput
                                     type="number"
@@ -404,12 +404,12 @@ export const SmtpForm = () => {
                                     <InputGroupText>seconds</InputGroupText>
                                   </InputGroupAddon>
                                 </InputGroup>
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
 
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="SMTP_USER"
                           render={({ field }) => (
@@ -417,18 +417,18 @@ export const SmtpForm = () => {
                               label="Username"
                               description="Username for your SMTP server."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Input_Shadcn_
                                   {...field}
                                   placeholder="SMTP Username"
                                   disabled={!canUpdateConfig}
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
 
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="SMTP_PASS"
                           render={({ field }) => (
@@ -436,9 +436,9 @@ export const SmtpForm = () => {
                               label="Password"
                               description="Password for your SMTP server. For security reasons, this password cannot be viewed once saved."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Input {...field} reveal copy disabled={!canUpdateConfig} />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
@@ -489,7 +489,7 @@ export const SmtpForm = () => {
               </CardFooter>
             </Card>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </PageSectionContent>
     </PageSection>
   )
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
index 1af9df53dd..d772399542 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
@@ -9,7 +9,7 @@ import {
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  FormControl_Shadcn_,
+  FormControl,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -61,7 +61,7 @@ export const AwsRegionSelector = ({
   return (
     <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
       <PopoverTrigger_Shadcn_ asChild>
-        <FormControl_Shadcn_>
+        <FormControl>
           <Button
             type="default"
             role="combobox"
@@ -75,7 +75,7 @@ export const AwsRegionSelector = ({
           >
             {value ?? 'Select a region'}
           </Button>
-        </FormControl_Shadcn_>
+        </FormControl>
       </PopoverTrigger_Shadcn_>
       <PopoverContent_Shadcn_ id={listboxId} className="p-0" sameWidthAsTrigger>
         <Command_Shadcn_>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
index 5cb6ca3658..3f702fc6de 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
@@ -12,9 +12,9 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Separator,
 } from 'ui'
@@ -96,10 +96,10 @@ export const CreateAuth0IntegrationDialog = ({
         </DialogHeader>
         <Separator />
         <DialogSection>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               {/* Enabled flag can't be changed for now because there's no update API call for integrations */}
-              {/* <FormField_Shadcn_
+              {/* <FormField
               key="enabled"
               control={form.control}
               name="enabled"
@@ -109,13 +109,13 @@ export const CreateAuth0IntegrationDialog = ({
                   label={`Enable Auth0 Auth Connection`}
                   layout="flex"
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch
                       checked={field.value}
                       onCheckedChange={field.onChange}
                       disabled={field.disabled}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -124,7 +124,7 @@ export const CreateAuth0IntegrationDialog = ({
                 This will enable a JWT token from your Auth0 project to access data from this
                 Supabase project.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 key="auth0DomainName"
                 control={form.control}
                 name="auth0DomainName"
@@ -139,12 +139,12 @@ export const CreateAuth0IntegrationDialog = ({
                       >
                         https://
                       </Button>
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           className="border-l-0 rounded-none border-r-0 z-50"
                           {...field}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                       <Button
                         type="default"
                         size="small"
@@ -158,7 +158,7 @@ export const CreateAuth0IntegrationDialog = ({
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           {!isCreating && (
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
index 10a9b5f10b..3ab033e448 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
@@ -13,9 +13,9 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Separator,
 } from 'ui'
@@ -108,10 +108,10 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
         </DialogHeader>
         <Separator />
         <DialogSection>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               {/* Enabled flag can't be changed for now because there's no update API call for integrations */}
-              {/* <FormField_Shadcn_
+              {/* <FormField
               key="enabled"
               control={form.control}
               name="enabled"
@@ -121,13 +121,13 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
                   label={`Enable Amazon Cognito Auth Connection`}
                   layout="flex"
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch
                       checked={field.value}
                       onCheckedChange={field.onChange}
                       disabled={field.disabled}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -136,7 +136,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
                 This will enable a JWT token from Amazon Cognito project to access data from this
                 Supabase project.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 key="awsCognitoUserPoolId"
                 control={form.control}
                 name="awsCognitoUserPoolId"
@@ -151,14 +151,14 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
                       >
                         https://cognito-idp.{awsRegion}.amazonaws.com/
                       </Button>
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ className="rounded-l-none border-l-0 z-50" {...field} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </div>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="awsRegion"
                 render={({ field }) => (
@@ -168,7 +168,7 @@ export const CreateAwsCognitoAuthIntegrationDialog = ({
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           {!isCreating && (
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx
index 9bb0e97c04..74373b3b79 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx
@@ -11,9 +11,9 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Separator,
 } from 'ui'
@@ -103,7 +103,7 @@ export const CreateClerkAuthIntegrationDialog = ({
 
         <Separator />
         <DialogSection>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               <p className="text-sm text-foreground-light">
                 Register your Clerk domain. Visit{' '}
@@ -116,25 +116,25 @@ export const CreateClerkAuthIntegrationDialog = ({
                 </InlineLink>{' '}
                 to configure your Clerk instance.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 key="domain"
                 control={form.control}
                 name="domain"
                 render={({ field }) => (
                   <FormItemLayout label="Clerk Domain">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         placeholder={
                           'https://clerk.example.com or https://example.clerk.accounts.dev'
                         }
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           <Button disabled={isPending} type="default" onClick={() => onClose()}>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
index 7dfe36372c..045b7fca9c 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
@@ -12,9 +12,9 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Separator,
 } from 'ui'
@@ -98,10 +98,10 @@ export const CreateFirebaseAuthIntegrationDialog = ({
 
         <Separator />
         <DialogSection>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               {/* Enabled flag can't be changed for now because there's no update API call for integrations */}
-              {/* <FormField_Shadcn_
+              {/* <FormField
               key="enabled"
               control={form.control}
               name="enabled"
@@ -111,13 +111,13 @@ export const CreateFirebaseAuthIntegrationDialog = ({
                   label={`Enable Firebase Auth Connection`}
                   layout="flex"
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch
                       checked={field.value}
                       onCheckedChange={field.onChange}
                       disabled={field.disabled}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -127,20 +127,20 @@ export const CreateFirebaseAuthIntegrationDialog = ({
                 This will enable a JWT token from a specific Firebase project to access data from
                 this Supabase project.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 key="firebaseProjectId"
                 control={form.control}
                 name="firebaseProjectId"
                 render={({ field }) => (
                   <FormItemLayout label="Firebase Auth Project ID">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           {!isCreating && (
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx
index 05a64d30cf..fd4c525dbf 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateWorkOSDialog.tsx
@@ -12,9 +12,9 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Separator,
 } from 'ui'
@@ -102,10 +102,10 @@ export const CreateWorkOSIntegrationDialog = ({
 
         <Separator />
         <DialogSection>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               {/* Enabled flag can't be changed for now because there's no update API call for integrations */}
-              {/* <FormField_Shadcn_
+              {/* <FormField
               key="enabled"
               control={form.control}
               name="enabled"
@@ -115,13 +115,13 @@ export const CreateWorkOSIntegrationDialog = ({
                   label={`Enable Firebase Auth Connection`}
                   layout="flex"
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch
                       checked={field.value}
                       onCheckedChange={field.onChange}
                       disabled={field.disabled}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -130,7 +130,7 @@ export const CreateWorkOSIntegrationDialog = ({
               <p className="text-sm text-foreground-light">
                 Enables a JWT from WorkOS to access data from this Supabase project.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 key="issuerURL"
                 control={form.control}
                 name="issuerURL"
@@ -139,17 +139,17 @@ export const CreateWorkOSIntegrationDialog = ({
                     label="WorkOS Issuer URL"
                     description="Obtain your issuer URL from the WorkOS dashboard."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         placeholder="https://api.workos.com/user_management/client_ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           {!isCreating && (
diff --git a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
index a8bf20aa61..e53dffad9a 100644
--- a/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/BanUserModal.tsx
@@ -7,9 +7,9 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Modal,
   Select_Shadcn_,
@@ -87,7 +87,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
       header="Confirm to ban user"
       onCancel={() => onClose()}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <Modal.Content className="flex flex-col gap-y-3">
             <p className="text-sm">
@@ -95,23 +95,23 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
               for a specified duration.
             </p>
             <div className="flex items-start gap-x-2 [&>div:first-child]:flex-grow">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="value"
                 render={({ field }) => (
                   <FormItemLayout className="[&>div>div]:mt-0" label="Set a ban duration">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="unit"
                 render={({ field }) => (
                   <FormItemLayout className="[&>div>div]:mt-0 mt-[33px]">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Select_Shadcn_
                         {...field}
                         value={field.value}
@@ -125,7 +125,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
                           <SelectItem_Shadcn_ value="days">Days</SelectItem_Shadcn_>
                         </SelectContent_Shadcn_>
                       </Select_Shadcn_>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -150,7 +150,7 @@ export const BanUserModal = ({ visible, user, onClose }: BanUserModalProps) => {
             </Button>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
index 5a2996693a..0249904343 100644
--- a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
@@ -12,12 +12,12 @@ import {
   DialogHeader,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
 } from 'ui'
 import * as z from 'zod'
@@ -68,19 +68,19 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
           <DialogTitle>Create a new user</DialogTitle>
         </DialogHeader>
         <DialogSectionSeparator />
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id="create-user"
             className="flex flex-col gap-y-4 p-6"
             onSubmit={form.handleSubmit(onCreateUser)}
           >
-            <FormField_Shadcn_
+            <FormField
               name="email"
               control={form.control}
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex flex-col gap-1">
-                  <FormLabel_Shadcn_>Email address</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem className="flex flex-col gap-1">
+                  <FormLabel>Email address</FormLabel>
+                  <FormControl>
                     <div className="items-center relative">
                       <Mail
                         size={18}
@@ -98,19 +98,19 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
                         className="pl-8"
                       />
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               name="password"
               control={form.control}
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex flex-col gap-1">
-                  <FormLabel_Shadcn_>User Password</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem className="flex flex-col gap-1">
+                  <FormLabel>User Password</FormLabel>
+                  <FormControl>
                     <div className="items-center relative">
                       <Lock
                         size={18}
@@ -127,33 +127,33 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
                         className="pl-8"
                       />
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               name="autoConfirmUser"
               control={form.control}
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex items-center gap-x-2">
-                  <FormControl_Shadcn_>
+                <FormItem className="flex items-center gap-x-2">
+                  <FormControl>
                     <Checkbox_Shadcn_
                       checked={field.value}
                       onCheckedChange={(value) => field.onChange(value)}
                     />
-                  </FormControl_Shadcn_>
-                  <FormLabel_Shadcn_>Auto Confirm User?</FormLabel_Shadcn_>
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormLabel>Auto Confirm User?</FormLabel>
+                </FormItem>
               )}
             />
 
-            <FormLabel_Shadcn_>
+            <FormLabel>
               <p className="text-sm text-foreground-lighter">
                 A confirmation email will not be sent when creating a user via this form.
               </p>
-            </FormLabel_Shadcn_>
+            </FormLabel>
 
             <Button
               block
@@ -165,7 +165,7 @@ const CreateUserModal = ({ visible, setVisible }: CreateUserModalProps) => {
               Create user
             </Button>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
index 6e47130e80..59b625a4f0 100644
--- a/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
@@ -3,14 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-  Modal,
-} from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_, Modal } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
@@ -69,17 +62,17 @@ const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => {
       header="Invite a new user"
       onCancel={handleToggle}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <Modal.Content>
           <form id={formId} onSubmit={form.handleSubmit(onInviteUser)} noValidate>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="email"
               render={({ field }) => (
                 <FormItemLayout layout="vertical" label="User email">
-                  <FormControl_Shadcn_ className="relative col-span-6">
+                  <FormControl className="relative col-span-6">
                     <Input_Shadcn_ {...field} />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -98,7 +91,7 @@ const InviteUserModal = ({ visible, setVisible }: InviteUserModalProps) => {
             Invite user
           </Button>
         </Modal.Content>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
index d021f3b0eb..6ff9ad1a13 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -26,10 +26,10 @@ import {
   CommandInput_Shadcn_ as CommandInput,
   CommandItem_Shadcn_ as CommandItem,
   CommandList_Shadcn_ as CommandList,
-  FormControl_Shadcn_ as FormControl,
-  FormField_Shadcn_ as FormField,
-  FormItem_Shadcn_,
-  FormMessage_Shadcn_ as FormMessage,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
   Input_Shadcn_ as Input,
   Popover_Shadcn_ as Popover,
   PopoverContent_Shadcn_ as PopoverContent,
@@ -446,12 +446,12 @@ export const NewPaymentMethodElement = forwardRef(
                   name="tax_id_value"
                   control={form.control}
                   render={({ field }) => (
-                    <FormItem_Shadcn_>
+                    <FormItem>
                       <FormControl>
                         <Input {...field} placeholder={selectedTaxId?.placeholder} />
                       </FormControl>
                       <FormMessage />
-                    </FormItem_Shadcn_>
+                    </FormItem>
                   )}
                 />
               )}
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 21a2a3db8a..53c987fa0c 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -21,9 +21,9 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Label_Shadcn_ as Label,
   Switch,
@@ -291,7 +291,7 @@ export const CreateBranchModal = () => {
         </DialogHeader>
         <DialogSectionSeparator />
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
             {promptPlanUpgrade && (
               <UpgradeToPro
@@ -309,18 +309,18 @@ export const CreateBranchModal = () => {
               padding="medium"
               className={cn('space-y-4', promptPlanUpgrade && 'opacity-25 pointer-events-none')}
             >
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="branchName"
                 render={({ field }) => (
                   <FormItemLayout label="Preview Branch Name">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         placeholder="e.g. staging, dev-feature-x"
                         autoComplete="off"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -341,7 +341,7 @@ export const CreateBranchModal = () => {
 
               {isSuccessConnections &&
                 (githubConnection ? (
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="gitBranchName"
                     render={({ field }) => (
@@ -372,7 +372,7 @@ export const CreateBranchModal = () => {
                         description="Automatically deploy changes on every commit"
                       >
                         <div className="relative w-full">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input_Shadcn_
                               {...field}
                               placeholder="e.g. main, feat/some-feature"
@@ -382,7 +382,7 @@ export const CreateBranchModal = () => {
                                 setIsGitBranchValid(false)
                               }}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                           <div className="absolute top-2.5 right-3 flex items-center gap-2">
                             {field.value ? (
                               isCheckingGHBranchValidity ? (
@@ -411,7 +411,7 @@ export const CreateBranchModal = () => {
                 ))}
 
               {allowDataBranching && (
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="withData"
                   render={({ field }) => (
@@ -426,13 +426,13 @@ export const CreateBranchModal = () => {
                       className="[&>div>label]:mb-1"
                       description="Clone production data into this branch"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Switch
                           disabled={!hasPitrEnabled}
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -632,7 +632,7 @@ export const CreateBranchModal = () => {
               </ButtonTooltip>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
index 8a35da8fdd..ac0c4620c6 100644
--- a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
@@ -17,9 +17,9 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Label_Shadcn_ as Label,
 } from 'ui'
@@ -215,21 +215,21 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
           <DialogTitle>Edit branch "{branch?.name}"</DialogTitle>
         </DialogHeader>
         <DialogSectionSeparator />
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
             <DialogSection padding="medium" className="space-y-4">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="branchName"
                 render={({ field }) => (
                   <FormItemLayout label="Preview branch name">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         placeholder="e.g. staging, dev-feature-x"
                         autoComplete="off"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -250,7 +250,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
 
               {isSuccessConnections &&
                 (githubConnection ? (
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="gitBranchName"
                     render={({ field }) => (
@@ -276,7 +276,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
                         description="Automatically deploy changes on every commit"
                       >
                         <div className="relative">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input_Shadcn_
                               {...field}
                               placeholder="e.g. main, feat/some-feature"
@@ -286,7 +286,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
                                 setIsGitBranchValid(false)
                               }}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                           <div className="absolute top-2.5 right-3 flex items-center gap-2">
                             {field.value ? (
                               isChecking ? (
@@ -338,7 +338,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
               </Button>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx
index 71a86456b5..95c017c379 100644
--- a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/CreateNewProjectDialog.tsx
@@ -11,9 +11,9 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input,
   Input_Shadcn_,
 } from 'ui'
@@ -102,7 +102,7 @@ export const CreateNewProjectDialog = ({
             This process will create a new project and restore your database to it.
           </DialogDescription>
         </DialogHeader>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id={'create-new-project-form'}
             onSubmit={form.handleSubmit((data) => {
@@ -134,23 +134,23 @@ export const CreateNewProjectDialog = ({
             })}
           >
             <DialogSection className="pb-6 space-y-4 text-sm">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItemLayout label="New Project Name">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ placeholder="Enter a name" type="text" {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="password"
                 render={({ field }) => (
                   <FormItemLayout>
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input
                         id="db-password"
                         label="Database password"
@@ -175,7 +175,7 @@ export const CreateNewProjectDialog = ({
                           />
                         }
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -190,7 +190,7 @@ export const CreateNewProjectDialog = ({
               </Button>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
index 27effcb5f3..7991359fa6 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
@@ -24,13 +24,13 @@ import {
   AlertTitle_Shadcn_,
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   SidePanel,
 } from 'ui'
@@ -144,32 +144,32 @@ const CreateEnumeratedTypeSidePanel = ({
       }}
     >
       <SidePanel.Content className="py-4">
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_>Name</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
                     <Input_Shadcn_ {...field} />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="description"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_>Description</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
                     <Input_Shadcn_ {...field} />
-                  </FormControl_Shadcn_>
-                  <FormDescription_Shadcn_>Optional</FormDescription_Shadcn_>
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormDescription>Optional</FormDescription>
+                </FormItem>
               )}
             />
 
@@ -242,7 +242,7 @@ const CreateEnumeratedTypeSidePanel = ({
               Update
             </Button>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </SidePanel.Content>
     </SidePanel>
   )
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
index 3b56e75755..4673a34a45 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
@@ -24,13 +24,13 @@ import {
   AlertTitle_Shadcn_,
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   SidePanel,
 } from 'ui'
@@ -179,32 +179,32 @@ const EditEnumeratedTypeSidePanel = ({
       }}
     >
       <SidePanel.Content className="py-4">
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_>Name</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
                     <Input_Shadcn_ {...field} />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="description"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_>Description</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
                     <Input_Shadcn_ {...field} />
-                  </FormControl_Shadcn_>
-                  <FormDescription_Shadcn_>Optional</FormDescription_Shadcn_>
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormDescription>Optional</FormDescription>
+                </FormItem>
               )}
             />
 
@@ -275,7 +275,7 @@ const EditEnumeratedTypeSidePanel = ({
               Update
             </Button>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </SidePanel.Content>
     </SidePanel>
   )
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
index 2b2b6391e5..8c23ba3228 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
@@ -2,15 +2,7 @@ import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { GripVertical, Trash } from 'lucide-react'
 import type { Control, FieldPath, FieldValues } from 'react-hook-form'
-import {
-  Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
-  Input_Shadcn_,
-} from 'ui'
+import { Button, FormControl, FormField, FormItem, FormLabel, FormMessage, Input_Shadcn_ } from 'ui'
 
 interface EnumeratedTypeValueRowProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -44,13 +36,13 @@ const EnumeratedTypeValueRow = <TFieldValues extends FieldValues>({
   }
 
   return (
-    <FormField_Shadcn_
+    <FormField
       control={control}
       name={name}
       render={({ field: inputField }) => (
-        <FormItem_Shadcn_ ref={setNodeRef} style={style}>
-          <FormLabel_Shadcn_ className="sr-only">Value {index}</FormLabel_Shadcn_>
-          <FormControl_Shadcn_>
+        <FormItem ref={setNodeRef} style={style}>
+          <FormLabel className="sr-only">Value {index}</FormLabel>
+          <FormControl>
             <div className="flex items-center space-x-2 space-y-2">
               <button
                 ref={setActivatorNodeRef}
@@ -74,9 +66,9 @@ const EnumeratedTypeValueRow = <TFieldValues extends FieldValues>({
                 onClick={() => onRemoveValue()}
               />
             </div>
-          </FormControl_Shadcn_>
-          <FormMessage_Shadcn_ className="ml-6" />
-        </FormItem_Shadcn_>
+          </FormControl>
+          <FormMessage className="ml-6" />
+        </FormItem>
       )}
     />
   )
diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index 19984597c9..efaa8c3028 100644
--- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -11,9 +11,9 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -168,7 +168,7 @@ export const EnableExtensionModal = ({
         )}
 
         <DialogSection>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id="enable-extensions-form" onSubmit={form.handleSubmit(onSubmit)}>
               {isLoading ? (
                 <div className="space-y-2">
@@ -191,7 +191,7 @@ export const EnableExtensionModal = ({
                 </div>
               ) : (
                 <div className="flex flex-col gap-y-2">
-                  <FormField_Shadcn_
+                  <FormField
                     key="schema"
                     name="schema"
                     control={form.control}
@@ -200,7 +200,7 @@ export const EnableExtensionModal = ({
                         name="schema"
                         label="Select a schema to enable the extension for"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select_Shadcn_
                             value={field.value}
                             onValueChange={field.onChange}
@@ -231,7 +231,7 @@ export const EnableExtensionModal = ({
                               })}
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -244,15 +244,15 @@ export const EnableExtensionModal = ({
                   )}
 
                   {schema === 'custom' && (
-                    <FormField_Shadcn_
+                    <FormField
                       key="name"
                       name="name"
                       control={form.control}
                       render={({ field }) => (
                         <FormItemLayout name="name" label="Schema name">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input_Shadcn_ {...field} />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -260,7 +260,7 @@ export const EnableExtensionModal = ({
                 </div>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
 
         <DialogFooter>
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/CreateFunctionConfigParamsSection.test.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/CreateFunctionConfigParamsSection.test.tsx
index c5870c13ab..0a795ba801 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/CreateFunctionConfigParamsSection.test.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/CreateFunctionConfigParamsSection.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useForm } from 'react-hook-form'
-import { Form_Shadcn_ } from 'ui'
+import { Form } from 'ui'
 import { describe, expect, it } from 'vitest'
 
 import { CreateFunctionConfigParamsSection } from './CreateFunctionConfigParamsSection'
@@ -18,9 +18,9 @@ const CreateFunctionConfigParamsHarness = () => {
   })
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <CreateFunctionConfigParamsSection />
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx
index 1963ff4305..c3679e365e 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/FunctionEditor.tsx
@@ -1,5 +1,5 @@
 import { Maximize2, Minimize2 } from 'lucide-react'
-import { Button, cn, FormControl_Shadcn_, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { Button, cn, FormControl, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
 
@@ -16,7 +16,7 @@ export const FunctionEditor = ({
 }) => {
   return (
     <div className={cn('rounded-md relative group flex-grow')}>
-      <FormControl_Shadcn_>
+      <FormControl>
         {language !== undefined && (
           <CodeEditor
             id="database-functions-editor"
@@ -26,7 +26,7 @@ export const FunctionEditor = ({
             onInputChange={field.onChange}
           />
         )}
-      </FormControl_Shadcn_>
+      </FormControl>
       <div
         className={cn(
           'absolute top-0 right-2 bg-surface-300 border border-strong rounded h-[28px]',
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index 11c9daec8f..7174a79ea5 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -7,13 +7,13 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   Radio,
   ScrollArea,
@@ -168,14 +168,14 @@ export const CreateFunction = ({
         <div className="flex flex-col grow w-full">
           <CreateFunctionHeader selectedFunction={func?.name} isDuplicating={isDuplicating} />
           <Separator />
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={FORM_ID}
               className="flex-grow overflow-auto"
               onSubmit={form.handleSubmit(onSubmit)}
             >
               <SheetSection className={focusedEditor ? 'hidden' : ''}>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="name"
                   render={({ field }) => (
@@ -184,16 +184,16 @@ export const CreateFunction = ({
                       description="Name will also be used for the function name in postgres"
                       layout="horizontal"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ {...field} placeholder="Name of function" />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               </SheetSection>
               <Separator className={focusedEditor ? 'hidden' : ''} />
               <SheetSection className={focusedEditor ? 'hidden' : 'space-y-4'}>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="schema"
                   render={({ field }) => (
@@ -202,19 +202,19 @@ export const CreateFunction = ({
                       description="Tables made in the table editor will be in 'public'"
                       layout="horizontal"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <SchemaSelector
                           selectedSchemaName={field.value}
                           excludedSchemas={protectedSchemas?.map((s) => s.name)}
                           size="small"
                           onSelectSchema={(name) => field.onChange(name)}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
                 {!isEditing && (
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="return_type"
                     render={({ field }) => (
@@ -247,21 +247,19 @@ export const CreateFunction = ({
               </SheetSection>
               <Separator className={focusedEditor ? 'hidden' : ''} />
               <SheetSection className={`${focusedEditor ? 'h-full' : ''} !px-0`}>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="definition"
                   render={({ field }) => (
-                    <FormItem_Shadcn_ className="space-y-4 flex flex-col h-full">
+                    <FormItem className="space-y-4 flex flex-col h-full">
                       <div className="px-content">
-                        <FormLabel_Shadcn_ className="text-base text-foreground">
-                          Definition
-                        </FormLabel_Shadcn_>
-                        <FormDescription_Shadcn_ className="text-sm text-foreground-light">
+                        <FormLabel className="text-base text-foreground">Definition</FormLabel>
+                        <FormDescription className="text-sm text-foreground-light">
                           <p>
                             The language below should be written in <code>{language}</code>.
                           </p>
                           {!isEditing && <p>Change the language in the Advanced Settings below.</p>}
-                        </FormDescription_Shadcn_>
+                        </FormDescription>
                       </div>
                       <div
                         className={cn(
@@ -277,8 +275,8 @@ export const CreateFunction = ({
                         />
                       </div>
 
-                      <FormMessage_Shadcn_ className="px-content" />
-                    </FormItem_Shadcn_>
+                      <FormMessage className="px-content" />
+                    </FormItem>
                   )}
                 />
               </SheetSection>
@@ -301,7 +299,7 @@ export const CreateFunction = ({
                     <>
                       <SheetSection className={focusedEditor ? 'hidden' : 'space-y-2 pt-0'}>
                         <FormFieldLanguage />
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="behavior"
                           render={({ field }) => (
@@ -337,12 +335,12 @@ export const CreateFunction = ({
                       <Separator className={focusedEditor ? 'hidden' : ''} />
                       <SheetSection className={focusedEditor ? 'hidden' : ''}>
                         <h5 className="text-base text-foreground mb-4">Type of Security</h5>
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="security_definer"
                           render={({ field }) => (
-                            <FormItem_Shadcn_>
-                              <FormControl_Shadcn_ className="col-span-8">
+                            <FormItem>
+                              <FormControl className="col-span-8">
                                 {/* TODO: This RadioGroup imports Formik state, replace it with a clean component */}
                                 <Radio.Group
                                   type="cards"
@@ -377,9 +375,9 @@ export const CreateFunction = ({
                                     }
                                   />
                                 </Radio.Group>
-                              </FormControl_Shadcn_>
-                              <FormMessage_Shadcn_ />
-                            </FormItem_Shadcn_>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
                           )}
                         />
                       </SheetSection>
@@ -388,7 +386,7 @@ export const CreateFunction = ({
                 </>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
           <SheetFooter>
             <Button disabled={isCreating || isUpdating} type="default" onClick={confirmOnClose}>
               Cancel
@@ -433,22 +431,22 @@ const FormFieldArgs = ({ readonly }: FormFieldConfigParamsProps) => {
         {fields.map((field, index) => {
           return (
             <div className="flex flex-row space-x-1" key={field.id}>
-              <FormField_Shadcn_
+              <FormField
                 name={`args.${index}.name`}
                 render={({ field }) => (
-                  <FormItem_Shadcn_ className="flex-1">
-                    <FormControl_Shadcn_>
+                  <FormItem className="flex-1">
+                    <FormControl>
                       <Input_Shadcn_ {...field} disabled={readonly} placeholder="argument_name" />
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 name={`args.${index}.type`}
                 render={({ field }) => (
-                  <FormItem_Shadcn_ className="flex-1">
-                    <FormControl_Shadcn_>
+                  <FormItem className="flex-1">
+                    <FormControl>
                       {readonly ? (
                         <Input_Shadcn_ value={field.value} disabled readOnly className="h-auto" />
                       ) : (
@@ -473,9 +471,9 @@ const FormFieldArgs = ({ readonly }: FormFieldConfigParamsProps) => {
                           </Select_Shadcn_>
                         </>
                       )}
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
 
@@ -534,7 +532,7 @@ const FormFieldLanguage = () => {
   }, [enabledExtensions])
 
   return (
-    <FormField_Shadcn_
+    <FormField
       name="language"
       render={({ field }) => (
         <FormItemLayout label="Language" layout="horizontal">
diff --git a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
index 672447796f..da5783ccc1 100644
--- a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
@@ -8,7 +8,7 @@ import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
 import { useEffect, useRef, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, Form_Shadcn_, SidePanel } from 'ui'
+import { Button, Form, SidePanel } from 'ui'
 
 import { FormSchema, WebhookFormValues } from './EditHookPanel.constants'
 import { FormContents } from './FormContents'
@@ -339,11 +339,11 @@ export const EditHookPanel = () => {
           </div>
         }
       >
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
             <FormContents form={form} selectedHook={selectedHook} />
           </form>
-        </Form_Shadcn_>
+        </Form>
       </SidePanel>
       <DiscardChangesConfirmationDialog {...modalProps} />
     </>
diff --git a/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx b/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx
index 551d90076a..2fb74cb703 100644
--- a/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx
@@ -6,8 +6,8 @@ import { useEffect } from 'react'
 import { UseFormReturn } from 'react-hook-form'
 import {
   Checkbox_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Label_Shadcn_,
   RadioGroupStacked,
@@ -18,7 +18,7 @@ import {
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
   SidePanel,
-  useWatch_Shadcn_,
+  useWatch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -63,8 +63,8 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
 
   const legacyServiceRole = keys.find((x) => x.name === 'service_role')?.api_key ?? '[YOUR API KEY]'
 
-  const httpUrl = useWatch_Shadcn_({ control: form.control, name: 'http_url' })
-  const httpHeaders = useWatch_Shadcn_({ control: form.control, name: 'httpHeaders' })
+  const httpUrl = useWatch({ control: form.control, name: 'http_url' })
+  const httpHeaders = useWatch({ control: form.control, name: 'httpHeaders' })
 
   const { data: tables = [] } = useTableNamesQuery({
     projectRef: project?.ref,
@@ -105,14 +105,14 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
     <div>
       <FormSection header={<FormSectionLabel className="lg:!col-span-4">General</FormSectionLabel>}>
         <FormSectionContent loading={false} className="lg:!col-span-8">
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="name"
             render={({ field }) => (
               <FormItemLayout label="Name" layout="vertical" className="gap-1">
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input_Shadcn_ {...field} placeholder="my_webhook" />
-                </FormControl_Shadcn_>
+                </FormControl>
                 <p className="mt-2 text-xs text-foreground-lighter">
                   Do not use spaces/whitespaces
                 </p>
@@ -137,7 +137,7 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
         }
       >
         <FormSectionContent loading={false} className="lg:!col-span-8">
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="table_id"
             render={({ field }) => (
@@ -148,11 +148,11 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
                 description="This is the table the trigger will watch for changes. You can only select 1 table for a trigger."
               >
                 <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <SelectTrigger_Shadcn_>
                       <SelectValue_Shadcn_ placeholder="Select a table" />
                     </SelectTrigger_Shadcn_>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                   <SelectContent_Shadcn_>
                     {tables.map((table) => (
                       <SelectItem_Shadcn_ key={table.id} value={table.id.toString()}>
@@ -168,7 +168,7 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
             )}
           />
 
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="events"
             render={({ field }) => (
@@ -216,12 +216,12 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
         }
       >
         <FormSectionContent loading={false} className="lg:!col-span-8">
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="function_type"
             render={({ field }) => (
               <FormItemLayout label="Type of webhook" layout="vertical" className="gap-1">
-                <FormControl_Shadcn_>
+                <FormControl>
                   <RadioGroupStacked
                     value={field.value}
                     onValueChange={(functionType) => {
@@ -270,7 +270,7 @@ export const FormContents = ({ form, selectedHook }: FormContentsProps) => {
                       </RadioGroupStackedItem>
                     ))}
                   </RadioGroupStacked>
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
diff --git a/apps/studio/components/interfaces/Database/Hooks/HTTPHeaders.tsx b/apps/studio/components/interfaces/Database/Hooks/HTTPHeaders.tsx
index ed901d5e38..4f41ad316e 100644
--- a/apps/studio/components/interfaces/Database/Hooks/HTTPHeaders.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/HTTPHeaders.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { UseFormReturn } from 'react-hook-form'
-import { useWatch_Shadcn_ } from 'ui'
+import { useWatch } from 'ui'
 import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
 
 import { WebhookFormValues } from './EditHookPanel.constants'
@@ -31,7 +31,7 @@ export const HTTPHeaders = ({ form }: HTTPHeadersProps) => {
   const { serviceKey, secretKey } = getKeys(apiKeys)
   const apiKey = secretKey?.api_key ?? serviceKey?.api_key ?? '[YOUR API KEY]'
 
-  const functionType = useWatch_Shadcn_({ control: form.control, name: 'function_type' })
+  const functionType = useWatch({ control: form.control, name: 'function_type' })
   const addActions =
     functionType === 'supabase_function'
       ? buildEdgeFunctionHeaderAddActions({
diff --git a/apps/studio/components/interfaces/Database/Hooks/HTTPParameters.test.tsx b/apps/studio/components/interfaces/Database/Hooks/HTTPParameters.test.tsx
index 845ac2945f..81c6953311 100644
--- a/apps/studio/components/interfaces/Database/Hooks/HTTPParameters.test.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/HTTPParameters.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useForm } from 'react-hook-form'
-import { Form_Shadcn_ } from 'ui'
+import { Form } from 'ui'
 import { describe, expect, it } from 'vitest'
 
 import { type WebhookFormValues } from './EditHookPanel.constants'
@@ -23,9 +23,9 @@ const HTTPParametersHarness = () => {
   })
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <HTTPParameters form={form} />
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
diff --git a/apps/studio/components/interfaces/Database/Hooks/HTTPRequestConfig.tsx b/apps/studio/components/interfaces/Database/Hooks/HTTPRequestConfig.tsx
index 5d546bb46b..fed4479455 100644
--- a/apps/studio/components/interfaces/Database/Hooks/HTTPRequestConfig.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/HTTPRequestConfig.tsx
@@ -3,15 +3,15 @@ import Link from 'next/link'
 import { UseFormReturn } from 'react-hook-form'
 import {
   Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
-  useWatch_Shadcn_,
+  useWatch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -35,7 +35,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
   const { data: functions } = useEdgeFunctionsQuery({ projectRef: ref })
 
   const edgeFunctions = functions ?? []
-  const functionType = useWatch_Shadcn_({ control: form.control, name: 'function_type' })
+  const functionType = useWatch({ control: form.control, name: 'function_type' })
 
   return (
     <FormSection
@@ -50,17 +50,17 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
       }
     >
       <FormSectionContent loading={false} className="lg:!col-span-8">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="http_method"
           render={({ field }) => (
             <FormItemLayout label="Method" layout="vertical" className="gap-1">
               <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
-                <FormControl_Shadcn_>
+                <FormControl>
                   <SelectTrigger_Shadcn_>
                     <SelectValue_Shadcn_ />
                   </SelectTrigger_Shadcn_>
-                </FormControl_Shadcn_>
+                </FormControl>
                 <SelectContent_Shadcn_>
                   <SelectItem_Shadcn_ value="GET">GET</SelectItem_Shadcn_>
                   <SelectItem_Shadcn_ value="POST">POST</SelectItem_Shadcn_>
@@ -71,7 +71,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
         />
 
         {functionType === 'http_request' ? (
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="http_url"
             render={({ field }) => (
@@ -81,9 +81,9 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
                 className="gap-1"
                 description="URL of the HTTP request. Must include HTTP/HTTPS"
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input_Shadcn_ {...field} placeholder="http://api.com/path/resource" />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
@@ -98,7 +98,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
             </div>
           </div>
         ) : functionType === 'supabase_function' && edgeFunctions.length > 0 ? (
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="http_url"
             render={({ field }) => (
@@ -108,11 +108,11 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
                 className="gap-1"
               >
                 <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <SelectTrigger_Shadcn_>
                       <SelectValue_Shadcn_ placeholder="Select an edge function" />
                     </SelectTrigger_Shadcn_>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                   <SelectContent_Shadcn_>
                     {edgeFunctions.map((fn) => {
                       const restUrl = selectedProject?.restUrl
@@ -132,7 +132,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
           />
         ) : null}
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="timeout_ms"
           render={({ field }) => (
@@ -142,7 +142,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
               layout="vertical"
               className="gap-1"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <div className="relative">
                   <Input_Shadcn_
                     {...field}
@@ -154,7 +154,7 @@ export const HTTPRequestConfig = ({ form }: HTTPRequestConfigProps) => {
                     ms
                   </span>
                 </div>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
index fd20f1e541..84406fc3e6 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
@@ -6,8 +6,8 @@ import {
   AccordionItem_Shadcn_,
   AccordionTrigger_Shadcn_,
   Badge,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -49,7 +49,7 @@ export const AdvancedSettings = ({
           </AccordionTrigger_Shadcn_>
           <AccordionContent_Shadcn_ className="!pb-0 pt-3 [&>div]:flex [&>div]:flex-col [&>div]:gap-y-4">
             {/* Batch wait time - applies to all destinations */}
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="maxFillMs"
               render={({ field }) => (
@@ -69,7 +69,7 @@ export const AdvancedSettings = ({
                     </>
                   }
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <InputGroup>
                       <FormInputGroupInput
                         {...field}
@@ -82,12 +82,12 @@ export const AdvancedSettings = ({
                         <InputGroupText>milliseconds</InputGroupText>
                       </InputGroupAddon>
                     </InputGroup>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="maxTableSyncWorkers"
               render={({ field }) => (
@@ -103,7 +103,7 @@ export const AdvancedSettings = ({
                     </>
                   }
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <InputGroup>
                       <FormInputGroupInput
                         {...field}
@@ -116,12 +116,12 @@ export const AdvancedSettings = ({
                         <InputGroupText>workers</InputGroupText>
                       </InputGroupAddon>
                     </InputGroup>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="maxCopyConnectionsPerTable"
               render={({ field }) => (
@@ -140,7 +140,7 @@ export const AdvancedSettings = ({
                     </>
                   }
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <InputGroup>
                       <FormInputGroupInput
                         {...field}
@@ -153,12 +153,12 @@ export const AdvancedSettings = ({
                         <InputGroupText>connections</InputGroupText>
                       </InputGroupAddon>
                     </InputGroup>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="invalidatedSlotBehavior"
               render={({ field }) => (
@@ -167,7 +167,7 @@ export const AdvancedSettings = ({
                   layout="horizontal"
                   description="Behavior when the replication slot is invalidated"
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Select_Shadcn_ value={field.value ?? 'error'} onValueChange={field.onChange}>
                       <SelectTrigger_Shadcn_ className="capitalize">
                         {field.value ?? 'error'}
@@ -187,14 +187,14 @@ export const AdvancedSettings = ({
                         </SelectItem_Shadcn_>
                       </SelectContent_Shadcn_>
                     </Select_Shadcn_>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
 
             {type === 'BigQuery' && (
               <>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="connectionPoolSize"
                   render={({ field }) => (
@@ -215,7 +215,7 @@ export const AdvancedSettings = ({
                         </>
                       }
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <InputGroup>
                           <FormInputGroupInput
                             {...field}
@@ -228,12 +228,12 @@ export const AdvancedSettings = ({
                             <InputGroupText>connections</InputGroupText>
                           </InputGroupAddon>
                         </InputGroup>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
 
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="maxStalenessMins"
                   render={({ field }) => (
@@ -258,7 +258,7 @@ export const AdvancedSettings = ({
                         </>
                       }
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <InputGroup>
                           <FormInputGroupInput
                             {...field}
@@ -271,7 +271,7 @@ export const AdvancedSettings = ({
                             <InputGroupText>minutes</InputGroupText>
                           </InputGroupAddon>
                         </InputGroup>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx
index 58d4285527..88da0dd38b 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx
@@ -1,5 +1,5 @@
 import type { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import type { DestinationPanelSchemaType } from './DestinationForm.schema'
@@ -10,14 +10,14 @@ type DestinationNameInputProps = {
 
 export const DestinationNameInput = ({ form }: DestinationNameInputProps) => {
   return (
-    <FormField_Shadcn_
+    <FormField
       control={form.control}
       name="name"
       render={({ field }) => (
         <FormItemLayout label="Name" layout="horizontal">
-          <FormControl_Shadcn_>
+          <FormControl>
             <Input_Shadcn_ {...field} placeholder="My destination" />
-          </FormControl_Shadcn_>
+          </FormControl>
         </FormItemLayout>
       )}
     />
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx
index 72cd2b62a9..2934047249 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx
@@ -5,8 +5,8 @@ import { useState } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
 import {
   Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -35,7 +35,7 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
     <div className="flex flex-col gap-y-6 p-5">
       <p className="text-sm font-medium text-foreground">BigQuery settings</p>
       <div className="flex flex-col gap-y-4">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="projectId"
           render={({ field }) => (
@@ -44,14 +44,14 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
               label="Project ID"
               description="The Google Cloud project ID where data will be sent"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_ {...field} placeholder="my-gcp-project" />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="datasetId"
           render={({ field }) => (
@@ -60,14 +60,14 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
               layout="horizontal"
               description="The BigQuery dataset where replicated tables will be created"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_ {...field} placeholder="my_dataset" />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="serviceAccountKey"
           render={({ field }) => (
@@ -76,7 +76,7 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
               label="Service Account Key"
               description="Service account credentials JSON for authenticating with BigQuery"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <TextArea_Shadcn_
                   {...field}
                   rows={5}
@@ -84,7 +84,7 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
                   placeholder='{"type": "service_account", "project_id": "...", ...}'
                   className="font-mono text-xs"
                 />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -159,7 +159,7 @@ export const AnalyticsBucketFields = ({
       <p className="text-sm font-medium text-foreground">Analytics Bucket settings</p>
 
       <div className="flex flex-col gap-y-4">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="warehouseName"
           render={({ field }) => (
@@ -189,7 +189,7 @@ export const AnalyticsBucketFields = ({
                   Failed to retrieve buckets
                 </Button>
               ) : (
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Select_Shadcn_
                     value={field.value}
                     onValueChange={(value) => {
@@ -226,13 +226,13 @@ export const AnalyticsBucketFields = ({
                       </SelectGroup_Shadcn_>
                     </SelectContent_Shadcn_>
                   </Select_Shadcn_>
-                </FormControl_Shadcn_>
+                </FormControl>
               )}
             </FormItemLayout>
           )}
         />
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="namespace"
           render={({ field }) => (
@@ -262,7 +262,7 @@ export const AnalyticsBucketFields = ({
                   Failed to retrieve namespaces
                 </Button>
               ) : (
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Select_Shadcn_
                     value={field.value}
                     onValueChange={(value) => {
@@ -298,14 +298,14 @@ export const AnalyticsBucketFields = ({
                       </SelectGroup_Shadcn_>
                     </SelectContent_Shadcn_>
                   </Select_Shadcn_>
-                </FormControl_Shadcn_>
+                </FormControl>
               )}
             </FormItemLayout>
           )}
         />
 
         {namespace === CREATE_NEW_NAMESPACE && (
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="newNamespaceName"
             render={({ field }) => (
@@ -314,15 +314,15 @@ export const AnalyticsBucketFields = ({
                 layout="horizontal"
                 description="A unique name for the new namespace"
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input_Shadcn_ {...field} placeholder="new_namespace" value={field.value || ''} />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
         )}
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="catalogToken"
           render={({ field }) => (
@@ -360,7 +360,7 @@ export const AnalyticsBucketFields = ({
           )}
         />
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="s3AccessKeyId"
           render={({ field }) => (
@@ -416,7 +416,7 @@ export const AnalyticsBucketFields = ({
                   Failed to retrieve keys
                 </Button>
               ) : (
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                     <SelectTrigger_Shadcn_>
                       {field.value === CREATE_NEW_KEY
@@ -440,14 +440,14 @@ export const AnalyticsBucketFields = ({
                       </SelectGroup_Shadcn_>
                     </SelectContent_Shadcn_>
                   </Select_Shadcn_>
-                </FormControl_Shadcn_>
+                </FormControl>
               )}
             </FormItemLayout>
           )}
         />
 
         {s3AccessKeyId !== CREATE_NEW_KEY && (
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="s3SecretAccessKey"
             render={({ field }) => (
@@ -457,14 +457,14 @@ export const AnalyticsBucketFields = ({
                 className="relative"
                 description="The secret key corresponding to your selected access key ID"
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input_Shadcn_
                     {...field}
                     type={showSecretAccessKey ? 'text' : 'password'}
                     value={field.value ?? ''}
                     placeholder="Provide the secret access key"
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
                 <Button
                   type="default"
                   icon={showSecretAccessKey ? <Eye /> : <EyeOff />}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx
index 131c8e7900..1e45e63639 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NewPublicationPanel.tsx
@@ -4,9 +4,9 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Sheet,
   SheetContent,
@@ -84,24 +84,24 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
               <SheetDescription>Replicate table changes to destinations</SheetDescription>
             </SheetHeader>
             <SheetSection className="flex-grow overflow-auto">
-              <Form_Shadcn_ {...form}>
+              <Form {...form}>
                 <form
                   id={formId}
                   onSubmit={form.handleSubmit(onSubmit)}
                   className="flex flex-col gap-y-4"
                 >
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="name"
                     render={({ field }) => (
                       <FormItemLayout label="Name" layout="vertical">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_ {...field} placeholder="Name" />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="tables"
                     render={({ field }) => (
@@ -109,7 +109,7 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
                         label="Tables"
                         description="Which tables to replicate to destinations"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <MultiSelector
                             values={field.value}
                             onValuesChange={field.onChange}
@@ -133,12 +133,12 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
                               </MultiSelector.List>
                             </MultiSelector.Content>
                           </MultiSelector>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </form>
-              </Form_Shadcn_>
+              </Form>
             </SheetSection>
             <SheetFooter>
               <Button type="default" disabled={creatingPublication} onClick={onClose}>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
index 173787d965..33e05118dd 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { useMemo } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { FormControl, FormField } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -36,7 +36,7 @@ export const PublicationSelection = ({
     isSuccessPublications && !!publicationName && !publicationNames.includes(publicationName)
 
   return (
-    <FormField_Shadcn_
+    <FormField
       control={form.control}
       name="publicationName"
       render={({ field }) => (
@@ -45,14 +45,14 @@ export const PublicationSelection = ({
           label="Publication"
           description="Tables in the selected publication will be replicated to this destination"
         >
-          <FormControl_Shadcn_>
+          <FormControl>
             <PublicationsComboBox
               publications={publications}
               isLoadingPublications={isLoadingPublications}
               field={field}
               onNewPublicationClick={() => onSelectNewPublication()}
             />
-          </FormControl_Shadcn_>
+          </FormControl>
           {isSelectedPublicationMissing && (
             <Admonition type="warning" className="mt-2">
               <p className="!leading-normal">
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index 58dc3f7c87..7dd474da75 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -6,7 +6,7 @@ import { Loader2 } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, DialogSectionSeparator, Form_Shadcn_, SheetFooter, SheetSection } from 'ui'
+import { Button, DialogSectionSeparator, Form, SheetFooter, SheetSection } from 'ui'
 import * as z from 'zod'
 
 import {
@@ -510,7 +510,7 @@ export const DestinationForm = ({
         {hasNoAvailableDestinations && !editMode ? (
           <NoDestinationsAvailable />
         ) : (
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
               <div className="p-5 flex flex-col gap-y-6">
                 <p className="text-sm font-medium text-foreground">Destination details</p>
@@ -555,7 +555,7 @@ export const DestinationForm = ({
                 </>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
         )}
       </SheetSection>
 
diff --git a/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx b/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
index 788062ad9c..6e2ef2f2dc 100644
--- a/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
@@ -2,12 +2,12 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   SidePanel,
   Switch,
@@ -93,32 +93,32 @@ export const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
         </div>
       }
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form
           id={formId}
           className="grid gap-6 w-full px-8 py-8"
           onSubmit={form.handleSubmit(onSubmit)}
         >
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="name"
             render={({ field }) => (
-              <FormItem_Shadcn_ className="grid gap-2 md:grid md:grid-cols-12 space-y-0">
-                <FormLabel_Shadcn_ className="flex flex-col space-y-2 col-span-4 text-sm justify-center text-foreground-light">
+              <FormItem className="grid gap-2 md:grid md:grid-cols-12 space-y-0">
+                <FormLabel className="flex flex-col space-y-2 col-span-4 text-sm justify-center text-foreground-light">
                   Name
-                </FormLabel_Shadcn_>
-                <FormControl_Shadcn_ className="col-span-8">
+                </FormLabel>
+                <FormControl className="col-span-8">
                   <Input_Shadcn_ {...field} className="w-full" />
-                </FormControl_Shadcn_>
-                <FormMessage_Shadcn_ className="col-start-5 col-span-8" />
-              </FormItem_Shadcn_>
+                </FormControl>
+                <FormMessage className="col-start-5 col-span-8" />
+              </FormItem>
             )}
           />
           <div className="grid gap-2 mt-4 md:grid md:grid-cols-12">
             <div className="col-span-4">
-              <FormLabel_Shadcn_ className="flex flex-col space-y-2 col-span-4 text-sm justify-center text-foreground-light">
+              <FormLabel className="flex flex-col space-y-2 col-span-4 text-sm justify-center text-foreground-light">
                 Role privileges
-              </FormLabel_Shadcn_>
+              </FormLabel>
             </div>
             <div className="col-span-8 grid gap-4">
               {(Object.keys(ROLE_PERMISSIONS) as (keyof typeof ROLE_PERMISSIONS)[])
@@ -127,20 +127,20 @@ export const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
                   const permission = ROLE_PERMISSIONS[permissionKey]
 
                   return (
-                    <FormField_Shadcn_
+                    <FormField
                       key={permissionKey}
                       control={form.control}
                       name={permissionKey}
                       render={({ field }) => (
-                        <FormItem_Shadcn_ className="grid gap-2 md:grid md:grid-cols-12 space-y-0">
-                          <FormControl_Shadcn_ className="col-span-8 flex items-center gap-4">
+                        <FormItem className="grid gap-2 md:grid md:grid-cols-12 space-y-0">
+                          <FormControl className="col-span-8 flex items-center gap-4">
                             <div className="w-full text-sm">
                               <Switch checked={field.value} onCheckedChange={field.onChange} />
-                              <FormLabel_Shadcn_>{permission.description}</FormLabel_Shadcn_>
+                              <FormLabel>{permission.description}</FormLabel>
                             </div>
-                          </FormControl_Shadcn_>
-                          <FormMessage_Shadcn_ className="col-start-5 col-span-8" />
-                        </FormItem_Shadcn_>
+                          </FormControl>
+                          <FormMessage className="col-start-5 col-span-8" />
+                        </FormItem>
                       )}
                     />
                   )
@@ -156,13 +156,13 @@ export const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
                     const permission = ROLE_PERMISSIONS[permissionKey]
 
                     return (
-                      <FormField_Shadcn_
+                      <FormField
                         key={permissionKey}
                         control={form.control}
                         name={permissionKey}
                         render={({ field }) => (
-                          <FormItem_Shadcn_ className="space-y-0 opacity-70">
-                            <FormControl_Shadcn_ className="flex items-center gap-4">
+                          <FormItem className="space-y-0 opacity-70">
+                            <FormControl className="flex items-center gap-4">
                               <div className="w-full text-sm">
                                 <Switch
                                   checked={field.value}
@@ -170,11 +170,11 @@ export const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
                                   disabled
                                   aria-readonly
                                 />
-                                <FormLabel_Shadcn_>{permission.description}</FormLabel_Shadcn_>
+                                <FormLabel>{permission.description}</FormLabel>
                               </div>
-                            </FormControl_Shadcn_>
-                            <FormMessage_Shadcn_ className="col-start-5 col-span-8" />
-                          </FormItem_Shadcn_>
+                            </FormControl>
+                            <FormMessage className="col-start-5 col-span-8" />
+                          </FormItem>
                         )}
                       />
                     )
@@ -183,7 +183,7 @@ export const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
             </div>
           </div>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </SidePanel>
   )
 }
diff --git a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
index c9945aa648..593ed9a0b8 100644
--- a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
@@ -11,9 +11,9 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Switch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -177,7 +177,7 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
         )}
       </div>
       <Collapsible.Content>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id={formId}
             onSubmit={form.handleSubmit(onSaveChanges)}
@@ -186,7 +186,7 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
             <div className="py-4 space-y-[9px]">
               {(Object.keys(ROLE_PERMISSIONS) as (keyof typeof ROLE_PERMISSIONS)[]).map(
                 (permission) => (
-                  <FormField_Shadcn_
+                  <FormField
                     key={permission}
                     control={form.control}
                     name={permission}
@@ -197,14 +197,14 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
                         layout="flex"
                         label={ROLE_PERMISSIONS[permission].description}
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             id={`${role.id}-${permission}`}
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={disabled || ROLE_PERMISSIONS[permission].disabled}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -227,7 +227,7 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
               </div>
             )}
           </form>
-        </Form_Shadcn_>
+        </Form>
       </Collapsible.Content>
     </Collapsible>
   )
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
index c1b58ab6e9..556cd99be4 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
@@ -8,9 +8,9 @@ import {
   Button,
   Checkbox_Shadcn_,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -201,13 +201,13 @@ export const TriggerSheet = ({
             </SheetTitle>
           </SheetHeader>
 
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={formId}
               className="flex-1 flex flex-col gap-y-6 overflow-auto py-6"
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 name="name"
                 control={form.control}
                 render={({ field }) => (
@@ -217,15 +217,15 @@ export const TriggerSheet = ({
                     label="Name of trigger"
                     description="Do not use spaces/whitespace."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder="Name of trigger" />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
 
               {isEditing ? (
-                <FormField_Shadcn_
+                <FormField
                   name="enabled_mode"
                   control={form.control}
                   render={({ field }) => (
@@ -235,7 +235,7 @@ export const TriggerSheet = ({
                       label="Enabled mode"
                       description="Determines if a trigger should or should not fire. Can also be used to disable a trigger, but not delete it."
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_ defaultValue={field.value} onValueChange={field.onChange}>
                           <SelectTrigger_Shadcn_ className="col-span-8">
                             {
@@ -252,7 +252,7 @@ export const TriggerSheet = ({
                             ))}
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -260,7 +260,7 @@ export const TriggerSheet = ({
                 <>
                   <Separator />
 
-                  <FormField_Shadcn_
+                  <FormField
                     name="tableId"
                     control={form.control}
                     render={({ field }) => (
@@ -270,7 +270,7 @@ export const TriggerSheet = ({
                         label="Table"
                         description="Trigger will watch for changes on this table"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select_Shadcn_
                             defaultValue={field.value}
                             onValueChange={(val) => {
@@ -295,12 +295,12 @@ export const TriggerSheet = ({
                               ))}
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
 
-                  <FormField_Shadcn_
+                  <FormField
                     name="events"
                     control={form.control}
                     render={() => (
@@ -311,7 +311,7 @@ export const TriggerSheet = ({
                         description="These are the events that are watched by the trigger, only the events selected above will fire the trigger on the table you've selected."
                       >
                         {TRIGGER_EVENTS.map((event) => (
-                          <FormField_Shadcn_
+                          <FormField
                             key={event.value}
                             control={form.control}
                             name="events"
@@ -322,7 +322,7 @@ export const TriggerSheet = ({
                                 label={event.label}
                                 description={event.description}
                               >
-                                <FormControl_Shadcn_>
+                                <FormControl>
                                   <Checkbox_Shadcn_
                                     className="translate-y-[2px]"
                                     checked={field.value?.includes(event.value)}
@@ -334,7 +334,7 @@ export const TriggerSheet = ({
                                           )
                                     }}
                                   />
-                                </FormControl_Shadcn_>
+                                </FormControl>
                               </FormItemLayout>
                             )}
                           />
@@ -343,7 +343,7 @@ export const TriggerSheet = ({
                     )}
                   />
 
-                  <FormField_Shadcn_
+                  <FormField
                     name="activation"
                     control={form.control}
                     render={({ field }) => (
@@ -353,7 +353,7 @@ export const TriggerSheet = ({
                         label="Trigger type"
                         description="Determines when your trigger fires"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select_Shadcn_ defaultValue={field.value} onValueChange={field.onChange}>
                             <SelectTrigger_Shadcn_ className="col-span-8">
                               {TRIGGER_TYPES.find((option) => option.value === field.value)?.label}
@@ -367,12 +367,12 @@ export const TriggerSheet = ({
                               ))}
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
 
-                  <FormField_Shadcn_
+                  <FormField
                     name="orientation"
                     control={form.control}
                     render={({ field }) => (
@@ -382,7 +382,7 @@ export const TriggerSheet = ({
                         label="Orientation"
                         description="Identifies whether the trigger fires once for each processed row or once for each statement"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select_Shadcn_ defaultValue={field.value} onValueChange={field.onChange}>
                             <SelectTrigger_Shadcn_ className="col-span-8">
                               {
@@ -399,19 +399,19 @@ export const TriggerSheet = ({
                               ))}
                             </SelectContent_Shadcn_>
                           </Select_Shadcn_>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
 
                   <Separator />
 
-                  <FormField_Shadcn_
+                  <FormField
                     name="function_name"
                     control={form.control}
                     render={() => (
                       <FormItemLayout layout="vertical" className="px-5">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <div className="flex flex-col gap-y-2">
                             <p className="text-sm">Function to trigger</p>
                             {function_name.length === 0 ? (
@@ -458,14 +458,14 @@ export const TriggerSheet = ({
                               </div>
                             )}
                           </div>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
 
           <SheetFooter className="shrink-0">
             <Button
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
index 94dec479fd..044cb07d72 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
@@ -13,7 +13,7 @@ import {
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  Form_Shadcn_,
+  Form,
   Separator,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
@@ -374,7 +374,7 @@ export function DiskManagementForm() {
         <Separator />
       </ScaffoldContainer>
 
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form
           id="disk-compute-form"
           onSubmit={form.handleSubmit(onSubmit)}
@@ -561,7 +561,7 @@ export function DiskManagementForm() {
             ) : null}
           </AnimatePresence>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </>
   )
 }
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
index 2c9f9d0b1e..d6ededc7cf 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
@@ -3,8 +3,8 @@ import { useParams } from 'common'
 import { UseFormReturn } from 'react-hook-form'
 import {
   cn,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -51,7 +51,7 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
 
   return (
     <>
-      <FormField_Shadcn_
+      <FormField
         name="growthPercent"
         control={control}
         render={({ field }) => {
@@ -68,7 +68,7 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
               }
               className="[&>div>span]:text-foreground-lighter"
             >
-              <FormControl_Shadcn_ className="max-w-20">
+              <FormControl className="max-w-20">
                 <InputGroup>
                   <FormInputGroupInput
                     {...field}
@@ -91,13 +91,13 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
                     <InputGroupText>%</InputGroupText>
                   </InputGroupAddon>
                 </InputGroup>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )
         }}
       />
 
-      <FormField_Shadcn_
+      <FormField
         name="minIncrementGb"
         control={control}
         render={({ field }) => {
@@ -114,7 +114,7 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
               }
               className="[&>div>span]:text-foreground-lighter"
             >
-              <FormControl_Shadcn_ className="max-w-32">
+              <FormControl className="max-w-32">
                 <InputGroup>
                   <FormInputGroupInput
                     {...field}
@@ -137,13 +137,13 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
                     <InputGroupText>GB</InputGroupText>
                   </InputGroupAddon>
                 </InputGroup>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )
         }}
       />
 
-      <FormField_Shadcn_
+      <FormField
         name="maxSizeGb"
         control={control}
         render={({ field }) => {
@@ -155,7 +155,7 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
               labelOptional="Maximum size that the disk can grow to"
               className="[&>div>span]:text-foreground-lighter"
             >
-              <FormControl_Shadcn_ className="max-w-32">
+              <FormControl className="max-w-32">
                 <InputGroup>
                   <FormInputGroupInput
                     {...field}
@@ -174,7 +174,7 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => {
                     <InputGroupText>GB</InputGroupText>
                   </InputGroupAddon>
                 </InputGroup>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )
         }}
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
index dba34126fa..04dc1de9d3 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
@@ -6,7 +6,7 @@ import { UseFormReturn } from 'react-hook-form'
 import {
   Button,
   cn,
-  FormField_Shadcn_,
+  FormField,
   RadioGroupCard,
   RadioGroupCardItem,
   Skeleton,
@@ -121,7 +121,7 @@ export function ComputeSizeField({ form, disabled }: ComputeSizeFieldProps) {
   const hasHiddenOptions = availableOptions.length > INITIALLY_VISIBLE_COUNT
 
   return (
-    <FormField_Shadcn_
+    <FormField
       name="computeSize"
       control={control}
       render={({ field }) => (
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx
index e31eaf571c..e79ddfcf0e 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx
@@ -4,8 +4,8 @@ import { RotateCcw } from 'lucide-react'
 import { UseFormReturn } from 'react-hook-form'
 import {
   Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -93,12 +93,12 @@ export function DiskSizeField({
   return (
     <div id="disk-size" className="grid @xl:grid-cols-12 gap-5">
       <div className="col-span-4">
-        <FormField_Shadcn_
+        <FormField
           name="totalSize"
           control={control}
           render={({ field, fieldState: { isDirty } }) => (
             <FormItemLayout label="Disk Size" layout="vertical" id={field.name}>
-              <FormControl_Shadcn_ className="max-w-32">
+              <FormControl className="max-w-32">
                 <InputGroup>
                   <FormInputGroupInput
                     type="number"
@@ -135,7 +135,7 @@ export function DiskSizeField({
                     ) : null}
                   </InputGroupAddon>
                 </InputGroup>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
index a2f8a8c615..12ad6681f9 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx
@@ -3,8 +3,8 @@ import { useParams } from 'common'
 import { UseFormReturn } from 'react-hook-form'
 import {
   Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -49,7 +49,7 @@ export function IOPSField({ form, disableInput }: IOPSFieldProps) {
     RESTRICTED_COMPUTE_FOR_IOPS_ON_GP3.includes(watchedComputeSize) && watchedStorageType === 'gp3'
 
   return (
-    <FormField_Shadcn_
+    <FormField
       control={control}
       name="provisionedIOPS"
       render={({ field }) => {
@@ -105,7 +105,7 @@ export function IOPSField({ form, disableInput }: IOPSFieldProps) {
               </>
             }
           >
-            <FormControl_Shadcn_ className="max-w-32">
+            <FormControl className="max-w-32">
               <InputGroup>
                 <FormInputGroupInput
                   type="number"
@@ -121,7 +121,7 @@ export function IOPSField({ form, disableInput }: IOPSFieldProps) {
                 />
                 <InputGroupAddon align="inline-end">IOPS</InputGroupAddon>
               </InputGroup>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )
       }}
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx
index ce138838fb..32f29c3702 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx
@@ -4,8 +4,8 @@ import {
   Badge,
   buttonVariants,
   cn,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -41,7 +41,7 @@ export function StorageTypeField({ form, disableInput }: StorageTypeFieldProps)
   const { isPending: isLoading, error, isError } = useDiskAttributesQuery({ projectRef })
 
   return (
-    <FormField_Shadcn_
+    <FormField
       name="storageType"
       control={control}
       render={({ field }) => (
@@ -90,11 +90,11 @@ export function StorageTypeField({ form, disableInput }: StorageTypeFieldProps)
                 )}
               />
             ) : (
-              <FormControl_Shadcn_>
+              <FormControl>
                 <SelectTrigger_Shadcn_ className="h-14 max-w-[420px]">
                   <SelectValue_Shadcn_ />
                 </SelectTrigger_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
             )}
             <SelectContent_Shadcn_>
               <>
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
index d10856ad81..26267c62fe 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx
@@ -4,8 +4,8 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect } from 'react'
 import { UseFormReturn } from 'react-hook-form'
 import {
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -79,7 +79,7 @@ export function ThroughputField({ form, disableInput }: ThroughputFieldProps) {
           transition={{ duration: 0.1 }}
           style={{ overflow: 'hidden' }}
         >
-          <FormField_Shadcn_
+          <FormField
             name="throughput"
             control={control}
             render={({ field }) => (
@@ -118,7 +118,7 @@ export function ThroughputField({ form, disableInput }: ThroughputFieldProps) {
                   </>
                 }
               >
-                <FormControl_Shadcn_ className="max-w-32">
+                <FormControl className="max-w-32">
                   <InputGroup>
                     <FormInputGroupInput
                       type="number"
@@ -136,7 +136,7 @@ export function ThroughputField({ form, disableInput }: ThroughputFieldProps) {
                       <InputGroupText>MB/s</InputGroupText>
                     </InputGroupAddon>
                   </InputGroup>
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index 9d473f27b9..029a114b35 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -16,9 +16,9 @@ import {
   cn,
   copyToClipboard,
   CriticalIcon,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Switch,
   Tabs_Shadcn_ as Tabs,
   TabsContent_Shadcn_ as TabsContent,
@@ -150,11 +150,11 @@ export const EdgeFunctionDetails = () => {
           </PageSectionSummary>
         </PageSectionMeta>
         <PageSectionContent>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form onSubmit={form.handleSubmit(onUpdateFunction)}>
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="name"
                     render={({ field }) => (
@@ -163,9 +163,9 @@ export const EdgeFunctionDetails = () => {
                         layout="flex-row-reverse"
                         description="Your slug and endpoint URL will remain the same"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input {...field} className="w-64" disabled={!canUpdateEdgeFunction} />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -173,7 +173,7 @@ export const EdgeFunctionDetails = () => {
                 {IS_PLATFORM && (
                   <>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="verify_jwt"
                         render={({ field }) => (
@@ -201,13 +201,13 @@ export const EdgeFunctionDetails = () => {
                               </>
                             }
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                                 disabled={!canUpdateEdgeFunction}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -232,7 +232,7 @@ export const EdgeFunctionDetails = () => {
                 )}
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
 
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
index 9e5f0b7fc3..c5588bc0c4 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx
@@ -7,9 +7,9 @@ import { useFieldArray, useForm } from 'react-hook-form'
 import {
   Badge,
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_ as Input,
   Label_Shadcn_ as Label,
   ResizableHandle,
@@ -240,11 +240,11 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
       <div className="border rounded-md bg-surface-200">
         {(type === 'headers' ? headerFields : queryParamFields).map((field, index) => (
           <div key={field.id} className="grid grid-cols-[1fr,1fr,32px] border-b last:border-b-0">
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name={`${type}.${index}.key`}
               render={({ field }) => (
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input
                     {...field}
                     size="tiny"
@@ -252,14 +252,14 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                     disabled={isPending}
                     className="h-auto py-2 font-mono rounded-none shadow-none bg-transparent border-l-0 border-r-1 border-t-0 border-b-0 border-border"
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
               )}
             />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name={`${type}.${index}.value`}
               render={({ field }) => (
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input
                     {...field}
                     size="tiny"
@@ -267,7 +267,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                     disabled={isPending}
                     className="h-auto py-2 font-mono rounded-none shadow-none bg-transparent border-none"
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
               )}
             />
             <div className="flex items-center justify-center">
@@ -316,7 +316,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
           <SheetTitle>Test {functionSlug}</SheetTitle>
         </SheetHeader>
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
             className="flex-1 overflow-y-auto flex flex-col"
@@ -324,12 +324,12 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
             <ResizablePanelGroup orientation="vertical">
               <ResizablePanel>
                 <div className="flex flex-col gap-y-4 p-5 h-full overflow-y-auto">
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="method"
                     render={({ field }) => (
                       <FormItemLayout layout="vertical" label="HTTP Method">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Select
                             value={field.value}
                             onValueChange={field.onChange}
@@ -346,17 +346,17 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                               ))}
                             </SelectContent>
                           </Select>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                   {method !== 'GET' && (
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="body"
                       render={({ field }) => (
                         <FormItemLayout layout="vertical" label="Request Body">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Textarea
                               {...field}
                               placeholder="Request body (JSON)"
@@ -364,7 +364,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
                               disabled={isPending}
                               className="font-mono text-xs"
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -475,7 +475,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
               </div>
             </SheetFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </SheetContent>
     </Sheet>
   )
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
index b309b12b69..fccd0f829a 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
@@ -11,12 +11,12 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import z from 'zod'
@@ -198,7 +198,7 @@ const AddNewSecretForm = () => {
 
   return (
     <>
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form className="w-full" onSubmit={form.handleSubmit(onSubmit)}>
           <Card>
             <CardHeader>
@@ -207,13 +207,13 @@ const AddNewSecretForm = () => {
             <CardContent>
               {fields.map((fieldItem, index) => (
                 <div key={fieldItem.id} className="grid grid-cols-[1fr_1fr_auto] gap-4 mb-4">
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name={`secrets.${index}.name`}
                     render={({ field }) => (
-                      <FormItem_Shadcn_ className="w-full">
-                        <FormLabel_Shadcn_>Name</FormLabel_Shadcn_>
-                        <FormControl_Shadcn_>
+                      <FormItem className="w-full">
+                        <FormLabel>Name</FormLabel>
+                        <FormControl>
                           <Input
                             {...field}
                             placeholder="e.g. CLIENT_KEY"
@@ -223,18 +223,18 @@ const AddNewSecretForm = () => {
                             data-bwignore
                             onPaste={(e) => handlePaste(e.nativeEvent)}
                           />
-                        </FormControl_Shadcn_>
-                        <FormMessage_Shadcn_ />
-                      </FormItem_Shadcn_>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
                     )}
                   />
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name={`secrets.${index}.value`}
                     render={({ field }) => (
-                      <FormItem_Shadcn_ className="w-full relative">
-                        <FormLabel_Shadcn_>Value</FormLabel_Shadcn_>
-                        <FormControl_Shadcn_>
+                      <FormItem className="w-full relative">
+                        <FormLabel>Value</FormLabel>
+                        <FormControl>
                           <Input
                             {...field}
                             type={isSecretVisible(fieldItem.id) ? 'text' : 'password'}
@@ -253,9 +253,9 @@ const AddNewSecretForm = () => {
                               </div>
                             }
                           />
-                        </FormControl_Shadcn_>
-                        <FormMessage_Shadcn_ />
-                      </FormItem_Shadcn_>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
                     )}
                   />
 
@@ -284,7 +284,7 @@ const AddNewSecretForm = () => {
             </CardFooter>
           </Card>
         </form>
-      </Form_Shadcn_>
+      </Form>
       <DuplicateSecretWarningModal
         visible={!!duplicateSecretName}
         onCancel={handleCancelDuplicate}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx
index abba9a16cb..add876a382 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx
@@ -7,9 +7,9 @@ import { useLatest } from 'react-use'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input,
   Input_Shadcn_,
   Sheet,
@@ -86,28 +86,28 @@ export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetPro
         </SheetHeader>
 
         <SheetSection className="h-full">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={FORM_ID}
               className="flex flex-col gap-y-4"
               onSubmit={form.handleSubmit(onSubmit)}
             >
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItemLayout label="Name" layout="horizontal">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         readOnly
                         className="!text-foreground-light cursor-not-allowed"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="value"
                 render={({ field }) => (
@@ -116,7 +116,7 @@ export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetPro
                     layout="horizontal"
                     description="Secrets can’t be retrieved once saved. Enter a new value to overwrite the existing value."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input
                         {...field}
                         type={showSecretValue ? 'text' : 'password'}
@@ -136,12 +136,12 @@ export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetPro
                           </div>
                         }
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </SheetSection>
 
         <SheetFooter>
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx
index 1ff314b81d..75c6c949e0 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx
@@ -8,9 +8,9 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   RadioGroupStacked,
   RadioGroupStackedItem,
@@ -297,21 +297,21 @@ export const CreateCronJobSheet = ({ open, selectedCronJob, onClose }: CreateCro
             </SheetHeader>
 
             <div className="overflow-auto flex-grow">
-              <Form_Shadcn_ {...form}>
+              <Form {...form}>
                 <form
                   id={FORM_ID}
                   className="flex-grow overflow-auto"
                   onSubmit={form.handleSubmit(onSubmit)}
                 >
                   <SheetSection>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="name"
                       render={({ field }) => (
                         <FormItemLayout label="Name" layout="vertical" className="gap-1 relative">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input_Shadcn_ {...field} disabled={isEditing} />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                           <span className="text-foreground-lighter text-xs absolute top-0 right-0">
                             Cron jobs cannot be renamed once created
                           </span>
@@ -323,12 +323,12 @@ export const CreateCronJobSheet = ({ open, selectedCronJob, onClose }: CreateCro
                   <CronJobScheduleSection form={form} supportsSeconds={supportsSeconds} />
                   <Separator />
                   <SheetSection>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="values.type"
                       render={({ field }) => (
                         <FormItemLayout label="Type" layout="vertical" className="gap-1">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <RadioGroupStacked
                               id="function_type"
                               name="function_type"
@@ -373,7 +373,7 @@ export const CreateCronJobSheet = ({ open, selectedCronJob, onClose }: CreateCro
                                 </RadioGroupStackedItem>
                               ))}
                             </RadioGroupStacked>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -436,7 +436,7 @@ export const CreateCronJobSheet = ({ open, selectedCronJob, onClose }: CreateCro
                   {cronType === 'sql_function' && <SqlFunctionSection form={form} />}
                   {cronType === 'sql_snippet' && <SqlSnippetSection form={form} />}
                 </form>
-              </Form_Shadcn_>
+              </Form>
             </div>
             <SheetFooter>
               <Button
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
index 3b907de217..b8233dbfc3 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx
@@ -8,11 +8,11 @@ import {
   AccordionTrigger_Shadcn_,
   Button,
   cn,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   SheetSection,
   Switch,
@@ -75,14 +75,14 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
 
   return (
     <SheetSection>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="schedule"
         render={({ field }) => {
           return (
-            <FormItem_Shadcn_ className="flex flex-col gap-1">
+            <FormItem className="flex flex-col gap-1">
               <div className="flex flex-row justify-between">
-                <FormLabel_Shadcn_>Schedule</FormLabel_Shadcn_>
+                <FormLabel>Schedule</FormLabel>
                 <span className="text-foreground-lighter text-xs">
                   {useNaturalLanguage
                     ? 'Describe your schedule in words'
@@ -90,7 +90,7 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
                 </span>
               </div>
 
-              <FormControl_Shadcn_>
+              <FormControl>
                 {useNaturalLanguage ? (
                   <Input
                     value={inputValue}
@@ -114,8 +114,8 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
                     }}
                   />
                 )}
-              </FormControl_Shadcn_>
-              <FormMessage_Shadcn_ />
+              </FormControl>
+              <FormMessage />
               <div className="flex flex-col gap-y-4 mt-3 mb-2">
                 <div className="flex items-center gap-2">
                   <Switch
@@ -187,7 +187,7 @@ export const CronJobScheduleSection = ({ form, supportsSeconds }: CronJobSchedul
                   </span>
                 )}
               </div>
-            </FormItem_Shadcn_>
+            </FormItem>
           )
         }}
       />
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
index bd217abbf0..d2a844fdbb 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
@@ -12,11 +12,11 @@ import {
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
@@ -74,25 +74,25 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
 
   return (
     <SheetSection className="flex flex-col gap-6">
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.method"
         render={({ field }) => (
-          <FormItem_Shadcn_>
-            <FormLabel_Shadcn_>Method</FormLabel_Shadcn_>
+          <FormItem>
+            <FormLabel>Method</FormLabel>
             <Select_Shadcn_ onValueChange={field.onChange} value={field.value}>
-              <FormControl_Shadcn_>
+              <FormControl>
                 <SelectTrigger_Shadcn_>
                   <SelectValue_Shadcn_ placeholder="Select a method for the API call" />
                 </SelectTrigger_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
               <SelectContent_Shadcn_>
                 <SelectItem_Shadcn_ value="GET">GET</SelectItem_Shadcn_>
                 <SelectItem_Shadcn_ value="POST">POST</SelectItem_Shadcn_>
               </SelectContent_Shadcn_>
             </Select_Shadcn_>
-            <FormMessage_Shadcn_ />
-          </FormItem_Shadcn_>
+            <FormMessage />
+          </FormItem>
         )}
       />
 
@@ -113,18 +113,18 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
           )}
         </div>
       ) : edgeFunctions.length > 0 ? (
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="values.edgeFunctionName"
           render={({ field }) => {
             const selectedFunction = edgeFunctions.find((fn) => fn.url === field.value)
 
             return (
-              <FormItem_Shadcn_>
-                <FormLabel_Shadcn_>Edge Function</FormLabel_Shadcn_>
+              <FormItem>
+                <FormLabel>Edge Function</FormLabel>
                 <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
                   <PopoverTrigger_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Button
                         type="default"
                         role="combobox"
@@ -146,7 +146,7 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
                           ? selectedFunction.name
                           : 'Select which edge function to trigger'}
                       </Button>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </PopoverTrigger_Shadcn_>
                   <PopoverContent_Shadcn_ id={listboxId} className="p-0" sameWidthAsTrigger>
                     <Command_Shadcn_>
@@ -181,13 +181,13 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
                     </Command_Shadcn_>
                   </PopoverContent_Shadcn_>
                 </Popover_Shadcn_>
-                <FormMessage_Shadcn_ />
-              </FormItem_Shadcn_>
+                <FormMessage />
+              </FormItem>
             )
           }}
         />
       ) : null}
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.timeoutMs"
         render={({ field: { ref, ...rest } }) => (
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx
index 9ad9a78db1..6b0c30a9c7 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx
@@ -1,10 +1,10 @@
 import { UseFormReturn } from 'react-hook-form'
 import {
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   SheetSection,
   TextArea_Shadcn_,
 } from 'ui'
@@ -18,21 +18,21 @@ interface HttpBodyFieldSectionProps {
 export const HttpBodyFieldSection = ({ form }: HttpBodyFieldSectionProps) => {
   return (
     <SheetSection>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.httpBody"
         render={({ field }) => (
-          <FormItem_Shadcn_ className="gap-1 flex flex-col">
-            <FormLabel_Shadcn_>HTTP Request Body</FormLabel_Shadcn_>
-            <FormControl_Shadcn_>
+          <FormItem className="gap-1 flex flex-col">
+            <FormLabel>HTTP Request Body</FormLabel>
+            <FormControl>
               <TextArea_Shadcn_
                 className="h-72 rounded-none px-4 outline-none"
                 value={field.value}
                 onChange={field.onChange}
               />
-            </FormControl_Shadcn_>
-            <FormMessage_Shadcn_ />
-          </FormItem_Shadcn_>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
         )}
       />
     </SheetSection>
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx
index 69615981f1..c8ca405448 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/HttpHeaderFieldsSection.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useFormContext } from 'react-hook-form'
-import { FormLabel_Shadcn_, SheetSection } from 'ui'
+import { FormLabel, SheetSection } from 'ui'
 import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
 
 import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
@@ -36,7 +36,7 @@ export const HTTPHeaderFieldsSection = ({ variant }: HTTPHeaderFieldsSectionProp
 
   return (
     <SheetSection>
-      <FormLabel_Shadcn_>HTTP Headers</FormLabel_Shadcn_>
+      <FormLabel>HTTP Headers</FormLabel>
       <KeyValueFieldArray
         control={form.control}
         name="values.httpHeaders"
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx
index 5f0b0a4a8b..00743443fc 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx
@@ -1,10 +1,10 @@
 import { UseFormReturn } from 'react-hook-form'
 import {
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -24,41 +24,41 @@ interface HttpRequestSectionProps {
 export const HttpRequestSection = ({ form }: HttpRequestSectionProps) => {
   return (
     <SheetSection className="flex flex-col gap-3">
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.method"
         render={({ field }) => (
-          <FormItem_Shadcn_>
-            <FormLabel_Shadcn_>Method</FormLabel_Shadcn_>
+          <FormItem>
+            <FormLabel>Method</FormLabel>
             <Select_Shadcn_ onValueChange={field.onChange} value={field.value}>
-              <FormControl_Shadcn_>
+              <FormControl>
                 <SelectTrigger_Shadcn_>
                   <SelectValue_Shadcn_ placeholder="Select a method for the HTTP request" />
                 </SelectTrigger_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
               <SelectContent_Shadcn_>
                 <SelectItem_Shadcn_ value="GET">GET</SelectItem_Shadcn_>
                 <SelectItem_Shadcn_ value="POST">POST</SelectItem_Shadcn_>
               </SelectContent_Shadcn_>
             </Select_Shadcn_>
-            <FormMessage_Shadcn_ />
-          </FormItem_Shadcn_>
+            <FormMessage />
+          </FormItem>
         )}
       />
 
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.endpoint"
         render={({ field: { ref, ...rest } }) => (
           <FormItemLayout label="Endpoint URL" className="gap-1">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Input {...rest} placeholder="https://api.example.com/endpoint" />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
 
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.timeoutMs"
         render={({ field: { ref, ...rest } }) => (
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
index 3c82cc3ec5..6f6850121d 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { FormField_Shadcn_, SheetSection } from 'ui'
+import { FormField, SheetSection } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
@@ -15,7 +15,7 @@ export const SqlFunctionSection = ({ form }: SqlFunctionSectionProps) => {
 
   return (
     <SheetSection className="flex flex-col gap-3 2xl:flex-row 2xl:[&>div]:w-full">
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.schema"
         render={({ field }) => (
@@ -35,7 +35,7 @@ export const SqlFunctionSection = ({ form }: SqlFunctionSectionProps) => {
         )}
       />
 
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.functionName"
         render={({ field }) => (
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/SqlSnippetSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/SqlSnippetSection.tsx
index b792a4b494..c799eeb13b 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/SqlSnippetSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/SqlSnippetSection.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { FormField_Shadcn_, SheetSection } from 'ui'
+import { FormField, SheetSection } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
@@ -12,7 +12,7 @@ interface SqlSnippetSectionProps {
 export const SqlSnippetSection = ({ form }: SqlSnippetSectionProps) => {
   return (
     <SheetSection className="!px-0 !pb-0">
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.snippet"
         render={({ field }) => (
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx
index 24e1bef8e7..5d7ff78d56 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallIntegrationSheet.tsx
@@ -5,7 +5,7 @@ import { toast } from 'sonner'
 import {
   Button,
   DialogSectionSeparator,
-  Form_Shadcn_,
+  Form,
   Sheet,
   SheetClose,
   SheetContent,
@@ -217,7 +217,7 @@ export const InstallIntegrationSheet = ({ integration }: InstallIntegrationSheet
         <Button type="primary">Install integration</Button>
       </SheetTrigger>
 
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
           <SheetContent
             size="default"
@@ -277,7 +277,7 @@ export const InstallIntegrationSheet = ({ integration }: InstallIntegrationSheet
             </SheetFooter>
           </SheetContent>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Sheet>
   )
 }
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx
index 72d5572e98..9716a81bbb 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallationSettings.tsx
@@ -1,7 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import type { FieldPath, FieldValues, UseFormReturn } from 'react-hook-form'
-import { Button, Card, CardContent, FormControl_Shadcn_, FormField_Shadcn_, SheetSection } from 'ui'
+import { Button, Card, CardContent, FormControl, FormField, SheetSection } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -33,7 +33,7 @@ export const InstallationSettings = <
 
             return (
               <div key={key} className="flex flex-col gap-y-2 p-4">
-                <FormField_Shadcn_
+                <FormField
                   key={key}
                   name={key as TName}
                   control={form.control}
@@ -45,13 +45,13 @@ export const InstallationSettings = <
                       label={label}
                       description={description}
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input
                           type={type}
                           placeholder={required ? 'Provide a value' : undefined}
                           {...field}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx
index 7b474bdc1f..40a5d7128e 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/CreateQueueSheet.tsx
@@ -5,7 +5,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
+  Form,
   Separator,
   Sheet,
   SheetContent,
@@ -116,7 +116,7 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) =>
           </SheetHeader>
 
           <div className="overflow-auto flex-grow">
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <form
                 id={FORM_ID}
                 className="flex-grow overflow-auto"
@@ -130,7 +130,7 @@ export const CreateQueueSheet = ({ visible, onClose }: CreateQueueSheetProps) =>
                 <PartitionConfigFields form={form} />
                 <RlsSection form={form} isExposed={isExposed} projectRef={project?.ref} />
               </form>
-            </Form_Shadcn_>
+            </Form>
           </div>
           <SheetFooter>
             <Button
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
index e8dd8b87c5..1ccb8c5259 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { FormField_Shadcn_, Input, Separator, SheetSection } from 'ui'
+import { FormField, Input, Separator, SheetSection } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CreateQueueForm } from './CreateQueueSheet.schema'
@@ -12,7 +12,7 @@ export function PartitionConfigFields({ form }: { form: UseFormReturn<CreateQueu
   return (
     <>
       <SheetSection className="flex flex-col gap-3">
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="values.partitionInterval"
           render={({ field: { ref, ...rest } }) => (
@@ -30,7 +30,7 @@ export function PartitionConfigFields({ form }: { form: UseFormReturn<CreateQueu
             </FormItemLayout>
           )}
         />
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="values.retentionInterval"
           render={({ field: { ref, ...rest } }) => (
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueNameField.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueNameField.tsx
index 63811eced6..f5cd6e1e39 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueNameField.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueNameField.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, SheetSection } from 'ui'
+import { FormControl, FormField, Input_Shadcn_, SheetSection } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CreateQueueForm } from './CreateQueueSheet.schema'
@@ -7,14 +7,14 @@ import { CreateQueueForm } from './CreateQueueSheet.schema'
 export function QueueNameField({ form }: { form: UseFormReturn<CreateQueueForm> }) {
   return (
     <SheetSection>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="name"
         render={({ field }) => (
           <FormItemLayout label="Name" layout="vertical" className="gap-1 relative">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Input_Shadcn_ {...field} />
-            </FormControl_Shadcn_>
+            </FormControl>
             <span className="text-foreground-lighter text-xs absolute top-0 right-0">
               Can include letters, numbers, underscores, and hyphens
             </span>
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueTypeSelector.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueTypeSelector.tsx
index 2af655d10f..40be319262 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueTypeSelector.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/QueueTypeSelector.tsx
@@ -1,8 +1,8 @@
 import { UseFormReturn } from 'react-hook-form'
 import {
   Badge,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   RadioGroupStacked,
   RadioGroupStackedItem,
   SheetSection,
@@ -18,12 +18,12 @@ export function QueueTypeSelector({ form }: { form: UseFormReturn<CreateQueueFor
 
   return (
     <SheetSection>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="values.type"
         render={({ field }) => (
           <FormItemLayout label="Type" layout="vertical" className="gap-1">
-            <FormControl_Shadcn_>
+            <FormControl>
               <RadioGroupStacked
                 id="queue_type"
                 name="queue_type"
@@ -62,7 +62,7 @@ export function QueueTypeSelector({ form }: { form: UseFormReturn<CreateQueueFor
                   )
                 })}
               </RadioGroupStacked>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx
index 586ad0e871..47b9f9392b 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { Badge, FormControl_Shadcn_, FormField_Shadcn_, SheetSection, Switch } from 'ui'
+import { Badge, FormControl, FormField, SheetSection, Switch } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -17,7 +17,7 @@ export function RlsSection({
 }) {
   return (
     <SheetSection className="flex flex-col gap-y-2">
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="enableRls"
         render={({ field }) => (
@@ -31,13 +31,13 @@ export function RlsSection({
             }
             description="Restrict access to your queue by enabling RLS and writing Postgres policies to control access for each role."
           >
-            <FormControl_Shadcn_>
+            <FormControl>
               <Switch
                 checked={field.value}
                 onCheckedChange={field.onChange}
                 disabled={field.disabled || isExposed}
               />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
index 26bfe7599f..b3e0f1bdd3 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
@@ -4,14 +4,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  Switch,
-} from 'ui'
+import { Button, Form, FormControl, FormField, FormItem, Switch } from 'ui'
 import { Admonition } from 'ui-patterns'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -193,15 +186,15 @@ export const QueuesSettings = () => {
           title="Settings"
           description="Manage your queues via any client library or Data APIs endpoints"
         />
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id="pgmq-postgrest" onSubmit={form.handleSubmit(onSubmit)}>
             <FormPanelContainer>
               <FormPanelContent className="px-8 py-8">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="enable"
                   render={({ field }) => (
-                    <FormItem_Shadcn_ className="w-full">
+                    <FormItem className="w-full">
                       <FormItemLayout
                         className="w-full"
                         layout="flex"
@@ -239,7 +232,7 @@ export const QueuesSettings = () => {
                           </>
                         }
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             name="enable"
                             size="large"
@@ -249,7 +242,7 @@ export const QueuesSettings = () => {
                             checked={field.value}
                             onCheckedChange={(value) => field.onChange(value)}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                       {tablesWithoutRLS.length > 0 && (
                         <Admonition
@@ -313,7 +306,7 @@ export const QueuesSettings = () => {
                           </p>
                         </Admonition>
                       )}
-                    </FormItem_Shadcn_>
+                    </FormItem>
                   )}
                 />
               </FormPanelContent>
@@ -342,7 +335,7 @@ export const QueuesSettings = () => {
               </FormPanelFooter>
             </FormPanelContainer>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </div>
 
       <ConfirmationModal
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx
index 181c3a3178..f4f3670d1b 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'common'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input, Modal } from 'ui'
+import { Form, FormControl, FormField, Input, Modal } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import z from 'zod'
 
@@ -85,13 +85,13 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) =>
       }}
     >
       <Modal.Content className="flex flex-col gap-y-4">
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id={FORM_ID}
             className="flex-grow overflow-auto gap-2 flex flex-col"
             onSubmit={form.handleSubmit(onSubmit)}
           >
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="delay"
               render={({ field: { ref, ...rest } }) => (
@@ -101,23 +101,23 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) =>
                   className="gap-1"
                   description="Time in seconds before the message becomes available for reading."
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input
                       {...rest}
                       type="number"
                       placeholder="1"
                       actions={<p className="text-foreground-light pr-2">sec</p>}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="payload"
               render={({ field }) => (
                 <FormItemLayout label="Message payload" layout="vertical" className="gap-1">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <CodeEditor
                       id="message-payload"
                       language="json"
@@ -127,12 +127,12 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) =>
                       options={{ wordWrap: 'off', contextmenu: false }}
                       value={field.value}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
           </form>
-        </Form_Shadcn_>
+        </Form>
       </Modal.Content>
     </Modal>
   )
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
index 68d0b585b0..2da71487f9 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx
@@ -11,9 +11,9 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
@@ -81,48 +81,48 @@ export const AddNewSecretModal = () => {
         </DialogHeader>
         <DialogSectionSeparator />
         <DialogSection className="space-y-4">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={formId}
               noValidate
               onSubmit={form.handleSubmit(onAddNewSecret)}
               className="space-y-4"
             >
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label="Name">
-                    <FormControl_Shadcn_ className="col-span-6">
+                    <FormControl className="col-span-6">
                       <Input_Shadcn_ {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="description"
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label="Description" labelOptional="Optional">
-                    <FormControl_Shadcn_ className="col-span-6">
+                    <FormControl className="col-span-6">
                       <Input_Shadcn_ {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="secret"
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label="Secret value">
-                    <FormControl_Shadcn_ className="col-span-6">
+                    <FormControl className="col-span-6">
                       <Input reveal copy {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogSection>
         <DialogFooter>
           <Button type="default" disabled={isSubmitting} onClick={handleClose}>
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
index 2114ee7892..04e9265489 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
@@ -13,9 +13,9 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -131,26 +131,26 @@ export const EditSecretModal = () => {
         ) : (
           <>
             <DialogSection>
-              <Form_Shadcn_ {...form}>
+              <Form {...form}>
                 <form
                   id={formId}
                   className="flex flex-col gap-4"
                   autoComplete="off"
                   onSubmit={form.handleSubmit(onSubmit)}
                 >
-                  <FormField_Shadcn_
+                  <FormField
                     key="name"
                     name="name"
                     control={form.control}
                     render={({ field }) => (
                       <FormItemLayout name="name" label="Name">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_ id="name" {...field} />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
-                  <FormField_Shadcn_
+                  <FormField
                     key="description"
                     name="description"
                     control={form.control}
@@ -160,19 +160,19 @@ export const EditSecretModal = () => {
                         label="Description"
                         labelOptional="Optional"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_ id="description" {...field} data-lpignore="true" />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
-                  <FormField_Shadcn_
+                  <FormField
                     key="secret"
                     name="secret"
                     control={form.control}
                     render={({ field }) => (
                       <FormItemLayout name="secret" label="Secret value">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <div className="relative">
                             <Input_Shadcn_
                               id="secret"
@@ -191,12 +191,12 @@ export const EditSecretModal = () => {
                               onClick={() => setShowSecretValue(!showSecretValue)}
                             />
                           </div>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </form>
-              </Form_Shadcn_>
+              </Form>
             </DialogSection>
             <DialogFooter>
               <Button
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
index 0e15863778..fbb0e30b70 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
@@ -25,10 +25,10 @@ import {
   CommandList_Shadcn_,
   CommandSeparator_Shadcn_,
   CriticalIcon,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
   Input_Shadcn_,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
@@ -107,7 +107,7 @@ export const ColumnType = ({
   }
 
   return (
-    <FormField_Shadcn_
+    <FormField
       control={control}
       name={name}
       render={({ field }) => {
@@ -123,17 +123,17 @@ export const ColumnType = ({
               description={unsupportedDataTypeText}
               className={className}
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_ {...field} id={name} disabled readOnly />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )
         }
         return (
-          <FormItem_Shadcn_ className={cn('flex flex-col space-y-2', className)}>
-            <FormLabel_Shadcn_ className="text-foreground flex gap-2 items-center break-words">
+          <FormItem className={cn('flex flex-col space-y-2', className)}>
+            <FormLabel className="text-foreground flex gap-2 items-center break-words">
               Type
-            </FormLabel_Shadcn_>
+            </FormLabel>
             <Popover_Shadcn_ modal open={open} onOpenChange={setOpen}>
               <PopoverTrigger_Shadcn_ asChild>
                 <Button
@@ -291,7 +291,7 @@ export const ColumnType = ({
                 </AlertDescription_Shadcn_>
               </Alert_Shadcn_>
             )}
-          </FormItem_Shadcn_>
+          </FormItem>
         )
       }}
     />
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
index 2de11fa2ca..2e53268d6e 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateIcebergWrapperSheet.tsx
@@ -6,9 +6,9 @@ import {
   Button,
   Card,
   CardContent,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   RadioGroupStacked,
   RadioGroupStackedItem,
@@ -254,7 +254,7 @@ export const CreateIcebergWrapperSheet = ({
   return (
     <>
       <div className="h-full" tabIndex={-1}>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id={FORM_ID}
             onSubmit={form.handleSubmit(onSubmit)}
@@ -273,7 +273,7 @@ export const CreateIcebergWrapperSheet = ({
                 <PageSectionContent>
                   <Card>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="wrapper_name"
                         render={({ field }) => (
@@ -291,9 +291,9 @@ export const CreateIcebergWrapperSheet = ({
                               )
                             }
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_ {...field} />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -310,7 +310,7 @@ export const CreateIcebergWrapperSheet = ({
                 <PageSectionContent>
                   <Card>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="target"
                         render={({ field }) => (
@@ -455,7 +455,7 @@ export const CreateIcebergWrapperSheet = ({
               </Button>
             </SheetFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </div>
     </>
   )
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
index a3ea1b2931..16251167fb 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
@@ -8,9 +8,9 @@ import {
   Button,
   Card,
   CardContent,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   RadioGroupStacked,
   RadioGroupStackedItem,
@@ -212,7 +212,7 @@ export const CreateWrapperSheet = ({
   return (
     <>
       <div className="h-full" tabIndex={-1}>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id={FORM_ID}
             onSubmit={form.handleSubmit(onSubmit)}
@@ -231,7 +231,7 @@ export const CreateWrapperSheet = ({
                 <PageSectionContent>
                   <Card>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="wrapper_name"
                         render={({ field }) => (
@@ -250,9 +250,9 @@ export const CreateWrapperSheet = ({
                               )
                             }
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_ id="wrapper_name" {...field} />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -285,12 +285,12 @@ export const CreateWrapperSheet = ({
                   </PageSectionSummary>
                 </PageSectionMeta>
                 <PageSectionContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="mode"
                     render={({ field }) => (
                       <FormItemLayout layout="vertical">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <RadioGroupStacked
                             value={field.value as string}
                             onValueChange={field.onChange}
@@ -356,7 +356,7 @@ export const CreateWrapperSheet = ({
                               )}
                             </RadioGroupStackedItem>
                           </RadioGroupStacked>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -488,7 +488,7 @@ export const CreateWrapperSheet = ({
               </Button>
             </SheetFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </div>
 
       <WrapperTableEditor
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
index 3ab33ef202..1027d46bec 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
@@ -9,9 +9,9 @@ import {
   Button,
   Card,
   CardContent,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   SheetFooter,
   SheetHeader,
@@ -194,7 +194,7 @@ export const EditWrapperSheet = ({
   return (
     <>
       <div className="flex flex-col h-full" tabIndex={-1}>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id={FORM_ID}
             onSubmit={form.handleSubmit(onSubmit)}
@@ -215,7 +215,7 @@ export const EditWrapperSheet = ({
                 <PageSectionContent>
                   <Card>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="wrapper_name"
                         render={({ field }) => (
@@ -236,9 +236,9 @@ export const EditWrapperSheet = ({
                               )
                             }
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_ {...field} />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -352,7 +352,7 @@ export const EditWrapperSheet = ({
               </Button>
             </SheetFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </div>
 
       <ConfirmationModal
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
index 7d208fee36..47cf644630 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
@@ -2,7 +2,7 @@ import { InputVariants } from '@ui/components/shadcn/ui/input'
 import { HelpCircle } from 'lucide-react'
 import Link from 'next/link'
 import type { Control, FieldPath, FieldValues } from 'react-hook-form'
-import { cn, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, Textarea } from 'ui'
+import { cn, FormControl, FormField, Input_Shadcn_, Textarea } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -23,7 +23,7 @@ const InputField = <
   loading = false,
 }: InputFieldProps<TFieldValues>) => {
   return (
-    <FormField_Shadcn_
+    <FormField
       control={control}
       name={option.name as TName}
       defaultValue={(option.defaultValue ?? '') as any}
@@ -49,7 +49,7 @@ const InputField = <
           labelOptional={!option.required ? 'Optional' : undefined}
           description={option.description}
         >
-          <FormControl_Shadcn_>
+          <FormControl>
             {loading ? (
               <span className={cn(InputVariants({ size: 'small' }))}>
                 Fetching value from Vault...
@@ -61,7 +61,7 @@ const InputField = <
             ) : (
               <Input_Shadcn_ {...field} id={option.name} />
             )}
-          </FormControl_Shadcn_>
+          </FormControl>
         </FormItemLayout>
       )}
     />
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
index 447a606e4c..cc2499b30f 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
@@ -18,9 +18,9 @@ import {
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Label_Shadcn_,
   Popover_Shadcn_,
@@ -188,13 +188,13 @@ export default WrapperTableEditor
 const Option = ({ option, control }: { option: TableOption; control: Control<FieldValues> }) => {
   if (option.type === 'select') {
     return (
-      <FormField_Shadcn_
+      <FormField
         control={control}
         name={option.name}
         defaultValue={option.defaultValue}
         render={({ field }) => (
           <FormItemLayout layout="vertical" label={option.label} name={option.name}>
-            <FormControl_Shadcn_>
+            <FormControl>
               <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                 <SelectTrigger_Shadcn_>
                   <SelectValue_Shadcn_ placeholder="Select an option" />
@@ -208,7 +208,7 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
                   ))}
                 </SelectContent_Shadcn_>
               </Select_Shadcn_>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
@@ -216,15 +216,15 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
   }
 
   return (
-    <FormField_Shadcn_
+    <FormField
       control={control}
       name={option.name}
       defaultValue={option.defaultValue ?? ''}
       render={({ field }) => (
         <FormItemLayout layout="vertical" label={option.label} name={option.name}>
-          <FormControl_Shadcn_>
+          <FormControl>
             <Input_Shadcn_ {...field} id={option.name} placeholder={option.placeholder ?? ''} />
-          </FormControl_Shadcn_>
+          </FormControl>
         </FormItemLayout>
       )}
     />
@@ -334,7 +334,7 @@ const TableForm = ({
   const schema = useWatch({ name: 'schema', control: form.control })
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form
         id="wrapper-table-editor-form"
         onSubmit={form.handleSubmit(handleSubmit)}
@@ -342,12 +342,12 @@ const TableForm = ({
       >
         {isLoading && <ShimmeringLoader className="py-4" />}
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="schema"
           render={({ field }) => (
             <FormItemLayout layout="vertical" label="Select a schema for the foreign table">
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Select_Shadcn_
                   name="schema"
                   value={field.value}
@@ -371,25 +371,25 @@ const TableForm = ({
                     })}
                   </SelectContent_Shadcn_>
                 </Select_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
         {schema === 'custom' && (
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="schema_name"
             render={({ field }) => (
               <FormItemLayout name="schema_name" layout="vertical" label="Schema name">
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input_Shadcn_ {...field} id="schema_name" />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
         )}
 
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="table_name"
           render={({ field }) => (
@@ -399,9 +399,9 @@ const TableForm = ({
               label="Table name"
               description="You can query from this table after the wrapper is enabled."
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_ {...field} id="table_name" />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -412,7 +412,7 @@ const TableForm = ({
           <input key={option.name} type="hidden" {...form.register(option.name)} />
         ))}
         {table.availableColumns != null ? (
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="selected_columns"
             render={() => (
@@ -468,7 +468,7 @@ const TableForm = ({
           <div className="flex flex-col gap-y-2">
             {columnFields.map((column, columnIndex) => (
               <div key={column.id} className="flex items-center gap-x-2">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name={`columns.${columnIndex}.name`}
                   render={({ field }) => (
@@ -477,9 +477,9 @@ const TableForm = ({
                       name={`columns.${columnIndex}.name`}
                       label="Name"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_ {...field} id={`columns.${columnIndex}.name`} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -516,6 +516,6 @@ const TableForm = ({
           <Option key={option.name} option={option} control={form.control} />
         ))}
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
index 54c36bbbf7..9d21a6c57e 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
@@ -8,9 +8,9 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Sheet,
   SheetContent,
   SheetFooter,
@@ -302,7 +302,7 @@ export const StripeSyncEngineOverviewTab = () => {
         >
           <Sheet open={!!shouldShowInstallSheet} onOpenChange={handleCloseInstallSheet}>
             <SheetContent size="lg" tabIndex={undefined} className="flex flex-col gap-0">
-              <Form_Shadcn_ {...form}>
+              <Form {...form}>
                 <form
                   id={formId}
                   onSubmit={form.handleSubmit(({ stripeSecretKey }) => {
@@ -329,7 +329,7 @@ export const StripeSyncEngineOverviewTab = () => {
                     <h3 className="heading-default">Configuration</h3>
 
                     <div className="flex flex-col gap-y-2">
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="stripeSecretKey"
                         render={({ field }) => (
@@ -338,7 +338,7 @@ export const StripeSyncEngineOverviewTab = () => {
                             label="Stripe API secret key"
                             description="Your Stripe secret key. Requires write access to Webhook Endpoints and read-only access to all other categories."
                           >
-                            <FormControl_Shadcn_ className="col-span-8">
+                            <FormControl className="col-span-8">
                               <Input
                                 id="stripe_api_key"
                                 name="stripe_api_key"
@@ -350,7 +350,7 @@ export const StripeSyncEngineOverviewTab = () => {
                                 value={field.value}
                                 onChange={(e) => field.onChange(e.target.value)}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -411,7 +411,7 @@ export const StripeSyncEngineOverviewTab = () => {
                     </Button>
                   </SheetFooter>
                 </form>
-              </Form_Shadcn_>
+              </Form>
             </SheetContent>
           </Sheet>
         </IntegrationOverviewTab>
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx
index 9e9b203e5b..d4d5ae3bd4 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx
@@ -34,9 +34,9 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -220,7 +220,7 @@ export const JWTSettings = () => {
         }
       >
         <Panel.Content className="border-t border-panel-border-interior-light [[data-theme*=dark]_&]:border-panel-border-interior-dark">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={formId}
               onSubmit={form.handleSubmit(onUpdateJwtExp)}
@@ -308,7 +308,7 @@ export const JWTSettings = () => {
                     />
                   </FormItemLayout>
 
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="JWT_EXP"
                     disabled={!canUpdateConfig || isLoadingAuthConfig}
@@ -327,7 +327,7 @@ export const JWTSettings = () => {
                           </>
                         }
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <InputGroup>
                             <FormInputGroupInput
                               {...field}
@@ -345,14 +345,14 @@ export const JWTSettings = () => {
                               <InputGroupText>seconds</InputGroupText>
                             </InputGroupAddon>
                           </InputGroup>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
                 </>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
 
           {!isPending && !legacyKey && (
             <>
@@ -656,7 +656,7 @@ export const JWTSettings = () => {
         }
       >
         <Modal.Content>
-          <Form_Shadcn_ {...customJwtSecretForm}>
+          <Form {...customJwtSecretForm}>
             <form
               id={customJwtSecretFormId}
               onSubmit={customJwtSecretForm.handleSubmit((values) => {
@@ -671,7 +671,7 @@ export const JWTSettings = () => {
                 Pick a new custom JWT secret. Make sure it is a strong combination of characters
                 that cannot be guessed easily.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 control={customJwtSecretForm.control}
                 name="customToken"
                 render={({ field }) => (
@@ -680,14 +680,14 @@ export const JWTSettings = () => {
                     label="Custom JWT secret"
                     description="Minimally 32 characters long, '@' and '$' are not allowed."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input copy reveal icon={<Key />} className="w-full text-left" {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </form>
-          </Form_Shadcn_>
+          </Form>
         </Modal.Content>
       </Modal>
     </>
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
index 72b03cfd0e..0d57c917f6 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
@@ -7,12 +7,11 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
   Input_Shadcn_,
   RadioGroupCard,
   RadioGroupCardItem,
@@ -273,14 +272,14 @@ function LogDrainFormItem({
   type?: string
 }) {
   return (
-    <FormField_Shadcn_
+    <FormField
       name={value}
       control={formControl}
       render={({ field }) => (
         <FormItemLayout layout="horizontal" label={label} description={description || ''}>
-          <FormControl_Shadcn_>
+          <FormControl>
             <Input_Shadcn_ type={type || 'text'} placeholder={placeholder} {...field} />
-          </FormControl_Shadcn_>
+          </FormControl>
         </FormItemLayout>
       )}
     />
@@ -382,7 +381,7 @@ export function LogDrainDestinationSheetForm({
           <SheetTitle>Add destination</SheetTitle>
         </SheetHeader>
         <SheetSection className="!px-0 !pb-0">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id={FORM_ID}
               onSubmit={(e) => {
@@ -464,49 +463,49 @@ export function LogDrainDestinationSheetForm({
                         formControl={form.control}
                         placeholder="https://example.com/log-drain"
                       />
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="http"
                         render={({ field }) => (
                           <FormItemLayout layout="horizontal" label="HTTP Version">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <RadioGroupCard
                                 className="flex gap-2"
                                 onValueChange={field.onChange}
                                 value={field.value}
                               >
-                                <FormItem_Shadcn_ asChild>
-                                  <FormControl_Shadcn_>
+                                <FormItem asChild>
+                                  <FormControl>
                                     <RadioGroupCardItem value="http1" label="HTTP/1" />
-                                  </FormControl_Shadcn_>
-                                </FormItem_Shadcn_>
-                                <FormItem_Shadcn_ asChild>
-                                  <FormControl_Shadcn_>
+                                  </FormControl>
+                                </FormItem>
+                                <FormItem asChild>
+                                  <FormControl>
                                     <RadioGroupCardItem value="http2" label="HTTP/2" />
-                                  </FormControl_Shadcn_>
-                                </FormItem_Shadcn_>
+                                  </FormControl>
+                                </FormItem>
                               </RadioGroupCard>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
                     </div>
 
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="gzip"
                       render={({ field }) => (
-                        <FormItem_Shadcn_ className="space-y-2 px-4">
+                        <FormItem className="space-y-2 px-4">
                           <div className="flex gap-2 items-center">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch checked={field.value} onCheckedChange={field.onChange} />
-                            </FormControl_Shadcn_>
-                            <FormLabel_Shadcn_ className="text-base">Gzip</FormLabel_Shadcn_>
+                            </FormControl>
+                            <FormLabel className="text-base">Gzip</FormLabel>
                             <InfoTooltip align="start">
                               Gzip compresses logs before sending it to the destination.
                             </InfoTooltip>
                           </div>
-                        </FormItem_Shadcn_>
+                        </FormItem>
                       )}
                     />
                   </>
@@ -532,7 +531,7 @@ export function LogDrainDestinationSheetForm({
                         </>
                       }
                     />
-                    <FormField_Shadcn_
+                    <FormField
                       name="region"
                       control={form.control}
                       render={({ field }) => (
@@ -554,7 +553,7 @@ export function LogDrainDestinationSheetForm({
                             </p>
                           }
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                               <SelectTrigger_Shadcn_ className="col-span-3">
                                 <SelectValue_Shadcn_ placeholder="Select a region" />
@@ -570,7 +569,7 @@ export function LogDrainDestinationSheetForm({
                                 </SelectGroup_Shadcn_>
                               </SelectContent_Shadcn_>
                             </Select_Shadcn_>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -700,7 +699,7 @@ export function LogDrainDestinationSheetForm({
                         formControl={form.control}
                         description="The HTTP endpoint for OTLP log ingestion (typically ends with /v1/logs)"
                       />
-                      <FormField_Shadcn_
+                      <FormField
                         name="protocol"
                         control={form.control}
                         render={({ field }) => (
@@ -709,7 +708,7 @@ export function LogDrainDestinationSheetForm({
                             label="Protocol"
                             description="Only HTTP with Protocol Buffers is currently supported"
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                                 <SelectTrigger_Shadcn_ className="col-span-3">
                                   <SelectValue_Shadcn_ placeholder="Select protocol" />
@@ -725,36 +724,34 @@ export function LogDrainDestinationSheetForm({
                                   </SelectGroup_Shadcn_>
                                 </SelectContent_Shadcn_>
                               </Select_Shadcn_>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
                     </div>
 
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="gzip"
                       render={({ field }) => (
-                        <FormItem_Shadcn_ className="space-y-2 px-4">
+                        <FormItem className="space-y-2 px-4">
                           <div className="flex gap-2 items-center">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch checked={field.value} onCheckedChange={field.onChange} />
-                            </FormControl_Shadcn_>
-                            <FormLabel_Shadcn_ className="text-base">
-                              Gzip Compression
-                            </FormLabel_Shadcn_>
+                            </FormControl>
+                            <FormLabel className="text-base">Gzip Compression</FormLabel>
                             <InfoTooltip align="start">
                               Enable gzip compression for log data sent to the OTLP endpoint.
                             </InfoTooltip>
                           </div>
-                        </FormItem_Shadcn_>
+                        </FormItem>
                       )}
                     />
                   </>
                 )}
                 {type === 'last9' && (
                   <div className="grid gap-4 px-content">
-                    <FormField_Shadcn_
+                    <FormField
                       name="region"
                       control={form.control}
                       render={({ field }) => (
@@ -768,7 +765,7 @@ export function LogDrainDestinationSheetForm({
                             </p>
                           }
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                               <SelectTrigger_Shadcn_ className="col-span-3">
                                 <SelectValue_Shadcn_ placeholder="Select a region" />
@@ -784,7 +781,7 @@ export function LogDrainDestinationSheetForm({
                                 </SelectGroup_Shadcn_>
                               </SelectContent_Shadcn_>
                             </Select_Shadcn_>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -808,7 +805,7 @@ export function LogDrainDestinationSheetForm({
                 )}
                 {HEADER_ENABLED_TYPES.includes(type as (typeof HEADER_ENABLED_TYPES)[number]) && (
                   <div className="px-content">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="headerEntries"
                       render={({ fieldState }) => (
@@ -836,7 +833,7 @@ export function LogDrainDestinationSheetForm({
                 )}
               </div>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </SheetSection>
 
         <div className="mt-auto">
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.test.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.test.tsx
index 6daad6986a..e2ae0ef10a 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.test.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.test.tsx
@@ -32,7 +32,7 @@ vi.mock('ui', async (importOriginal) => {
   const original = (await importOriginal()) as typeof import('ui')
   return {
     ...original,
-    Form_Shadcn_: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    Form: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   }
 })
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
index 406defb7c4..ff898b685b 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
@@ -6,7 +6,7 @@ import { useParams } from 'common'
 import { useTheme } from 'next-themes'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
-import { Button, Card, CardFooter, Form_Shadcn_ as Form } from 'ui'
+import { Button, Card, CardFooter, Form } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { BillingCustomerDataForm } from './BillingCustomerDataForm'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
index a4a09a5290..80878c296d 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
@@ -16,9 +16,9 @@ import {
   CommandInput_Shadcn_ as CommandInput,
   CommandItem_Shadcn_ as CommandItem,
   CommandList_Shadcn_ as CommandList,
-  FormControl_Shadcn_ as FormControl,
-  FormField_Shadcn_ as FormField,
-  FormMessage_Shadcn_ as FormMessage,
+  FormControl,
+  FormField,
+  FormMessage,
   Input_Shadcn_ as Input,
   Popover_Shadcn_ as Popover,
   PopoverContent_Shadcn_ as PopoverContent,
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
index f991b5d46c..41009eabb6 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'common'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { FormMessage_Shadcn_, Input_Shadcn_ } from 'ui'
+import { FormMessage, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import {
@@ -148,7 +148,7 @@ const BillingEmail = () => {
                               disabled={!canUpdateOrganization}
                             />
                           </FormControl>
-                          <FormMessage_Shadcn_ />
+                          <FormMessage />
                         </FormItemLayout>
                       )}
                     />
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
index ff1479f94a..6a69207317 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
@@ -17,8 +17,8 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Input_Shadcn_,
   Separator,
 } from 'ui'
@@ -258,7 +258,7 @@ export const CreditCodeRedemption = ({
 
             <DialogSectionSeparator />
 
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               {isOrgLoading || isCustomerProfileLoading || !isPermissionsLoaded ? (
                 <div className="p-6 space-y-4">
                   <ShimmeringLoader />
@@ -270,7 +270,7 @@ export const CreditCodeRedemption = ({
               ) : (
                 <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
                   <DialogSection className="flex flex-col gap-2">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="code"
                       render={({ field }) => (
@@ -343,7 +343,7 @@ export const CreditCodeRedemption = ({
                   </DialogFooter>
                 </form>
               )}
-            </Form_Shadcn_>
+            </Form>
           </>
         )}
       </DialogContent>
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
index ae7c605074..02cb251723 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
@@ -24,8 +24,8 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -318,10 +318,10 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
 
         <DialogSectionSeparator />
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
             <DialogSection className="flex flex-col gap-2">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="amount"
                 render={({ field }) => (
@@ -331,7 +331,7 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
                 )}
               />
 
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="paymentMethod"
                 render={() => (
@@ -414,7 +414,7 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
               </DialogFooter>
             )}
           </form>
-        </Form_Shadcn_>
+        </Form>
         {stripePromise && paymentIntentSecret && (
           <Elements stripe={stripePromise} options={options}>
             <PaymentConfirmation
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx
index e732241824..eb63f167be 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx
@@ -12,8 +12,8 @@ import {
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Skeleton,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -171,9 +171,9 @@ export const AwsMarketplaceLinkExistingOrg = ({
           </ScaffoldSectionDetail>
 
           <ScaffoldSectionContent className="lg:ml-10">
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <form className="flex flex-col">
-                <FormField_Shadcn_
+                <FormField
                   name="orgSlug"
                   control={form.control}
                   render={({ field }) => (
@@ -233,7 +233,7 @@ export const AwsMarketplaceLinkExistingOrg = ({
                   )}
                 />
               </form>
-            </Form_Shadcn_>
+            </Form>
 
             {orgsNotLinkable.length > 0 && !isLoadingOnboardingInfo && (
               <Collapsible_Shadcn_
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
index 8bd170d36f..18a2c9f5fc 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgForm.tsx
@@ -1,9 +1,9 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import {
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Label_Shadcn_,
   Select_Shadcn_,
@@ -60,15 +60,15 @@ const NewAwsMarketplaceOrgForm = ({ onSubmit }: Props) => {
   const kind = form.watch('kind')
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form id={CREATE_AWS_MANAGED_ORG_FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
         <div className="flex flex-col gap-4">
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="name"
             render={({ field }) => (
               <FormItemLayout label="Name" layout="horizontal">
-                <FormControl_Shadcn_>
+                <FormControl>
                   <>
                     <Input_Shadcn_ {...field} placeholder="Organization name" />
                     <div className="mt-1">
@@ -80,16 +80,16 @@ const NewAwsMarketplaceOrgForm = ({ onSubmit }: Props) => {
                       </Label_Shadcn_>
                     </div>
                   </>
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="kind"
             render={({ field }) => (
               <FormItemLayout label="Type" layout="horizontal">
-                <FormControl_Shadcn_>
+                <FormControl>
                   <>
                     <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                       <SelectTrigger_Shadcn_>
@@ -112,17 +112,17 @@ const NewAwsMarketplaceOrgForm = ({ onSubmit }: Props) => {
                       </Label_Shadcn_>
                     </div>
                   </>
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
           {kind == 'COMPANY' && (
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="size"
               render={({ field }) => (
                 <FormItemLayout label="Company size" layout="horizontal">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <>
                       <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                         <SelectTrigger_Shadcn_>
@@ -145,14 +145,14 @@ const NewAwsMarketplaceOrgForm = ({ onSubmit }: Props) => {
                         </Label_Shadcn_>
                       </div>
                     </>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
           )}
         </div>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/AIOptInLevelSelector.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/AIOptInLevelSelector.tsx
index 362dce7839..ca7d4ad057 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/AIOptInLevelSelector.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/AIOptInLevelSelector.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import { Control } from 'react-hook-form'
-import { FormField_Shadcn_, RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
+import { FormField, RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { OptInToOpenAIToggle } from './OptInToOpenAIToggle'
@@ -96,7 +96,7 @@ export const AIOptInLevelSelector = ({
       }
     >
       <div className="max-w-xl">
-        <FormField_Shadcn_
+        <FormField
           control={control}
           name="aiOptInLevel"
           render={({ field }) => (
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/DataPrivacyForm.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/DataPrivacyForm.tsx
index 0eee0ddd16..38d191a19b 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/DataPrivacyForm.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/DataPrivacyForm.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect } from 'react'
-import { Card, CardContent, CardFooter, Form_Shadcn_ } from 'ui'
+import { Card, CardContent, CardFooter, Form } from 'ui'
 
 import { AIOptInLevelSelector } from './AIOptInLevelSelector'
 import { FormActions } from '@/components/ui/Forms/FormActions'
@@ -23,7 +23,7 @@ export const DataPrivacyForm = () => {
   }, [currentOptInLevel, form])
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form id="org-privacy-form" onSubmit={form.handleSubmit(onSubmit)}>
         <Card>
           <CardContent className="pt-6">
@@ -46,6 +46,6 @@ export const DataPrivacyForm = () => {
           </CardFooter>
         </Card>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx
index ee936ab620..26b4c28763 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx
@@ -5,15 +5,7 @@ import { useParams } from 'common'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-} from 'ui'
+import { Card, CardContent, CardFooter, Form, FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
@@ -78,24 +70,24 @@ export const OrganizationDetailsForm = () => {
   }, [selectedOrganization, orgDetailsForm, isUpdatingDetails])
 
   return (
-    <Form_Shadcn_ {...orgDetailsForm}>
+    <Form {...orgDetailsForm}>
       <form
         id="org-details-form"
         onSubmit={orgDetailsForm.handleSubmit(onUpdateOrganizationDetails)}
       >
         <Card>
           <CardContent>
-            <FormField_Shadcn_
+            <FormField
               control={orgDetailsForm.control}
               name="name"
               render={({ field }) => (
                 <FormItemLayout label="Organization name" layout="flex-row-reverse">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_
                       {...field}
                       disabled={!canUpdateOrganization || isUpdatingDetails}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -117,6 +109,6 @@ export const OrganizationDetailsForm = () => {
           </CardFooter>
         </Card>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
index 3be27cb557..cd6994757c 100644
--- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -15,9 +15,9 @@ import { toast } from 'sonner'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -380,7 +380,7 @@ export const NewOrgForm = ({
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} id={FORM_ID}>
         <Panel
           title={
@@ -424,7 +424,7 @@ export const NewOrgForm = ({
         >
           <div className="divide-y divide-border-muted">
             <Panel.Content>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
@@ -433,7 +433,7 @@ export const NewOrgForm = ({
                     layout="horizontal"
                     description="What's the name of your company or team? You can change this later."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         autoFocus
                         type="text"
@@ -444,13 +444,13 @@ export const NewOrgForm = ({
                         data-bwignore
                         {...field}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </Panel.Content>
             <Panel.Content>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="kind"
                 render={({ field }) => (
@@ -459,7 +459,7 @@ export const NewOrgForm = ({
                     layout="horizontal"
                     description="What best describes your organization?"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                         <SelectTrigger_Shadcn_ className="w-full">
                           <SelectValue_Shadcn_ />
@@ -473,7 +473,7 @@ export const NewOrgForm = ({
                           ))}
                         </SelectContent_Shadcn_>
                       </Select_Shadcn_>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -481,7 +481,7 @@ export const NewOrgForm = ({
 
             {form.watch('kind') == 'COMPANY' && (
               <Panel.Content>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="size"
                   render={({ field }) => (
@@ -490,7 +490,7 @@ export const NewOrgForm = ({
                       layout="horizontal"
                       description="How many people are in your company?"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                           <SelectTrigger_Shadcn_ className="w-full">
                             <SelectValue_Shadcn_ />
@@ -504,7 +504,7 @@ export const NewOrgForm = ({
                             ))}
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -513,7 +513,7 @@ export const NewOrgForm = ({
 
             {isBillingEnabled && (
               <Panel.Content>
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="plan"
                   render={({ field }) => (
@@ -527,7 +527,7 @@ export const NewOrgForm = ({
                         </>
                       }
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_
                           value={field.value}
                           onValueChange={(value) => {
@@ -547,7 +547,7 @@ export const NewOrgForm = ({
                             ))}
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -557,7 +557,7 @@ export const NewOrgForm = ({
             {form.watch('plan') === 'PRO' && (
               <>
                 <Panel.Content className="border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="spend_cap"
                     render={({ field }) => (
@@ -580,9 +580,9 @@ export const NewOrgForm = ({
                             : `You pay for overages beyond the plan's quota.`
                         }
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch checked={field.value} onCheckedChange={field.onChange} />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -679,6 +679,6 @@ export const NewOrgForm = ({
           </Elements>
         )}
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
index 40bea8fabc..98fb8e7a5d 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
@@ -13,9 +13,9 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   InputGroup,
   InputGroupAddon,
@@ -217,14 +217,14 @@ export const PublishAppSidePanel = ({
       }
       onCancel={() => onClose()}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <div className="h-full flex flex-col">
             <div className="flex-grow">
               <SidePanel.Content>
                 <div className="py-4 flex items-start justify-between gap-10">
                   <div className="space-y-4 w-full">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="name"
                       render={({ field }) => (
@@ -233,20 +233,20 @@ export const PublishAppSidePanel = ({
                           label="Application name"
                           description={selectedApp?.id && `ID: ${selectedApp.id}`}
                         >
-                          <FormControl_Shadcn_ className="col-span-6">
+                          <FormControl className="col-span-6">
                             <Input_Shadcn_ {...field} />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="website"
                       render={({ field }) => (
                         <FormItemLayout layout="vertical" label="Website URL">
-                          <FormControl_Shadcn_ className="col-span-6">
+                          <FormControl className="col-span-6">
                             <Input_Shadcn_ {...field} placeholder="https://my-website.com" />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -338,7 +338,7 @@ export const PublishAppSidePanel = ({
                 </div>
                 <div className="space-y-2 pb-2">
                   {callbackUrlsFields.map((url, index) => (
-                    <FormField_Shadcn_
+                    <FormField
                       key={url.id}
                       control={form.control}
                       name={`redirect_uris.${index}.value`}
@@ -347,7 +347,7 @@ export const PublishAppSidePanel = ({
                           layout="vertical"
                           label={<span className="sr-only">Callback URL</span>}
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <InputGroupInput
                                 {...field}
@@ -364,7 +364,7 @@ export const PublishAppSidePanel = ({
                                 </InputGroupAddon>
                               ) : null}
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -465,7 +465,7 @@ export const PublishAppSidePanel = ({
             </Modal.Content>
           </Modal>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </SidePanel>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx b/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
index 55a6356e80..fa53d03856 100644
--- a/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/JoinOrganizationOnSignup.tsx
@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form'
 import {
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -23,7 +23,7 @@ export const JoinOrganizationOnSignup = ({
 
   return (
     <div className="space-y-4">
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="joinOrgOnSignup"
         render={({ field }) => (
@@ -32,14 +32,14 @@ export const JoinOrganizationOnSignup = ({
             label="Automatically add users to organization on sign up"
             description="If disabled, users will need to be invited to the organization after signing up"
           >
-            <FormControl_Shadcn_ className="flex items-center gap-2">
+            <FormControl className="flex items-center gap-2">
               <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
       {joinOrgOnSignup && (
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="roleOnJoin"
           render={({ field }) => (
@@ -49,7 +49,7 @@ export const JoinOrganizationOnSignup = ({
               layout="flex-row-reverse"
               className="justify-between"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Select_Shadcn_ value={field.value} onValueChange={(val) => field.onChange(val)}>
                   <SelectTrigger_Shadcn_ className="w-52">
                     <SelectValue_Shadcn_ placeholder="Select a role" />
@@ -63,7 +63,7 @@ export const JoinOrganizationOnSignup = ({
                     </SelectGroup_Shadcn_>
                   </SelectContent_Shadcn_>
                 </Select_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
index 4d5f9d1400..1518e04858 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
@@ -3,16 +3,7 @@ import { Trash } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Card,
-  CardContent,
-  CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Switch,
-} from 'ui'
+import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -258,11 +249,11 @@ export const SSOConfig = () => {
           />
         ) : isSuccess || isSSOProviderNotFound ? (
           <>
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
                 <Card>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="enabled"
                       render={({ field }) => (
@@ -282,13 +273,13 @@ export const SSOConfig = () => {
                             </>
                           }
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Switch
                               checked={field.value}
                               onCheckedChange={field.onChange}
                               size="large"
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -297,7 +288,7 @@ export const SSOConfig = () => {
                   {isSSOEnabled && (
                     <>
                       <CardContent>
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="enableSpInitiated"
                           render={({ field }) => (
@@ -306,9 +297,9 @@ export const SSOConfig = () => {
                               label="Enable SP-initiated login"
                               description="Allow users to start the login flow from the Supabase dashboard by entering their email address. Requires configuring email domains below."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Switch checked={field.value} onCheckedChange={field.onChange} />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
@@ -406,7 +397,7 @@ export const SSOConfig = () => {
                   </CardFooter>
                 </Card>
               </form>
-            </Form_Shadcn_>
+            </Form>
 
             <TextConfirmModal
               visible={isDeleteModalVisible}
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx b/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx
index ec9bf13b6b..58a22900ec 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSODomains.tsx
@@ -1,13 +1,6 @@
 import { Plus, Trash } from 'lucide-react'
 import { useFieldArray, useForm } from 'react-hook-form'
-import {
-  Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormMessage_Shadcn_,
-  Input_Shadcn_,
-} from 'ui'
+import { Button, FormControl, FormField, FormItem, FormMessage, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { SSOConfigFormSchema } from './SSOConfig'
@@ -45,15 +38,15 @@ export const SSODomains = ({ form }: { form: ReturnType<typeof useForm<SSOConfig
         <div className="grid gap-2 w-full">
           {fields.map((field, idx) => (
             <div key={field.id} className="flex gap-2 items-top">
-              <FormField_Shadcn_
+              <FormField
                 name={`domains.${idx}.value`}
                 render={({ field }) => (
-                  <FormItem_Shadcn_ className="flex-1">
-                    <FormControl_Shadcn_>
+                  <FormItem className="flex-1">
+                    <FormControl>
                       <Input_Shadcn_ {...field} autoComplete="off" placeholder="example.com" />
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
 
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx
index 8b925076ac..a7d5c07885 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSOMetadata.tsx
@@ -3,10 +3,10 @@ import { useEffect, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   Button,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormMessage_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
   Input_Shadcn_,
   Tabs_Shadcn_,
   TabsContent_Shadcn_,
@@ -79,24 +79,24 @@ export const SSOMetadata = ({
             </TabsTrigger_Shadcn_>
           </TabsList_Shadcn_>
           <TabsContent_Shadcn_ value="url">
-            <FormField_Shadcn_
+            <FormField
               name="metadataXmlUrl"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem>
+                  <FormControl>
                     <Input_Shadcn_
                       {...field}
                       placeholder="https://example.com/metadata.xml"
                       autoComplete="off"
                     />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
           </TabsContent_Shadcn_>
           <TabsContent_Shadcn_ value="file">
-            <FormField_Shadcn_
+            <FormField
               name="metadataXmlUrl"
               render={() => (
                 <div className="flex flex-col gap-2 max-w-md">
@@ -117,7 +117,7 @@ export const SSOMetadata = ({
                     </Button>
                     {fileName && <span className="text-xs text-foreground-light">{fileName}</span>}
                   </div>
-                  <FormMessage_Shadcn_ />
+                  <FormMessage />
                 </div>
               )}
             />
diff --git a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
index 9b22282758..bbb0abfc35 100644
--- a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
+++ b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
@@ -9,9 +9,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Switch,
   Tooltip,
   TooltipContent,
@@ -131,11 +131,11 @@ export const SecuritySettings = () => {
             )}
 
             {isSuccessMfa && hasAccessToEnforceMfa && (
-              <Form_Shadcn_ {...form}>
+              <Form {...form}>
                 <form onSubmit={form.handleSubmit(onSubmit)}>
                   <Card>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="enforceMfa"
                         render={({ field }) => (
@@ -144,7 +144,7 @@ export const SecuritySettings = () => {
                             label="Require MFA to access organization"
                             description="Team members must have MFA enabled and a valid MFA session to access the organization and any projects."
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Tooltip>
                                 <TooltipTrigger asChild>
                                   <Switch
@@ -171,7 +171,7 @@ export const SecuritySettings = () => {
                                   </TooltipContent>
                                 )}
                               </Tooltip>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -205,7 +205,7 @@ export const SecuritySettings = () => {
                     </CardFooter>
                   </Card>
                 </form>
-              </Form_Shadcn_>
+              </Form>
             )}
           </>
         )}
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index 842910ae5e..82e622ce9b 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -16,9 +16,9 @@ import {
   DialogTitle,
   DialogTrigger,
   ExpandingTextArea,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -286,19 +286,19 @@ export const InviteMemberButton = () => {
             </>
           }
         />
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id="organization-invitation"
             className="flex flex-col gap-y-4"
             onSubmit={form.handleSubmit(onInviteMember)}
           >
             <DialogSection className="flex flex-col gap-y-4 pb-2">
-              <FormField_Shadcn_
+              <FormField
                 name="role"
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout label="Role">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                         <SelectTrigger_Shadcn_ className="text-sm capitalize">
                           {orgScopedRoles.find((role) => role.id === Number(field.value))?.name ??
@@ -326,12 +326,12 @@ export const InviteMemberButton = () => {
                           </SelectGroup_Shadcn_>
                         </SelectContent_Shadcn_>
                       </Select_Shadcn_>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
               {hasSsoProvider && (
-                <FormField_Shadcn_
+                <FormField
                   name="requireSso"
                   control={form.control}
                   render={({ field }) => (
@@ -339,7 +339,7 @@ export const InviteMemberButton = () => {
                       label="Invitation type"
                       description="Choose how the invitee should authenticate"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                           <SelectTrigger_Shadcn_>
                             <SelectValue_Shadcn_ placeholder="Automatic (based on your account)" />
@@ -358,26 +358,26 @@ export const InviteMemberButton = () => {
                             </SelectGroup_Shadcn_>
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               )}
               {hasAccessToProjectLevelPermissions && (
-                <FormField_Shadcn_
+                <FormField
                   name="applyToOrg"
                   control={form.control}
                   render={({ field }) => (
                     <FormItemLayout layout="flex" label="Grant this role on all projects">
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Switch checked={field.value} onCheckedChange={field.onChange} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               )}
               {!applyToOrg && (
-                <FormField_Shadcn_
+                <FormField
                   name="projectRef"
                   control={form.control}
                   render={({ field }) => (
@@ -385,7 +385,7 @@ export const InviteMemberButton = () => {
                       label="Select a project"
                       description="Project access can be adjusted after the user joins"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <OrganizationProjectSelector
                           fetchOnMount
                           sameWidthAsTrigger
@@ -397,17 +397,17 @@ export const InviteMemberButton = () => {
                           onSelect={(project) => field.onChange(project.ref)}
                           onInitialLoad={(projects) => field.onChange(projects[0]?.ref ?? '')}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               )}
-              <FormField_Shadcn_
+              <FormField
                 name="email"
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout label="Email addresses">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <ExpandingTextArea
                         autoFocus
                         {...field}
@@ -420,7 +420,7 @@ export const InviteMemberButton = () => {
                         data-form-type="other"
                         data-bwignore
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -434,7 +434,7 @@ export const InviteMemberButton = () => {
               </Button>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
       <DiscardChangesConfirmationDialog
         {...discardChangesModalProps}
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
index 96ceeb6e24..890902f720 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
@@ -10,9 +10,9 @@ import {
   Button,
   Checkbox_Shadcn_ as Checkbox,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_ as InputField,
   Label_Shadcn_ as Label,
   Separator,
@@ -264,14 +264,14 @@ export const PlatformWebhooksEndpointSheet = ({
         </SheetHeader>
         <Separator />
         <SheetSection className="overflow-auto flex-grow px-0 py-0">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               id="platform-webhook-endpoint-form"
               className="space-y-5 py-5"
               onSubmit={form.handleSubmit(onSubmit)}
             >
               <div className="px-5 space-y-5">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="name"
                   render={({ field }) => (
@@ -285,29 +285,29 @@ export const PlatformWebhooksEndpointSheet = ({
                       layout="vertical"
                       className="gap-1"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <InputField {...field} placeholder="winged-envelope" maxLength={64} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
 
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="url"
                   render={({ field }) => (
                     <FormItemLayout label="Endpoint URL" layout="vertical" className="gap-1">
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <InputField
                           {...field}
                           placeholder="https://api.example.com/webhooks/supabase"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
 
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="description"
                   render={({ field }) => (
@@ -320,20 +320,20 @@ export const PlatformWebhooksEndpointSheet = ({
                       layout="vertical"
                       className="gap-1"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Textarea
                           {...field}
                           rows={4}
                           placeholder="Optional description for this endpoint"
                           className="resize-none"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
 
                 {mode === 'edit' && (
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="enabled"
                     render={({ field }) => {
@@ -350,13 +350,13 @@ export const PlatformWebhooksEndpointSheet = ({
                                 Disabled endpoints won’t receive deliveries
                               </p>
                             </div>
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch
                                 id={enabledId}
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </Label>
                         </div>
                       )
@@ -368,7 +368,7 @@ export const PlatformWebhooksEndpointSheet = ({
               <Separator />
 
               <div className="px-5 space-y-3">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="eventTypes"
                   render={({ field, fieldState }) => {
@@ -401,7 +401,7 @@ export const PlatformWebhooksEndpointSheet = ({
                         layout="vertical"
                         className="gap-2"
                       >
-                        <FormField_Shadcn_
+                        <FormField
                           control={form.control}
                           name="subscribeAll"
                           render={({ field }) => {
@@ -415,7 +415,7 @@ export const PlatformWebhooksEndpointSheet = ({
                                     field.value ? 'bg-surface-100' : 'bg-surface-200'
                                   )}
                                 >
-                                  <FormControl_Shadcn_>
+                                  <FormControl>
                                     <Checkbox
                                       id={subscribeAllId}
                                       checked={field.value}
@@ -437,7 +437,7 @@ export const PlatformWebhooksEndpointSheet = ({
                                         })
                                       }}
                                     />
-                                  </FormControl_Shadcn_>
+                                  </FormControl>
                                   <span className="text-sm text-foreground">
                                     Subscribe to all events{' '}
                                     <code className="text-code-inline">(*)</code>
@@ -448,7 +448,7 @@ export const PlatformWebhooksEndpointSheet = ({
                           }}
                         />
 
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Accordion
                             type="multiple"
                             value={openEventGroups}
@@ -547,7 +547,7 @@ export const PlatformWebhooksEndpointSheet = ({
                               )
                             })}
                           </Accordion>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )
                   }}
@@ -580,7 +580,7 @@ export const PlatformWebhooksEndpointSheet = ({
                 </FormItemLayout>
               </div>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </SheetSection>
         <SheetFooter>
           <Button type="default" onClick={confirmOnClose}>
diff --git a/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx b/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx
index 1bda90fbe5..cdca80bfdf 100644
--- a/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx
@@ -7,9 +7,9 @@ import {
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
   RadioGroupStacked,
   RadioGroupStackedItem,
   Tooltip,
@@ -39,7 +39,7 @@ export const AdvancedConfiguration = ({
 
   const content = (
     <>
-      <FormField_Shadcn_
+      <FormField
         name="useOrioleDb"
         control={form.control}
         render={({ field }) => (
@@ -49,15 +49,15 @@ export const AdvancedConfiguration = ({
               label="Postgres Type"
               className="[&>div>label]:!break-normal"
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <RadioGroupStacked
                   // Due to radio group not supporting boolean values
                   // value is converted to boolean
                   onValueChange={(value) => field.onChange(value === 'true')}
                   defaultValue={field.value.toString()}
                 >
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                  <FormItem asChild>
+                    <FormControl>
                       <RadioGroupStackedItem
                         value="false"
                         // @ts-ignore
@@ -70,10 +70,10 @@ export const AdvancedConfiguration = ({
                         description="Recommended for production workloads"
                         className="[&>div>div>p]:text-left [&>div>div>p]:text-xs [&>div>div>label]:flex [&>div>div>label]:items-center [&>div>div>label]:gap-x-2"
                       />
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
-                  <FormItem_Shadcn_ asChild>
-                    <FormControl_Shadcn_>
+                    </FormControl>
+                  </FormItem>
+                  <FormItem asChild>
+                    <FormControl>
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <RadioGroupStackedItem
@@ -100,10 +100,10 @@ export const AdvancedConfiguration = ({
                           </TooltipContent>
                         )}
                       </Tooltip>
-                    </FormControl_Shadcn_>
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                  </FormItem>
                 </RadioGroupStacked>
-              </FormControl_Shadcn_>
+              </FormControl>
               {form.getValues('useOrioleDb') && (
                 <Admonition
                   type="warning"
diff --git a/apps/studio/components/interfaces/ProjectCreation/CloudProviderSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/CloudProviderSelector.tsx
index 2e62b8fe7e..613cd531c6 100644
--- a/apps/studio/components/interfaces/ProjectCreation/CloudProviderSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/CloudProviderSelector.tsx
@@ -1,14 +1,14 @@
 import { UseFormReturn } from 'react-hook-form'
 import {
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
-  useWatch_Shadcn_,
+  useWatch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -25,11 +25,11 @@ interface CloudProviderSelectorProps {
 
 export const CloudProviderSelector = ({ form }: CloudProviderSelectorProps) => {
   const { infraCloudProviders: validCloudProviders } = useCustomContent(['infra:cloud_providers'])
-  const highAvailability = useWatch_Shadcn_({ control: form.control, name: 'highAvailability' })
+  const highAvailability = useWatch({ control: form.control, name: 'highAvailability' })
 
   return (
     <Panel.Content>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="cloudProvider"
         render={({ field }) => (
@@ -49,11 +49,11 @@ export const CloudProviderSelector = ({ form }: CloudProviderSelectorProps) => {
               defaultValue={field.value}
               value={field.value}
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <SelectTrigger_Shadcn_>
                   <SelectValue_Shadcn_ placeholder="Select a cloud provider" />
                 </SelectTrigger_Shadcn_>
-              </FormControl_Shadcn_>
+              </FormControl>
               <SelectContent_Shadcn_>
                 <SelectGroup_Shadcn_>
                   {Object.values(PROVIDERS)
diff --git a/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx
index 994291878d..00acbb914e 100644
--- a/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx
@@ -1,7 +1,7 @@
 import { UseFormReturn } from 'react-hook-form'
 import { CloudProvider } from 'shared-data'
 import {
-  FormField_Shadcn_,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -27,7 +27,7 @@ interface ComputeSizeSelectorProps {
 export const ComputeSizeSelector = ({ form }: ComputeSizeSelectorProps) => {
   return (
     <Panel.Content>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="instanceSize"
         render={({ field }) => (
diff --git a/apps/studio/components/interfaces/ProjectCreation/CustomPostgresVersionInput.tsx b/apps/studio/components/interfaces/ProjectCreation/CustomPostgresVersionInput.tsx
index 4bfe98b4f6..ac29150bb0 100644
--- a/apps/studio/components/interfaces/ProjectCreation/CustomPostgresVersionInput.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/CustomPostgresVersionInput.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CreateProjectForm } from './ProjectCreation.schema'
@@ -12,7 +12,7 @@ interface CustomPostgresVersionInputProps {
 export const CustomPostgresVersionInput = ({ form }: CustomPostgresVersionInputProps) => {
   return (
     <Panel.Content>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="postgresVersion"
         render={({ field }) => (
@@ -21,9 +21,9 @@ export const CustomPostgresVersionInput = ({ form }: CustomPostgresVersionInputP
             layout="horizontal"
             description="Specify a custom version of Postgres (defaults to the latest). This is only applicable for local/staging projects."
           >
-            <FormControl_Shadcn_>
+            <FormControl>
               <Input_Shadcn_ placeholder="Postgres version" {...field} autoComplete="off" />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/ProjectCreation/DatabasePasswordInput.tsx b/apps/studio/components/interfaces/ProjectCreation/DatabasePasswordInput.tsx
index 2e116ffea2..c5b974310d 100644
--- a/apps/studio/components/interfaces/ProjectCreation/DatabasePasswordInput.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/DatabasePasswordInput.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { FormControl, FormField } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -45,7 +45,7 @@ export const DatabasePasswordInput = ({ form }: DatabasePasswordInputProps) => {
 
   return (
     <Panel.Content>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="dbPass"
         render={({ field }) => {
@@ -68,7 +68,7 @@ export const DatabasePasswordInput = ({ form }: DatabasePasswordInputProps) => {
                 </>
               }
             >
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input
                   copy={field.value.length > 0}
                   type="password"
@@ -82,7 +82,7 @@ export const DatabasePasswordInput = ({ form }: DatabasePasswordInputProps) => {
                     updatePasswordStrength(form, newValue)
                   }}
                 />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )
         }}
diff --git a/apps/studio/components/interfaces/ProjectCreation/HighAvailabilityInput.tsx b/apps/studio/components/interfaces/ProjectCreation/HighAvailabilityInput.tsx
index 5503ed8d93..404c1c3da6 100644
--- a/apps/studio/components/interfaces/ProjectCreation/HighAvailabilityInput.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/HighAvailabilityInput.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { FormControl, FormField, Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CreateProjectForm } from './ProjectCreation.schema'
@@ -18,7 +18,7 @@ export const HighAvailabilityInput = ({ form }: HighAvailabilityInputProps) => {
 
   return (
     <Panel.Content>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="highAvailability"
         render={({ field }) => (
@@ -36,9 +36,9 @@ export const HighAvailabilityInput = ({ form }: HighAvailabilityInputProps) => {
             }
             layout="horizontal"
           >
-            <FormControl_Shadcn_>
+            <FormControl>
               <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx
index 79f278e3d7..2c3a7ac90a 100644
--- a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx
@@ -6,8 +6,8 @@ import { useEffect } from 'react'
 import { UseFormReturn } from 'react-hook-form'
 import {
   Badge,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -50,7 +50,7 @@ export const OrganizationSelector = ({ form }: OrganizationSelectorProps) => {
 
   return (
     <Panel.Content className="space-y-4">
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="organization"
         render={({ field }) => (
@@ -64,11 +64,11 @@ export const OrganizationSelector = ({ form }: OrganizationSelectorProps) => {
                 value={field.value}
                 defaultValue={field.value}
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <SelectTrigger_Shadcn_>
                     <SelectValue_Shadcn_ placeholder="Select an organization" />
                   </SelectTrigger_Shadcn_>
-                </FormControl_Shadcn_>
+                </FormControl>
                 <SelectContent_Shadcn_>
                   <SelectGroup_Shadcn_>
                     {organizations?.map((x) => (
diff --git a/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx b/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx
index e5e5387fdb..00ffe8a6d9 100644
--- a/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx
@@ -1,5 +1,5 @@
 import { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CreateProjectForm } from './ProjectCreation.schema'
@@ -12,14 +12,14 @@ interface ProjectNameInputProps {
 export const ProjectNameInput = ({ form }: ProjectNameInputProps) => {
   return (
     <Panel.Content>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="projectName"
         render={({ field }) => (
           <FormItemLayout label="Project name" layout="horizontal">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Input_Shadcn_ {...field} placeholder="Project name" />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
index cb6aa8227e..379a8913f5 100644
--- a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
@@ -4,7 +4,7 @@ import type { CloudProvider } from 'shared-data'
 import {
   Badge,
   cn,
-  FormField_Shadcn_,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -124,7 +124,7 @@ export const RegionSelector = ({
 
   return (
     <Panel.Content>
-      <FormField_Shadcn_
+      <FormField
         control={form.control}
         name="dbRegion"
         render={({ field }) => {
diff --git a/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx b/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx
index 45fdf3b12b..d9c628c6f1 100644
--- a/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx
@@ -3,15 +3,15 @@ import { UseFormReturn } from 'react-hook-form'
 import {
   Checkbox_Shadcn_,
   cn,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  useWatch_Shadcn_,
+  useWatch,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -26,7 +26,7 @@ interface SecurityOptionsProps {
 }
 
 export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptionsProps) => {
-  const dataApi = useWatch_Shadcn_({ control: form.control, name: 'dataApi' })
+  const dataApi = useWatch({ control: form.control, name: 'dataApi' })
 
   useTrackDefaultPrivilegesExposure({ surface: 'main', dataApiEnabled: dataApi ?? true })
 
@@ -34,23 +34,21 @@ export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptions
     <Panel.Content className="pb-8">
       <FormItemLayout layout={layout} label="Security" isReactForm={false}>
         <div className="flex flex-col gap-4">
-          <FormField_Shadcn_
+          <FormField
             name="dataApi"
             control={form.control}
             render={({ field }) => (
-              <FormItem_Shadcn_ className="flex items-start gap-3">
-                <FormControl_Shadcn_>
+              <FormItem className="flex items-start gap-3">
+                <FormControl>
                   <Checkbox_Shadcn_
                     checked={field.value}
                     disabled={field.disabled}
                     onCheckedChange={(value) => field.onChange(value === true)}
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
                 <div className="space-y-1">
-                  <FormLabel_Shadcn_ className="text-sm text-foreground">
-                    Enable Data API
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  <FormLabel className="text-sm text-foreground">Enable Data API</FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     Autogenerate a RESTful API for your public schema. Recommended if using a client
                     library like{' '}
                     <Link
@@ -61,23 +59,23 @@ export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptions
                       supabase-js
                     </Link>
                     .
-                  </FormDescription_Shadcn_>
+                  </FormDescription>
                 </div>
-              </FormItem_Shadcn_>
+              </FormItem>
             )}
           />
 
-          <FormField_Shadcn_
+          <FormField
             name="dataApiDefaultPrivileges"
             control={form.control}
             render={({ field }) => (
-              <FormItem_Shadcn_
+              <FormItem
                 className={cn(
                   'flex items-start gap-3',
                   !dataApi && 'opacity-50 cursor-not-allowed'
                 )}
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   {dataApi ? (
                     <Checkbox_Shadcn_
                       checked={field.value}
@@ -96,48 +94,46 @@ export const SecurityOptions = ({ form, layout = 'horizontal' }: SecurityOptions
                       </TooltipContent>
                     </Tooltip>
                   )}
-                </FormControl_Shadcn_>
+                </FormControl>
                 <div className="space-y-1">
-                  <FormLabel_Shadcn_
+                  <FormLabel
                     className={cn('text-sm text-foreground', !dataApi && 'text-foreground-muted')}
                   >
                     Automatically expose new tables and functions
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  </FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     Grants privileges to Data API roles by default, exposing new tables and
                     functions.
                     <br />
                     <strong className="font-medium text-foreground-light">
                       We recommend disabling this to control access manually.
                     </strong>
-                  </FormDescription_Shadcn_>
+                  </FormDescription>
                 </div>
-              </FormItem_Shadcn_>
+              </FormItem>
             )}
           />
 
-          <FormField_Shadcn_
+          <FormField
             name="enableRlsEventTrigger"
             control={form.control}
             render={({ field }) => (
-              <FormItem_Shadcn_ className="flex items-start gap-3">
-                <FormControl_Shadcn_>
+              <FormItem className="flex items-start gap-3">
+                <FormControl>
                   <Checkbox_Shadcn_
                     checked={field.value}
                     disabled={field.disabled}
                     onCheckedChange={(value) => field.onChange(value === true)}
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
                 <div className="space-y-1">
-                  <FormLabel_Shadcn_ className="text-sm text-foreground">
-                    Enable automatic RLS
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  <FormLabel className="text-sm text-foreground">Enable automatic RLS</FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     Create an event trigger that automatically enables Row Level Security on all new
                     tables in the public schema.
-                  </FormDescription_Shadcn_>
+                  </FormDescription>
                 </div>
-              </FormItem_Shadcn_>
+              </FormItem>
             )}
           />
 
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx b/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx
index c551e88fe8..fbe832cd2e 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx
@@ -5,12 +5,12 @@ import { Dispatch, SetStateAction, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
   Input_Shadcn_,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
@@ -96,28 +96,28 @@ export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPo
         <div className="p-4 flex flex-col text-sm">
           {config.channelName.length === 0 ? (
             <>
-              <Form_Shadcn_ {...form}>
+              <Form {...form}>
                 <form
                   id="realtime-channel"
                   onSubmit={form.handleSubmit(() => onSubmit())}
                   className="flex flex-col gap-y-4"
                 >
-                  <FormField_Shadcn_
+                  <FormField
                     name="channel"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItem_Shadcn_ className="flex flex-col gap-y-2">
+                      <FormItem className="flex flex-col gap-y-2">
                         <div className="flex flex-col gap-y-1">
                           <label className="text-foreground text-xs">Name of channel</label>
                           <div className="flex flex-row">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_
                                 {...field}
                                 autoComplete="off"
                                 className="rounded-r-none text-xs px-2.5 py-1 h-auto"
                                 placeholder="Enter a channel name"
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
 
                             <Button
                               type="primary"
@@ -129,7 +129,7 @@ export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPo
                             </Button>
                           </div>
                         </div>
-                        <FormDescription_Shadcn_ className="text-xs text-foreground-lighter">
+                        <FormDescription className="text-xs text-foreground-lighter">
                           The channel you initialize with the Supabase Realtime client. Learn more
                           in{' '}
                           <a
@@ -140,34 +140,32 @@ export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPo
                           >
                             our docs
                           </a>
-                        </FormDescription_Shadcn_>
-                      </FormItem_Shadcn_>
+                        </FormDescription>
+                      </FormItem>
                     )}
                   />
 
-                  <FormField_Shadcn_
+                  <FormField
                     key="isPrivate"
                     control={form.control}
                     name="isPrivate"
                     render={({ field }) => (
-                      <FormItem_Shadcn_ className="">
+                      <FormItem className="">
                         <div className="flex flex-row items-center gap-x-2">
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Switch
                               checked={field.value}
                               onCheckedChange={field.onChange}
                               disabled={field.disabled}
                             />
-                          </FormControl_Shadcn_>
-                          <FormLabel_Shadcn_ className="text-xs">
-                            Is channel private?
-                          </FormLabel_Shadcn_>
+                          </FormControl>
+                          <FormLabel className="text-xs">Is channel private?</FormLabel>
                         </div>
-                        <FormDescription_Shadcn_ className="text-xs text-foreground-lighter mt-2">
+                        <FormDescription className="text-xs text-foreground-lighter mt-2">
                           If the channel is marked as private, it will use RLS policies to filter
                           messages.
-                        </FormDescription_Shadcn_>
-                      </FormItem_Shadcn_>
+                        </FormDescription>
+                      </FormItem>
                     )}
                   />
 
@@ -177,7 +175,7 @@ export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPo
                     href={`${DOCS_URL}/guides/realtime/authorization`}
                   />
                 </form>
-              </Form_Shadcn_>
+              </Form>
             </>
           ) : (
             <div className="space-y-2">
diff --git a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
index fbc8c875aa..44ade12b39 100644
--- a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
+++ b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
@@ -10,11 +10,11 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
-  FormMessage_Shadcn_,
+  FormMessage,
   InputGroup,
   InputGroupAddon,
   InputGroupText,
@@ -151,14 +151,14 @@ export const RealtimeSettings = () => {
 
   return (
     <>
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
           {isError ? (
             <AlertError error={error} subject="Failed to retrieve realtime settings" />
           ) : (
             <Card>
               <CardContent className="space-y-4">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="suspend"
                   render={({ field }) => (
@@ -168,15 +168,15 @@ export const RealtimeSettings = () => {
                         label="Enable Realtime service"
                         description="If disabled, no clients will be able to connect and new connections will be rejected"
                       >
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Switch
                             checked={!field.value}
                             onCheckedChange={(checked) => field.onChange(!checked)}
                             disabled={!canUpdateConfig}
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
-                      <FormMessage_Shadcn_ />
+                      <FormMessage />
                     </>
                   )}
                 />
@@ -214,7 +214,7 @@ export const RealtimeSettings = () => {
               {!suspend && (
                 <>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="allow_public"
                       render={({ field }) => (
@@ -224,13 +224,13 @@ export const RealtimeSettings = () => {
                             label="Allow public access to channels"
                             description="If disabled, only private channels will be allowed"
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                                 disabled={!canUpdateConfig}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
 
                           {isSuccessPolicies &&
@@ -266,7 +266,7 @@ export const RealtimeSettings = () => {
                     />
                   </CardContent>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="connection_pool"
                       render={({ field }) => (
@@ -276,7 +276,7 @@ export const RealtimeSettings = () => {
                             label="Database connection pool size"
                             description="Realtime Authorization uses this database pool to check client access"
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   {...field}
@@ -288,7 +288,7 @@ export const RealtimeSettings = () => {
                                   <InputGroupText>connections</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                           {!!maxConn && field.value > maxConn.maxConnections * 0.5 && (
                             <Admonition
@@ -303,7 +303,7 @@ export const RealtimeSettings = () => {
                     />
                   </CardContent>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="max_concurrent_users"
                       render={({ field }) => (
@@ -312,7 +312,7 @@ export const RealtimeSettings = () => {
                           label="Max concurrent clients"
                           description="Sets maximum number of concurrent clients that can connect to your Realtime service"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 {...field}
@@ -324,13 +324,13 @@ export const RealtimeSettings = () => {
                                 <InputGroupText>clients</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
                   </CardContent>
                   <CardContent className="space-y-2">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="max_events_per_second"
                       render={({ field }) => (
@@ -339,7 +339,7 @@ export const RealtimeSettings = () => {
                           label="Max events per second"
                           description="Sets maximum number of events per second that can be sent to your Realtime service"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 {...field}
@@ -351,7 +351,7 @@ export const RealtimeSettings = () => {
                                 <InputGroupText>events/s</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -384,7 +384,7 @@ export const RealtimeSettings = () => {
                     )}
                   </CardContent>
                   <CardContent className="space-y-2">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="max_presence_events_per_second"
                       render={({ field }) => (
@@ -393,7 +393,7 @@ export const RealtimeSettings = () => {
                           label="Max presence events per second"
                           description="Sets maximum number of presence events per second that can be sent to your Realtime service"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 {...field}
@@ -405,7 +405,7 @@ export const RealtimeSettings = () => {
                                 <InputGroupText>events/s</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -438,7 +438,7 @@ export const RealtimeSettings = () => {
                     )}
                   </CardContent>
                   <CardContent className="space-y-2">
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="max_payload_size_in_kb"
                       render={({ field }) => (
@@ -447,7 +447,7 @@ export const RealtimeSettings = () => {
                           label="Max payload size in KB"
                           description="Sets maximum number of payload size in KB that can be sent to your Realtime service"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 {...field}
@@ -459,7 +459,7 @@ export const RealtimeSettings = () => {
                                 <InputGroupText>KB</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -522,7 +522,7 @@ export const RealtimeSettings = () => {
             </Card>
           )}
         </form>
-      </Form_Shadcn_>
+      </Form>
 
       <ConfirmationModal
         visible={isConfirmNextModalOpen}
diff --git a/apps/studio/components/interfaces/Reports/CreateReportModal.tsx b/apps/studio/components/interfaces/Reports/CreateReportModal.tsx
index 747297a388..000f9ee459 100644
--- a/apps/studio/components/interfaces/Reports/CreateReportModal.tsx
+++ b/apps/studio/components/interfaces/Reports/CreateReportModal.tsx
@@ -3,15 +3,7 @@ import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-  Modal,
-  Textarea,
-} from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_, Modal, Textarea } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
@@ -114,28 +106,28 @@ export const CreateReportModal = ({ visible, onCancel, afterSubmit }: CreateRepo
       header="Create a custom report"
       size="small"
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(createCustomReport)} noValidate>
           <Modal.Content>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
                 <FormItemLayout name="name" layout="vertical" label="Name">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_ {...field} id="name" />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
           </Modal.Content>
           <Modal.Content>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="description"
               render={({ field }) => (
                 <FormItemLayout name="description" layout="vertical" label="Description">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Textarea
                       {...field}
                       id="description"
@@ -143,7 +135,7 @@ export const CreateReportModal = ({ visible, onCancel, afterSubmit }: CreateRepo
                       placeholder="Describe your custom report"
                       className="resize-none"
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -158,7 +150,7 @@ export const CreateReportModal = ({ visible, onCancel, afterSubmit }: CreateRepo
             </Button>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/Reports/UpdateModal.tsx b/apps/studio/components/interfaces/Reports/UpdateModal.tsx
index fdf8e6e2ef..6cc1e4f9f7 100644
--- a/apps/studio/components/interfaces/Reports/UpdateModal.tsx
+++ b/apps/studio/components/interfaces/Reports/UpdateModal.tsx
@@ -3,15 +3,7 @@ import { useParams } from 'common'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-  Modal,
-  Textarea,
-} from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_, Modal, Textarea } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
@@ -91,28 +83,28 @@ export const UpdateCustomReportModal = ({
       header="Update custom report"
       size="small"
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onConfirmUpdateReport)} noValidate>
           <Modal.Content>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
                 <FormItemLayout name="name" layout="vertical" label="Name">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_ {...field} id="name" />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
           </Modal.Content>
           <Modal.Content>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="description"
               render={({ field }) => (
                 <FormItemLayout name="description" layout="vertical" label="Description">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Textarea
                       {...field}
                       id="description"
@@ -120,7 +112,7 @@ export const UpdateCustomReportModal = ({
                       placeholder="Describe your custom report"
                       className="resize-none"
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -135,7 +127,7 @@ export const UpdateCustomReportModal = ({
             </Button>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
index 285bac14cf..b9f2bfe7f9 100644
--- a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
@@ -22,12 +22,12 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   Label_Shadcn_,
   Popover_Shadcn_,
@@ -213,7 +213,7 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
   return (
     <Dialog open={visible} onOpenChange={() => onClose()}>
       <DialogContent>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id="move-snippet" onSubmit={form.handleSubmit(onConfirmMove)}>
             <DialogHeader>
               <DialogTitle>
@@ -334,22 +334,22 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
 
               {selectedId === 'new-folder' && (
                 <div className="flex flex-col gap-y-2">
-                  <FormField_Shadcn_
+                  <FormField
                     name="name"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItem_Shadcn_ className="flex flex-col gap-y-2">
-                        <FormLabel_Shadcn_>Provide a name for your new folder</FormLabel_Shadcn_>
-                        <FormControl_Shadcn_>
+                      <FormItem className="flex flex-col gap-y-2">
+                        <FormLabel>Provide a name for your new folder</FormLabel>
+                        <FormControl>
                           <Input_Shadcn_
                             autoFocus
                             {...field}
                             autoComplete="off"
                             disabled={isMovingSnippet || isCreatingFolder}
                           />
-                        </FormControl_Shadcn_>
-                        <FormMessage_Shadcn_ />
-                      </FormItem_Shadcn_>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
                     )}
                   />
                 </div>
@@ -374,7 +374,7 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
               </Button>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
index a2c181ebe2..1a810a7826 100644
--- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
@@ -7,9 +7,9 @@ import { toast } from 'sonner'
 import {
   AiIconAnimation,
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Modal,
   Textarea,
@@ -173,17 +173,17 @@ const RenameQueryModal = ({
 
   return (
     <Modal visible={visible} onCancel={handleCancel} hideFooter header="Rename" size="small">
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} noValidate>
           <Modal.Content className="space-y-4">
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
                 <FormItemLayout name="name" layout="vertical" label="Name">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_ {...field} id="name" />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -214,12 +214,12 @@ const RenameQueryModal = ({
             </div>
           </Modal.Content>
           <Modal.Content>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="description"
               render={({ field }) => (
                 <FormItemLayout name="description" layout="vertical" label="Description">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Textarea
                       {...field}
                       id="description"
@@ -227,7 +227,7 @@ const RenameQueryModal = ({
                       placeholder="Describe query"
                       className="resize-none"
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -242,7 +242,7 @@ const RenameQueryModal = ({
             </Button>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx b/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
index cdb8e2ab8b..79c0752f08 100644
--- a/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
+++ b/apps/studio/components/interfaces/Settings/API/DataApiEnableSwitchForm.tsx
@@ -1,13 +1,5 @@
 import type { UseFormReturn } from 'react-hook-form'
-import {
-  CardContent,
-  CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  Switch,
-} from 'ui'
+import { CardContent, CardFooter, Form, FormControl, FormField, FormItem, Switch } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { DataApiDisabledAlert } from './DataApiDisabledAlert'
@@ -34,31 +26,31 @@ export const DataApiEnableSwitchForm = ({
   const watchedEnabled = form.watch('enableDataApi')
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
         <CardContent>
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="enableDataApi"
             render={({ field }) => (
-              <FormItem_Shadcn_ className="space-y-4">
+              <FormItem className="space-y-4">
                 <FormItemLayout
                   layout="flex-row-reverse"
                   label="Enable Data API"
                   description="When enabled you will be able to use any Supabase client library and PostgREST endpoints with any schema configured in the Settings tab."
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Switch
                       size="large"
                       disabled={disabled}
                       checked={field.value}
                       onCheckedChange={field.onChange}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
 
                 {!watchedEnabled && <DataApiDisabledAlert />}
-              </FormItem_Shadcn_>
+              </FormItem>
             )}
           />
         </CardContent>
@@ -73,6 +65,6 @@ export const DataApiEnableSwitchForm = ({
           />
         </CardFooter>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index c64915ea53..9042d860f1 100644
--- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -11,17 +11,17 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
-  FormItem_Shadcn_,
+  FormItem,
   InputGroup,
   InputGroupAddon,
   InputGroupText,
   Skeleton,
   Switch,
-  useWatch_Shadcn_,
+  useWatch,
 } from 'ui'
 import { GenericSkeletonLoader, PageSection, PageSectionContent } from 'ui-patterns'
 import { Admonition } from 'ui-patterns/admonition'
@@ -245,17 +245,17 @@ export const PostgrestConfig = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReady])
 
-  const watchedDbSchema = useWatch_Shadcn_({ control: form.control, name: 'dbSchema' })
-  const watchedTableIdsToAdd = useWatch_Shadcn_({ control: form.control, name: 'tableIdsToAdd' })
-  const watchedTableIdsToRemove = useWatch_Shadcn_({
+  const watchedDbSchema = useWatch({ control: form.control, name: 'dbSchema' })
+  const watchedTableIdsToAdd = useWatch({ control: form.control, name: 'tableIdsToAdd' })
+  const watchedTableIdsToRemove = useWatch({
     control: form.control,
     name: 'tableIdsToRemove',
   })
-  const watchedFunctionNamesToAdd = useWatch_Shadcn_({
+  const watchedFunctionNamesToAdd = useWatch({
     control: form.control,
     name: 'functionNamesToAdd',
   })
-  const watchedFunctionNamesToRemove = useWatch_Shadcn_({
+  const watchedFunctionNamesToRemove = useWatch({
     control: form.control,
     name: 'functionNamesToRemove',
   })
@@ -264,7 +264,7 @@ export const PostgrestConfig = () => {
     <PageSection id="postgrest-config" className="first:pt-0">
       <PageSectionContent>
         <Card className="mb-4">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
               {isLoading ? (
                 <CardContent>
@@ -386,17 +386,17 @@ export const PostgrestConfig = () => {
                     </FormItemLayout>
 
                     {watchedDbSchema.includes('public') && (
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name="defaultPrivilegesGranted"
                         render={({ field }) => (
-                          <FormItem_Shadcn_>
+                          <FormItem>
                             <FormItemLayout
                               layout="flex-row-reverse"
                               label="Automatically expose new tables and functions"
                               description="Grants privileges to Data API roles by default, exposing new tables and functions. We recommend disabling this to control access manually."
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <div>
                                   <Switch
                                     size="large"
@@ -405,9 +405,9 @@ export const PostgrestConfig = () => {
                                     onCheckedChange={field.onChange}
                                   />
                                 </div>
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
-                          </FormItem_Shadcn_>
+                          </FormItem>
                         )}
                       />
                     )}
@@ -421,11 +421,11 @@ export const PostgrestConfig = () => {
                     )}
                   </CardContent>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="dbExtraSearchPath"
                       render={({ field }) => (
-                        <FormItem_Shadcn_>
+                        <FormItem>
                           <FormItemLayout
                             layout="flex-row-reverse"
                             label="Extra search path"
@@ -467,22 +467,22 @@ export const PostgrestConfig = () => {
                               </MultiSelector>
                             )}
                           </FormItemLayout>
-                        </FormItem_Shadcn_>
+                        </FormItem>
                       )}
                     />
                   </CardContent>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="maxRows"
                       render={({ field }) => (
-                        <FormItem_Shadcn_>
+                        <FormItem>
                           <FormItemLayout
                             layout="flex-row-reverse"
                             label="Max rows"
                             description="The maximum number of rows returned from a view, table, or function. Limits payload size for accidental or malicious requests."
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   size="small"
@@ -495,24 +495,24 @@ export const PostgrestConfig = () => {
                                   <InputGroupText>rows</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
-                        </FormItem_Shadcn_>
+                        </FormItem>
                       )}
                     />
                   </CardContent>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="dbPool"
                       render={({ field }) => (
-                        <FormItem_Shadcn_>
+                        <FormItem>
                           <FormItemLayout
                             layout="flex-row-reverse"
                             label="Pool size"
                             description="Number of maximum connections to keep open in the Data API server's database pool. Unset to let it be configured automatically based on compute size."
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <InputGroup>
                                 <FormInputGroupInput
                                   size="small"
@@ -531,16 +531,16 @@ export const PostgrestConfig = () => {
                                   <InputGroupText>connections</InputGroupText>
                                 </InputGroupAddon>
                               </InputGroup>
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
-                        </FormItem_Shadcn_>
+                        </FormItem>
                       )}
                     />
                   </CardContent>
                 </>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
           {IS_PLATFORM && (
             <CardFooter className="border-t">
               <FormActions
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
index 5a9880f9e7..fd959c83b4 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
@@ -12,9 +12,9 @@ import {
   AlertTitle_Shadcn_,
   Badge,
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InputGroup,
   InputGroupAddon,
@@ -242,13 +242,13 @@ export const ConnectionPooling = () => {
                   </div>
                 </div>
                 <Separator className="bg-border -mx-6 w-[calc(100%+3rem)] my-4" />
-                <Form_Shadcn_ {...form}>
+                <Form {...form}>
                   <form
                     id={formId}
                     className="flex flex-col gap-y-4 w-full"
                     onSubmit={form.handleSubmit(onSubmit)}
                   >
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="default_pool_size"
                       render={({ field }) => (
@@ -264,7 +264,7 @@ export const ConnectionPooling = () => {
                           }
                           className="[&>div]:md:w-1/2 [&>div]:xl:w-2/5 [&>div>div]:w-full [&>div>div>div]:min-w-100"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 {...field}
@@ -284,7 +284,7 @@ export const ConnectionPooling = () => {
                                 <InputGroupText>connections</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                           {!!maxConnData &&
                             (default_pool_size ?? 15) > maxConnData.maxConnections * 0.8 && (
                               <Alert_Shadcn_ variant="warning" className="mt-2">
@@ -304,7 +304,7 @@ export const ConnectionPooling = () => {
 
                     <Separator className="bg-border -mx-6 w-[calc(100%+3rem)]" />
 
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       disabled
                       name="max_client_conn"
@@ -328,7 +328,7 @@ export const ConnectionPooling = () => {
                             </>
                           }
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 {...field}
@@ -348,12 +348,12 @@ export const ConnectionPooling = () => {
                                 <InputGroupText>clients</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
                   </form>
-                </Form_Shadcn_>
+                </Form>
               </>
             )}
           </Panel.Content>
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
index c259d7219c..e4537ff830 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
@@ -12,9 +12,9 @@ import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   InfoIcon,
   InputGroup,
@@ -183,9 +183,9 @@ const DiskSizeConfigurationModal = ({
                     </Button>
                   </AlertDescription_Shadcn_>
                 </Alert_Shadcn_>
-                <Form_Shadcn_ {...form}>
+                <Form {...form}>
                   <form id={formId} onSubmit={form.handleSubmit(handleSubmit)} noValidate>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="new-disk-size"
                       disabled={!isAbleToResizeDatabase}
@@ -195,7 +195,7 @@ const DiskSizeConfigurationModal = ({
                           layout="vertical"
                           label="New disk size"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <InputGroup>
                               <FormInputGroupInput
                                 {...field}
@@ -207,12 +207,12 @@ const DiskSizeConfigurationModal = ({
                                 <InputGroupText>GB</InputGroupText>
                               </InputGroupAddon>
                             </InputGroup>
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
                   </form>
-                </Form_Shadcn_>
+                </Form>
               </Modal.Content>
               <Modal.Separator />
               <Modal.Content className="flex space-x-2 justify-end">
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
index 37ce502ede..6efa1f0b9d 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
@@ -6,9 +6,9 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   ScrollArea,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -232,15 +232,15 @@ export function JitDbAccessRuleSheet({
             </SheetDescription>
           </SheetHeader>
 
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <ScrollArea className="flex-1 max-h-[calc(100vh-116px)]">
               <div className="space-y-8 px-5 py-6 sm:px-6">
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="memberId"
                   render={({ field }) => (
                     <FormItemLayout layout="vertical" label="Member">
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_
                           value={field.value}
                           disabled={
@@ -268,7 +268,7 @@ export function JitDbAccessRuleSheet({
                             ))}
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
 
                       {mode === 'add' && availableMembersForAddCount === 0 && (
                         <p className="mt-2 text-foreground-lighter">
@@ -280,7 +280,7 @@ export function JitDbAccessRuleSheet({
                   )}
                 />
 
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="grants"
                   render={() => (
@@ -324,7 +324,7 @@ export function JitDbAccessRuleSheet({
                 />
               </div>
             </ScrollArea>
-          </Form_Shadcn_>
+          </Form>
 
           <SheetFooter className="mt-auto w-full border-t py-4">
             <Button type="default" onClick={confirmOnClose} disabled={isSubmitting}>
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
index 23fdcc9269..41edadaff0 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
@@ -6,9 +6,9 @@ import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Modal,
   Tooltip,
@@ -147,7 +147,7 @@ const AddRestrictionModal = ({
       onCancel={onClose}
       header={`Add a new ${type} restriction`}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <Modal.Content className="space-y-4">
           <p className="text-sm text-foreground-light">
             This will add an IP address range to a list of allowed ranges that can access your
@@ -166,20 +166,20 @@ const AddRestrictionModal = ({
             className="flex space-x-4"
           >
             <div className="w-[55%]">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="ipAddress"
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label={`${type} address`}>
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ {...field} placeholder={type === 'IPv4' ? '0.0.0.0' : '::0'} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </div>
             <div className="flex-grow">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="cidrBlockSize"
                 render={({ field }) => (
@@ -203,7 +203,7 @@ const AddRestrictionModal = ({
                       </div>
                     }
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         type="number"
@@ -216,7 +216,7 @@ const AddRestrictionModal = ({
                             : IPV6_MAX_CIDR_BLOCK_SIZE.toString()
                         }
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -257,7 +257,7 @@ const AddRestrictionModal = ({
             Save restriction
           </Button>
         </Modal.Content>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
index a20f1fcb43..53f9638c7c 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
@@ -9,9 +9,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -76,7 +76,7 @@ export const CustomDomainsConfigureHostname = () => {
   const isSubmitting = isCheckingRecord || isCreating
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onCreateCustomDomain)}>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 gap-4">
@@ -85,7 +85,7 @@ export const CustomDomainsConfigureHostname = () => {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="domain"
                 render={({ field }) => (
@@ -95,14 +95,14 @@ export const CustomDomainsConfigureHostname = () => {
                     description="Enter the subdomain you want to use."
                     className="[&>div]:md:w-1/2"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         placeholder="subdomain.example.com"
                         disabled={!canConfigureCustomDomain || isSubmitting}
                         autoComplete="off"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -170,6 +170,6 @@ export const CustomDomainsConfigureHostname = () => {
           </p>
         )}
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx b/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
index 854e8b864d..cce9e5b592 100644
--- a/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
+++ b/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
@@ -17,9 +17,9 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -106,11 +106,11 @@ export const DashboardPreferences = () => {
             </CardContent>
           </Card>
         ) : (
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <Card>
                 <CardContent>
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="defaultDatabase"
                     render={({ field }) => (
@@ -129,7 +129,7 @@ export const DashboardPreferences = () => {
                         {isPending ? (
                           <ShimmeringLoader />
                         ) : (
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             {/* [Joshen] Need to disable unhealthy replicas */}
                             <DatabaseSelector
                               isForm
@@ -139,7 +139,7 @@ export const DashboardPreferences = () => {
                                 field.onChange(id === projectRef ? undefined : id)
                               }
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         )}
                       </FormItemLayout>
                     )}
@@ -161,7 +161,7 @@ export const DashboardPreferences = () => {
                 </CardFooter>
               </Card>
             </form>
-          </Form_Shadcn_>
+          </Form>
         )}
       </PageSectionContent>
     </PageSection>
diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx
index 2986890425..0b1ac77f81 100644
--- a/apps/studio/components/interfaces/Settings/General/General.tsx
+++ b/apps/studio/components/interfaces/Settings/General/General.tsx
@@ -11,9 +11,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   WarningIcon,
 } from 'ui'
@@ -109,11 +109,11 @@ export const General = () => {
               </CardContent>
             </Card>
           ) : (
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <form onSubmit={form.handleSubmit(onSubmit)}>
                 <Card>
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={form.control}
                       name="name"
                       render={({ field }) => (
@@ -123,13 +123,13 @@ export const General = () => {
                           description="Displayed throughout the dashboard."
                           className="[&>div]:md:w-1/2"
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input_Shadcn_
                               {...field}
                               disabled={isBranch || !canUpdateProject}
                               autoComplete="off"
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -141,9 +141,9 @@ export const General = () => {
                       description="Reference used in APIs and URLs."
                       className="[&>div]:md:w-1/2 [&>div>div]:md:w-full"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input copy readOnly size="small" value={project?.ref ?? ''} />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   </CardContent>
                   <CardFooter className="justify-end space-x-2">
@@ -170,7 +170,7 @@ export const General = () => {
                   </CardFooter>
                 </Card>
               </form>
-            </Form_Shadcn_>
+            </Form>
           )}
         </PageSectionContent>
       </PageSection>
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx
index 3156f7e1ca..1ddd3d0bab 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert.tsx
@@ -12,9 +12,9 @@ import {
   AlertTitle_Shadcn_,
   Badge,
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Modal,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -149,7 +149,7 @@ export const ProjectUpgradeAlert = () => {
         onCancel={() => setShowUpgradeModal(false)}
         header="Confirm to upgrade Postgres version"
       >
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onConfirmUpgrade)}>
             <Admonition
               type="warning"
@@ -238,12 +238,12 @@ export const ProjectUpgradeAlert = () => {
                     </AlertDescription_Shadcn_>
                   </Alert_Shadcn_>
                 )}
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="postgresVersionSelection"
                   render={({ field }) => (
                     <FormItemLayout label="Select the version of Postgres to upgrade to">
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                           <SelectTrigger_Shadcn_>
                             <SelectValue_Shadcn_ placeholder="Select a Postgres version" />
@@ -270,7 +270,7 @@ export const ProjectUpgradeAlert = () => {
                             </SelectGroup_Shadcn_>
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -290,7 +290,7 @@ export const ProjectUpgradeAlert = () => {
               </Button>
             </Modal.Content>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </Modal>
     </>
   )
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
index 52b532047f..1052660472 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
@@ -5,9 +5,9 @@ import { toast } from 'sonner'
 import {
   Badge,
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Sheet,
   SheetContent,
@@ -112,7 +112,7 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
             <InlineLink href={`${DOCS_URL}/guides/platform/privatelink`}>Learn more</InlineLink>
           </SheetDescription>
         </SheetHeader>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1">
             <SheetSection className="space-y-4 flex-1">
               {!isNew && account && (
@@ -172,7 +172,7 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
                   />
                 </>
               )}
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="awsAccountId"
                 render={({ field }) => (
@@ -180,7 +180,7 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
                     label="AWS Account ID"
                     description="The ID of the AWS account you want to connect to."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         readOnly={!isNew}
@@ -191,11 +191,11 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
                           }
                         }}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="accountName"
                 render={({ field }) => (
@@ -203,7 +203,7 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
                     label="Account Name"
                     description="A name for this account connection."
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         readOnly={!isNew}
@@ -213,7 +213,7 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
                           }
                         }}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -230,7 +230,7 @@ export const AWSPrivateLinkForm = ({ account, open, onOpenChange }: AWSPrivateLi
               )}
             </SheetFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </SheetContent>
     </Sheet>
   )
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
index db61f55cd5..c5103e876f 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
@@ -18,9 +18,9 @@ import {
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
   CommandSeparator_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
@@ -446,7 +446,7 @@ export const GitHubIntegrationConnectionForm = ({
 
   return (
     <>
-      <Form_Shadcn_ {...githubSettingsForm}>
+      <Form {...githubSettingsForm}>
         <form
           onSubmit={githubSettingsForm.handleSubmit(handleCreateOrUpdateConnection)}
           className={cn(!isParentProject && 'opacity-25 pointer-events-none')}
@@ -454,7 +454,7 @@ export const GitHubIntegrationConnectionForm = ({
           <Card>
             <CardContent className="space-y-6">
               {/* Repository Selection */}
-              <FormField_Shadcn_
+              <FormField
                 control={githubSettingsForm.control}
                 name="repositoryId"
                 render={({ field }) => (
@@ -469,7 +469,7 @@ export const GitHubIntegrationConnectionForm = ({
                   >
                     <Popover_Shadcn_ open={repoComboBoxOpen} onOpenChange={setRepoComboboxOpen}>
                       <PopoverTrigger_Shadcn_ asChild>
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Button
                             type="default"
                             className="justify-start h-[34px] w-full"
@@ -490,7 +490,7 @@ export const GitHubIntegrationConnectionForm = ({
                               ? selectedRepository?.name || connection?.repository.name
                               : 'Choose GitHub repository'}
                           </Button>
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </PopoverTrigger_Shadcn_>
                       <PopoverContent_Shadcn_ className="p-0 w-80" side="bottom" align="start">
                         <Command_Shadcn_>
@@ -575,7 +575,7 @@ export const GitHubIntegrationConnectionForm = ({
                   exit={{ opacity: 0, y: -16 }}
                 >
                   <CardContent>
-                    <FormField_Shadcn_
+                    <FormField
                       control={githubSettingsForm.control}
                       name="supabaseDirectory"
                       render={({ field }) => (
@@ -595,14 +595,14 @@ export const GitHubIntegrationConnectionForm = ({
                             </>
                           }
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <Input_Shadcn_
                               {...field}
                               placeholder="."
                               autoComplete="off"
                               disabled={!canUpdateGitHubConnection}
                             />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       )}
                     />
@@ -610,7 +610,7 @@ export const GitHubIntegrationConnectionForm = ({
                   <CardContent>
                     {/* Production Branch Sync Section */}
                     <div className="space-y-4">
-                      <FormField_Shadcn_
+                      <FormField
                         control={githubSettingsForm.control}
                         name="enableProductionSync"
                         render={({ field }) => (
@@ -619,13 +619,13 @@ export const GitHubIntegrationConnectionForm = ({
                             label="Deploy to production"
                             description="Deploy changes to production on push including PR merges"
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                                 disabled={!canUpdateGitHubConnection}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -636,7 +636,7 @@ export const GitHubIntegrationConnectionForm = ({
                           !enableProductionSync && 'opacity-25 pointer-events-none'
                         )}
                       >
-                        <FormField_Shadcn_
+                        <FormField
                           control={githubSettingsForm.control}
                           name="branchName"
                           render={({ field }) => (
@@ -646,13 +646,13 @@ export const GitHubIntegrationConnectionForm = ({
                               description="The GitHub branch to sync with your production database (e.g., main, master)"
                             >
                               <div className="relative w-full">
-                                <FormControl_Shadcn_>
+                                <FormControl>
                                   <Input_Shadcn_
                                     {...field}
                                     autoComplete="off"
                                     disabled={!canUpdateGitHubConnection || !enableProductionSync}
                                   />
-                                </FormControl_Shadcn_>
+                                </FormControl>
                                 <div className="absolute top-2.5 right-3 flex items-center gap-2">
                                   {isCheckingBranch && (
                                     <Loader2 size={14} className="animate-spin" />
@@ -690,7 +690,7 @@ export const GitHubIntegrationConnectionForm = ({
 
                     {/* Automatic Branching Section */}
                     <div className="space-y-4">
-                      <FormField_Shadcn_
+                      <FormField
                         disabled={!hasAccessToBranching}
                         control={githubSettingsForm.control}
                         name="new_branch_per_pr"
@@ -701,13 +701,13 @@ export const GitHubIntegrationConnectionForm = ({
                             className={cn(!hasAccessToBranching && 'opacity-25')}
                             description="Create preview branches for every pull request"
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch
                                 checked={!hasAccessToBranching ? false : field.value}
                                 onCheckedChange={field.onChange}
                                 disabled={!hasAccessToBranching || !canCreateGitHubConnection}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -719,7 +719,7 @@ export const GitHubIntegrationConnectionForm = ({
                             'opacity-25 pointer-events-none'
                         )}
                       >
-                        <FormField_Shadcn_
+                        <FormField
                           control={githubSettingsForm.control}
                           name="branchLimit"
                           render={({ field }) => (
@@ -728,7 +728,7 @@ export const GitHubIntegrationConnectionForm = ({
                               label="Branch limit"
                               description="Maximum number of preview branches"
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Input_Shadcn_
                                   {...field}
                                   type="number"
@@ -740,12 +740,12 @@ export const GitHubIntegrationConnectionForm = ({
                                     !canUpdateGitHubConnection
                                   }
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
 
-                        <FormField_Shadcn_
+                        <FormField
                           control={githubSettingsForm.control}
                           name="supabaseChangesOnly"
                           render={({ field }) => (
@@ -754,7 +754,7 @@ export const GitHubIntegrationConnectionForm = ({
                               label="Supabase changes only"
                               description="Only create branches when Supabase files change"
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Switch
                                   checked={!hasAccessToBranching ? false : field.value}
                                   onCheckedChange={(val) => field.onChange(val)}
@@ -764,7 +764,7 @@ export const GitHubIntegrationConnectionForm = ({
                                     !canUpdateGitHubConnection
                                   }
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )}
                         />
@@ -817,7 +817,7 @@ export const GitHubIntegrationConnectionForm = ({
             </AnimatePresence>
           </Card>
         </form>
-      </Form_Shadcn_>
+      </Form>
 
       <ConfirmationModal
         variant="warning"
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
index e81a5e0c21..66e9a372dc 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
@@ -6,13 +6,13 @@ import {
   Alert_Shadcn_,
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   Switch,
 } from 'ui'
@@ -91,7 +91,7 @@ const VercelIntegrationConnectionForm = ({
   const vercelConnectionFormId = `vercel-connection-form-${connection.id}`
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form
         id={vercelConnectionFormId}
         onSubmit={form.handleSubmit(onSubmit)}
@@ -125,70 +125,70 @@ const VercelIntegrationConnectionForm = ({
                   Sync environment variables for selected target environments
                 </h5>
 
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="environmentVariablesProduction"
                   render={({ field }) => (
-                    <FormItem_Shadcn_ className="space-y-0 flex gap-x-4">
-                      <FormControl_Shadcn_>
+                    <FormItem className="space-y-0 flex gap-x-4">
+                      <FormControl>
                         <Switch
                           disabled={disabled}
                           className="mt-1"
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                       <div>
-                        <FormLabel_Shadcn_ className="!text">Production</FormLabel_Shadcn_>
-                        <FormDescription_Shadcn_ className="text-xs text-foreground-lighter">
+                        <FormLabel className="!text">Production</FormLabel>
+                        <FormDescription className="text-xs text-foreground-lighter">
                           Sync environment variables for <code>production</code> environment.
-                        </FormDescription_Shadcn_>
+                        </FormDescription>
                       </div>
-                    </FormItem_Shadcn_>
+                    </FormItem>
                   )}
                 />
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="environmentVariablesPreview"
                   render={({ field }) => (
-                    <FormItem_Shadcn_ className="space-y-0 flex gap-x-4">
-                      <FormControl_Shadcn_>
+                    <FormItem className="space-y-0 flex gap-x-4">
+                      <FormControl>
                         <Switch
                           disabled={disabled}
                           className="mt-1"
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                       <div>
-                        <FormLabel_Shadcn_ className="!text">Preview</FormLabel_Shadcn_>
-                        <FormDescription_Shadcn_ className="text-xs text-foreground-lighter">
+                        <FormLabel className="!text">Preview</FormLabel>
+                        <FormDescription className="text-xs text-foreground-lighter">
                           Sync environment variables for <code>preview</code> environment.
-                        </FormDescription_Shadcn_>
+                        </FormDescription>
                       </div>
-                    </FormItem_Shadcn_>
+                    </FormItem>
                   )}
                 />
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="environmentVariablesDevelopment"
                   render={({ field }) => (
-                    <FormItem_Shadcn_ className="space-y-0 flex gap-x-4">
-                      <FormControl_Shadcn_>
+                    <FormItem className="space-y-0 flex gap-x-4">
+                      <FormControl>
                         <Switch
                           disabled={disabled}
                           className="mt-1"
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                       <div>
-                        <FormLabel_Shadcn_ className="!text">Development</FormLabel_Shadcn_>
-                        <FormDescription_Shadcn_ className="text-xs text-foreground-lighter">
+                        <FormLabel className="!text">Development</FormLabel>
+                        <FormDescription className="text-xs text-foreground-lighter">
                           Sync environment variables for <code>development</code> environment.
-                        </FormDescription_Shadcn_>
+                        </FormDescription>
                       </div>
-                    </FormItem_Shadcn_>
+                    </FormItem>
                   )}
                 />
               </div>
@@ -196,23 +196,23 @@ const VercelIntegrationConnectionForm = ({
           </div>
           <h5 className="mt-2 text-foreground">Customize public environment variable prefix</h5>
           <div className="flex flex-col gap-4">
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="publicEnvVarPrefix"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="grid gap-2 md:grid md:grid-cols-12 space-y-0">
-                  <FormLabel_Shadcn_ className="flex flex-col space-y-2 col-span-4 text-sm justify-center text-foreground-light">
+                <FormItem className="grid gap-2 md:grid md:grid-cols-12 space-y-0">
+                  <FormLabel className="flex flex-col space-y-2 col-span-4 text-sm justify-center text-foreground-light">
                     Prefix
-                  </FormLabel_Shadcn_>
-                  <FormControl_Shadcn_ className="col-span-8">
+                  </FormLabel>
+                  <FormControl className="col-span-8">
                     <Input_Shadcn_
                       {...field}
                       className="w-full"
                       disabled={disabled}
                       placeholder="An empty prefix will result in no public env vars"
                     />
-                  </FormControl_Shadcn_>
-                  <FormDescription_Shadcn_ className="col-start-5 col-span-8 text-xs">
+                  </FormControl>
+                  <FormDescription className="col-start-5 col-span-8 text-xs">
                     e.g.{' '}
                     <code
                       className="cursor-pointer"
@@ -244,10 +244,10 @@ const VercelIntegrationConnectionForm = ({
                       PUBLIC_
                     </code>
                     , etc.
-                  </FormDescription_Shadcn_>
+                  </FormDescription>
 
-                  <FormMessage_Shadcn_ className="col-start-5 col-span-8" />
-                </FormItem_Shadcn_>
+                  <FormMessage className="col-start-5 col-span-8" />
+                </FormItem>
               )}
             />
           </div>
@@ -270,7 +270,7 @@ const VercelIntegrationConnectionForm = ({
           />
         </div>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
index 7f062e4f4e..1ad0ad3ff0 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
@@ -1,15 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import {
-  Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-  Modal,
-  Textarea,
-} from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_, Modal, Textarea } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
@@ -54,30 +46,30 @@ export const UpdateSavedQueryModal = ({
 
   return (
     <Modal visible={visible} onCancel={handleCancel} hideFooter header={header} size="medium">
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} noValidate>
           <Modal.Content>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
                 <FormItemLayout layout="vertical" label="Name">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_ {...field} placeholder="Enter text" />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
           </Modal.Content>
           <Modal.Content>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="description"
               render={({ field }) => (
                 <FormItemLayout layout="vertical" label="Description">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Textarea {...field} placeholder="Describe query" className="resize-none" />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -92,7 +84,7 @@ export const UpdateSavedQueryModal = ({
             </Button>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
index e615fbd14a..c948469a1b 100644
--- a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
+++ b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
@@ -73,7 +73,7 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
   }
 
   return (
-    <Form_Shadcn_ {...codeForm}>
+    <Form {...codeForm}>
       <form
         id="code-input-form"
         className="flex flex-col pt-4 space-y-4"
@@ -84,19 +84,19 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
           title="Check your email for a reset code"
           description="You'll receive an email if an account associated with the email address exists"
         />
-        <FormField_Shadcn_
+        <FormField
           control={codeForm.control}
           name="code"
           render={({ field }) => (
             <FormItemLayout label="Code">
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_
                   {...field}
                   placeholder="123456"
                   autoComplete="off"
                   disabled={isLoading}
                 />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -107,7 +107,7 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
           Confirm reset code
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
@@ -150,18 +150,18 @@ const ForgotPasswordForm = ({ onSuccess }: { onSuccess: (email: string) => void
   }
 
   return (
-    <Form_Shadcn_ {...forgotPasswordForm}>
+    <Form {...forgotPasswordForm}>
       <form
         id="forgot-password-form"
         className="flex flex-col pt-4 space-y-4"
         onSubmit={forgotPasswordForm.handleSubmit(onForgotPassword)}
       >
-        <FormField_Shadcn_
+        <FormField
           control={forgotPasswordForm.control}
           name="email"
           render={({ field }) => (
             <FormItemLayout label="Email">
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_
                   {...field}
                   type="email"
@@ -169,7 +169,7 @@ const ForgotPasswordForm = ({ onSuccess }: { onSuccess: (email: string) => void
                   disabled={isPending}
                   autoComplete="email"
                 />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -201,6 +201,6 @@ const ForgotPasswordForm = ({ onSuccess }: { onSuccess: (email: string) => void
           Send reset code
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index 7ead5e17cb..711eda7d48 100644
--- a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, cn, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Separator } from 'ui'
+import { Button, cn, Form, FormControl, FormField, Separator } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { z } from 'zod'
@@ -75,15 +75,15 @@ export const ResetPasswordForm = () => {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onResetPassword)} className="space-y-4 pt-4">
         {requireCurrentPassword && (
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="currentPassword"
             render={({ field }) => (
               <FormItemLayout label="Current password">
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Input
                     id="currentPassword"
                     type={currentPasswordHidden ? 'password' : 'text'}
@@ -103,17 +103,17 @@ export const ResetPasswordForm = () => {
                       setCurrentPasswordHidden(true)
                     }}
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
         )}
-        <FormField_Shadcn_
+        <FormField
           control={form.control}
           name="password"
           render={({ field }) => (
             <FormItemLayout label="Password">
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input
                   id="password"
                   type={passwordHidden ? 'password' : 'text'}
@@ -135,7 +135,7 @@ export const ResetPasswordForm = () => {
                     setPasswordHidden(true)
                   }}
                 />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -161,6 +161,6 @@ export const ResetPasswordForm = () => {
           Save new password
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/SignIn/SignInForm.tsx b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
index 3399f7d546..72b889dfc6 100644
--- a/apps/studio/components/interfaces/SignIn/SignInForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
@@ -8,7 +8,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 import { useForm, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import z from 'zod'
 
@@ -119,15 +119,15 @@ export const SignInForm = () => {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           key="email"
           name="email"
           control={form.control}
           render={({ field }) => (
             <FormItemLayout name="email" label="Email">
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_
                   id="email"
                   type="email"
@@ -136,19 +136,19 @@ export const SignInForm = () => {
                   placeholder="you@example.com"
                   disabled={isSubmitting}
                 />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
 
         <div className="relative">
-          <FormField_Shadcn_
+          <FormField
             key="password"
             name="password"
             control={form.control}
             render={({ field }) => (
               <FormItemLayout name="password" label="Password">
-                <FormControl_Shadcn_>
+                <FormControl>
                   <div className="relative">
                     <Input_Shadcn_
                       id="password"
@@ -169,7 +169,7 @@ export const SignInForm = () => {
                       onClick={() => setPasswordHidden((prev) => !prev)}
                     />
                   </div>
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
             )}
           />
@@ -203,6 +203,6 @@ export const SignInForm = () => {
           </Button>
         </LastSignInWrapper>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
index 21977a14f1..0424d1fc22 100644
--- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
@@ -8,7 +8,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import z from 'zod'
@@ -119,9 +119,9 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
       {isErrorFactors && <AlertError error={factorsError} subject="Failed to retrieve factors" />}
 
       {isSuccessFactors && (
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField_Shadcn_
+            <FormField
               key="code"
               name="code"
               control={form.control}
@@ -134,7 +134,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
                       : null
                   }
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <div className="relative">
                       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-foreground-light [&_svg]:stroke-[1.5] [&_svg]:h-[20px] [&_svg]:w-[20px]">
                         <Lock />
@@ -152,7 +152,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
                         disabled={isVerifying}
                       />
                     </div>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -180,7 +180,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
               </Button>
             </div>
           </form>
-        </Form_Shadcn_>
+        </Form>
       )}
 
       <div className="my-8">
diff --git a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
index c94d009b22..bfb2862a08 100644
--- a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
@@ -4,7 +4,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useRef, useState } from 'react'
 import { useForm, type SubmitHandler } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { Button, Form, FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import z from 'zod'
 
@@ -72,15 +72,15 @@ export const SignInSSOForm = () => {
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField_Shadcn_
+        <FormField
           key="email"
           name="email"
           control={form.control}
           render={({ field }) => (
             <FormItemLayout name="email" label="Email">
-              <FormControl_Shadcn_>
+              <FormControl>
                 <Input_Shadcn_
                   id="email"
                   type="email"
@@ -88,7 +88,7 @@ export const SignInSSOForm = () => {
                   {...field}
                   placeholder="gavin@hooli.com"
                 />
-              </FormControl_Shadcn_>
+              </FormControl>
             </FormItemLayout>
           )}
         />
@@ -111,6 +111,6 @@ export const SignInSSOForm = () => {
           Sign in
         </Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
index e1310c0bd0..08696cde35 100644
--- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -13,9 +13,9 @@ import {
   AlertTitle_Shadcn_,
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -143,15 +143,15 @@ export const SignUpForm = () => {
           isSubmitted ? 'max-h-[100px] opacity-0 pointer-events-none' : 'max-h-[1000px] opacity-100'
         )}
       >
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField_Shadcn_
+            <FormField
               key="email"
               name="email"
               control={form.control}
               render={({ field }) => (
                 <FormItemLayout name="email" label="Email">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_
                       id="email"
                       autoComplete="email"
@@ -159,18 +159,18 @@ export const SignUpForm = () => {
                       {...field}
                       placeholder="you@example.com"
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               key="password"
               name="password"
               control={form.control}
               render={({ field }) => (
                 <FormItemLayout name="password" label="Password">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <div className="relative">
                       <Input_Shadcn_
                         id="password"
@@ -191,7 +191,7 @@ export const SignUpForm = () => {
                         onClick={() => setPasswordHidden((prev) => !prev)}
                       />
                     </div>
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -225,7 +225,7 @@ export const SignUpForm = () => {
               Sign up
             </Button>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </div>
     </div>
   )
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
index 1857b1aeea..4d9502821a 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableSheet.tsx
@@ -7,9 +7,9 @@ import { toast } from 'sonner'
 import {
   Button,
   DialogSectionSeparator,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   FormInputGroupInput,
   Input_Shadcn_,
   InputGroup,
@@ -139,7 +139,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
           <SheetContent aria-describedby={undefined} className="flex flex-col gap-0">
             <SheetHeader className="shrink-0 flex items-center gap-4">
@@ -148,7 +148,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
 
             <SheetSection className="overflow-auto flex-grow p-0">
               <div className="flex flex-col gap-y-4 py-4 px-5">
-                <FormField_Shadcn_
+                <FormField
                   name="namespace"
                   control={form.control}
                   render={({ field }) => (
@@ -156,7 +156,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                       name="namespace"
                       label="Select a namespace to create your table in"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Select_Shadcn_
                           value={field.value}
                           onValueChange={(value) => {
@@ -182,22 +182,22 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                             </SelectItem_Shadcn_>
                           </SelectContent_Shadcn_>
                         </Select_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
                 {namespace === NEW_NAMESPACE_MARKER && (
-                  <FormField_Shadcn_
+                  <FormField
                     name="newNamespace"
                     control={form.control}
                     render={({ field }) => (
                       <FormItemLayout name="newNamespace" label="Name of new namespace">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_
                             {...field}
                             placeholder="Provide a name for your new namespace"
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -208,17 +208,17 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
 
               {!!namespace && (
                 <div className="px-5 py-4 flex flex-col gap-y-4">
-                  <FormField_Shadcn_
+                  <FormField
                     name="name"
                     control={form.control}
                     render={({ field }) => (
                       <FormItemLayout name="name" label="Name of table">
-                        <FormControl_Shadcn_>
+                        <FormControl>
                           <Input_Shadcn_
                             {...field}
                             placeholder="Provide a name for your new table"
                           />
-                        </FormControl_Shadcn_>
+                        </FormControl>
                       </FormItemLayout>
                     )}
                   />
@@ -252,27 +252,27 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                           return (
                             <Fragment key={`column-${idx}`}>
                               <div className="grid grid-cols-[1fr,1fr,32px] gap-x-1">
-                                <FormField_Shadcn_
+                                <FormField
                                   control={form.control}
                                   name={`columns.${idx}.name`}
                                   render={({ field }) => (
                                     <FormItemLayout>
-                                      <FormControl_Shadcn_>
+                                      <FormControl>
                                         <Input_Shadcn_
                                           {...field}
                                           placeholder="Provide a column name"
                                           disabled={isCreating}
                                           className="h-auto"
                                         />
-                                      </FormControl_Shadcn_>
+                                      </FormControl>
                                     </FormItemLayout>
                                   )}
                                 />
-                                <FormField_Shadcn_
+                                <FormField
                                   control={form.control}
                                   name={`columns.${idx}.type`}
                                   render={({ field }) => (
-                                    <FormControl_Shadcn_>
+                                    <FormControl>
                                       <Select_Shadcn_
                                         value={field.value}
                                         onValueChange={field.onChange}
@@ -288,7 +288,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                                           ))}
                                         </SelectContent_Shadcn_>
                                       </Select_Shadcn_>
-                                    </FormControl_Shadcn_>
+                                    </FormControl>
                                   )}
                                 />
                                 <div className="flex items-center justify-center">
@@ -305,13 +305,13 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                                   <div className="col-span-full flex items-center mt-2">
                                     <div className="flex items-center justify-end gap-1 w-[85%] ">
                                       {additionalFields.map((x) => (
-                                        <FormField_Shadcn_
+                                        <FormField
                                           control={form.control}
                                           key={`columns.${idx}.${x.name}`}
                                           name={`columns.${idx}.${x.name}` as any}
                                           render={({ field }) => (
                                             <FormItemLayout>
-                                              <FormControl_Shadcn_>
+                                              <FormControl>
                                                 <InputGroup>
                                                   <InputGroupAddon align="inline-start">
                                                     {x.name}
@@ -330,7 +330,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
                                                     }
                                                   />
                                                 </InputGroup>
-                                              </FormControl_Shadcn_>
+                                              </FormControl>
                                             </FormItemLayout>
                                           )}
                                         />
@@ -367,7 +367,7 @@ export const CreateTableSheet = ({ open, onOpenChange }: CreateTableSheetProps)
             </SheetFooter>
           </SheetContent>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </Sheet>
   )
 }
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx
index 853d170ab0..49ac32788a 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/InitializeForeignSchemaDialog.tsx
@@ -13,8 +13,8 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -93,7 +93,7 @@ export const InitializeForeignSchemaDialog = ({ namespace }: { namespace: string
         <Button type="default">Query from Postgres</Button>
       </DialogTrigger>
       <DialogContent size="medium" aria-describedby={undefined}>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <DialogHeader>
               <DialogTitle>Query this namespace from Postgres</DialogTitle>
@@ -105,7 +105,7 @@ export const InitializeForeignSchemaDialog = ({ namespace }: { namespace: string
                 Create a Postgres schema to expose tables from the "{namespace}" namespace as
                 foreign tables.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="schema"
                 render={({ field }) => (
@@ -127,7 +127,7 @@ export const InitializeForeignSchemaDialog = ({ namespace }: { namespace: string
               </div>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx
index c58a0978f4..3c9e44f0d6 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx
@@ -13,8 +13,8 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
@@ -94,7 +94,7 @@ export const UpdateForeignSchemaDialog = ({
         <Button type="default">Update schema tables</Button>
       </DialogTrigger>
       <DialogContent size="medium" aria-describedby={undefined}>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <DialogHeader>
               <DialogTitle>Update schema to expose foreign tables</DialogTitle>
@@ -123,7 +123,7 @@ export const UpdateForeignSchemaDialog = ({
               </p>
 
               {schemasAssociatedWithNamespace.length > 1 ? (
-                <FormField_Shadcn_
+                <FormField
                   control={form.control}
                   name="schema"
                   render={({ field }) => (
@@ -167,7 +167,7 @@ export const UpdateForeignSchemaDialog = ({
               </div>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
index c391e531ea..753dd7ee1f 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
@@ -7,9 +7,9 @@ import {
   cn,
   DialogFooter,
   DialogSection,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   SheetFooter,
   SheetSection,
@@ -194,9 +194,9 @@ export const CreateAnalyticsBucketForm = ({
   return (
     <>
       <Section className="flex flex-col !p-0 flex-grow">
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField_Shadcn_
+            <FormField
               key="name"
               name="name"
               control={form.control}
@@ -208,7 +208,7 @@ export const CreateAnalyticsBucketForm = ({
                   labelOptional="Cannot be changed after creation"
                   description="Must be between 3 – 63 characters. Only lowercase letters, numbers, and hyphens are allowed."
                 >
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_
                       id="name"
                       data-1p-ignore
@@ -218,7 +218,7 @@ export const CreateAnalyticsBucketForm = ({
                       {...field}
                       placeholder="Enter bucket name"
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -259,7 +259,7 @@ export const CreateAnalyticsBucketForm = ({
               </Admonition>
             )}
           </form>
-        </Form_Shadcn_>
+        </Form>
       </Section>
 
       <Footer>
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 363bb71030..4f9e893346 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -12,10 +12,10 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormMessage,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -196,10 +196,10 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
 
         <DialogSectionSeparator />
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
             <DialogSection className="flex flex-col gap-y-2">
-              <FormField_Shadcn_
+              <FormField
                 key="name"
                 name="name"
                 control={form.control}
@@ -209,7 +209,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         id="name"
                         data-1p-ignore
@@ -219,7 +219,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                         {...field}
                         placeholder="Enter bucket name"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -228,7 +228,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
             <DialogSectionSeparator />
 
             <DialogSection className="space-y-3">
-              <FormField_Shadcn_
+              <FormField
                 key="public"
                 name="public"
                 control={form.control}
@@ -240,14 +240,14 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                     description="Allow anyone to read objects without authorization"
                     layout="flex"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Switch
                         id="public"
                         size="large"
                         checked={field.value}
                         onCheckedChange={field.onChange}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -263,7 +263,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
             <DialogSectionSeparator />
 
             <DialogSection className="space-y-2">
-              <FormField_Shadcn_
+              <FormField
                 key="has_file_size_limit"
                 name="has_file_size_limit"
                 control={form.control}
@@ -274,21 +274,21 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Switch
                         id="has_file_size_limit"
                         size="large"
                         checked={field.value}
                         onCheckedChange={field.onChange}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
 
               {hasFileSizeLimit && (
                 <div>
-                  <FormField_Shadcn_
+                  <FormField
                     key="formatted_size_limit"
                     name="formatted_size_limit"
                     control={form.control}
@@ -300,7 +300,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                       >
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_
                                 id="formatted_size_limit"
                                 aria-label="File size limit"
@@ -309,7 +309,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                                 placeholder="0"
                                 {...field}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </div>
                           <div className="col-span-4">
                             <Select_Shadcn_ value={selectedUnit} onValueChange={setSelectedUnit}>
@@ -330,7 +330,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                     )}
                   />
                   {formattedSizeLimitError?.message === 'exceed_global_limit' && (
-                    <FormMessage_Shadcn_ className="mt-2">
+                    <FormMessage className="mt-2">
                       Exceeds global limit of {formattedGlobalUploadLimit}. Increase limit in{' '}
                       <InlineLink
                         className="text-destructive decoration-destructive-500 hover:decoration-destructive"
@@ -340,7 +340,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                         Storage Settings
                       </InlineLink>{' '}
                       first.
-                    </FormMessage_Shadcn_>
+                    </FormMessage>
                   )}
 
                   {IS_PLATFORM && (
@@ -369,17 +369,17 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Switch
                     id="has_allowed_mime_types"
                     size="large"
                     checked={hasAllowedMimeTypes}
                     onCheckedChange={setHasAllowedMimeTypes}
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
               {hasAllowedMimeTypes && (
-                <FormField_Shadcn_
+                <FormField
                   key="allowed_mime_types"
                   name="allowed_mime_types"
                   control={form.control}
@@ -390,20 +390,20 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               )}
             </DialogSection>
           </form>
-        </Form_Shadcn_>
+        </Form>
 
         <DialogFooter>
           <Button type="default" disabled={isCreatingBucket} onClick={() => onOpenChange(false)}>
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index ad46aeced3..b2108b269d 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -12,10 +12,10 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormMessage,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -202,10 +202,10 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
 
         <DialogSectionSeparator />
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
             <DialogSection className="space-y-6">
-              <FormField_Shadcn_
+              <FormField
                 key="name"
                 name="name"
                 control={form.control}
@@ -216,15 +216,15 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_ id="name" {...field} disabled />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
 
               <div className="flex flex-col gap-y-3">
-                <FormField_Shadcn_
+                <FormField
                   key="public"
                   name="public"
                   control={form.control}
@@ -236,14 +236,14 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                       description="Allow anyone to read objects without authorization"
                       layout="flex"
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Switch
                           id="public"
                           size="large"
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
@@ -286,7 +286,7 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
             <DialogSectionSeparator />
 
             <DialogSection className="space-y-2">
-              <FormField_Shadcn_
+              <FormField
                 key="has_file_size_limit"
                 name="has_file_size_limit"
                 control={form.control}
@@ -297,20 +297,20 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Switch
                         id="has_file_size_limit"
                         size="large"
                         checked={field.value}
                         onCheckedChange={field.onChange}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
               {hasFileSizeLimit && (
                 <div>
-                  <FormField_Shadcn_
+                  <FormField
                     key="formatted_size_limit"
                     name="formatted_size_limit"
                     control={form.control}
@@ -322,7 +322,7 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                       >
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_
                                 id="formatted_size_limit"
                                 aria-label="File size limit"
@@ -331,7 +331,7 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                                 placeholder="0"
                                 {...field}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </div>
                           <div className="col-span-4">
                             <Select_Shadcn_ value={selectedUnit} onValueChange={setSelectedUnit}>
@@ -352,7 +352,7 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                     )}
                   />
                   {formattedSizeLimitError?.message === 'exceed_global_limit' && (
-                    <FormMessage_Shadcn_ className="mt-2">
+                    <FormMessage className="mt-2">
                       Exceeds global limit of {formattedGlobalUploadLimit}. Increase limit in{' '}
                       <InlineLink
                         className="text-destructive decoration-destructive-500 hover:decoration-destructive"
@@ -362,7 +362,7 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                         Storage Settings
                       </InlineLink>{' '}
                       first.
-                    </FormMessage_Shadcn_>
+                    </FormMessage>
                   )}
 
                   {IS_PLATFORM && (
@@ -391,17 +391,17 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
               >
-                <FormControl_Shadcn_>
+                <FormControl>
                   <Switch
                     id="has_allowed_mime_types"
                     size="large"
                     checked={hasAllowedMimeTypes}
                     onCheckedChange={setHasAllowedMimeTypes}
                   />
-                </FormControl_Shadcn_>
+                </FormControl>
               </FormItemLayout>
               {hasAllowedMimeTypes && (
-                <FormField_Shadcn_
+                <FormField
                   key="allowed_mime_types"
                   name="allowed_mime_types"
                   control={form.control}
@@ -412,20 +412,20 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
-                      <FormControl_Shadcn_>
+                      <FormControl>
                         <Input_Shadcn_
                           id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
-                      </FormControl_Shadcn_>
+                      </FormControl>
                     </FormItemLayout>
                   )}
                 />
               )}
             </DialogSection>
           </form>
-        </Form_Shadcn_>
+        </Form>
 
         <DialogFooter>
           <Button type="default" disabled={isUpdating} onClick={closeModal}>
diff --git a/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx
index c91ec82928..24ca071b16 100644
--- a/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/ImportForeignSchemaDialog.tsx
@@ -4,7 +4,7 @@ import { uniq } from 'lodash'
 import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, Form_Shadcn_, FormField_Shadcn_, Input_Shadcn_, Modal, Separator } from 'ui'
+import { Button, Form, FormField, Input_Shadcn_, Modal, Separator } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import z from 'zod'
 
@@ -165,7 +165,7 @@ export const ImportForeignSchemaDialog = ({
       header={<span>Create target schema</span>}
       onCancel={() => onClose()}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <Modal.Content className="flex flex-col gap-y-4">
             <p className="text-sm">
@@ -175,7 +175,7 @@ export const ImportForeignSchemaDialog = ({
                 : 'clashes with an existing database schema. Create a new schema to use as the destination for this data.'}
             </p>
             <Separator />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="targetSchema"
               render={({ field }) => (
@@ -199,7 +199,7 @@ export const ImportForeignSchemaDialog = ({
             </Button>
           </Modal.Content>
         </form>
-      </Form_Shadcn_>
+      </Form>
       <SchemaEditor
         visible={createSchemaSheetOpen}
         closePanel={() => setCreateSchemaSheetOpen(false)}
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx
index d59832c5d7..8e23d08a18 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/CustomExpiryModal.tsx
@@ -3,9 +3,9 @@ import dayjs from 'dayjs'
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   Modal,
   Select_Shadcn_,
@@ -81,7 +81,7 @@ export const CustomExpiryModal = () => {
       confirmText="Get URL"
       onCancel={handleClose}
     >
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <Modal.Content>
           <p className="text-sm text-foreground-light mb-4">
             Enter the duration for which the URL will be valid for:
@@ -93,12 +93,12 @@ export const CustomExpiryModal = () => {
             className="flex items-start space-x-2"
           >
             <div className="flex-grow">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="expiresIn"
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label="Duration">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         {...field}
                         type="number"
@@ -108,18 +108,18 @@ export const CustomExpiryModal = () => {
                           )
                         }}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </div>
             <div>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="units"
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label="Units">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                         <SelectTrigger_Shadcn_>
                           <SelectValue_Shadcn_ aria-label="Units" placeholder="Select an option" />
@@ -131,7 +131,7 @@ export const CustomExpiryModal = () => {
                           <SelectItem_Shadcn_ value="years">years</SelectItem_Shadcn_>
                         </SelectContent_Shadcn_>
                       </Select_Shadcn_>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -158,7 +158,7 @@ export const CustomExpiryModal = () => {
             Get signed URL
           </Button>
         </Modal.Content>
-      </Form_Shadcn_>
+      </Form>
     </Modal>
   )
 }
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
index f63e98f666..86b9248011 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/CreateCredentialModal.tsx
@@ -1,6 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { FormField } from '@ui/components/shadcn/ui/form'
 import { useParams } from 'common'
 import { Plus } from 'lucide-react'
 import { useState } from 'react'
@@ -16,8 +15,8 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -155,10 +154,10 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
               </DialogDescription>
             </DialogHeader>
             <DialogSectionSeparator />
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <form onSubmit={form.handleSubmit(onSubmit)}>
                 <DialogSection>
-                  <FormField_Shadcn_
+                  <FormField
                     name="description"
                     render={({ field }) => (
                       <FormItemLayout label="Description">
@@ -178,7 +177,7 @@ export const CreateCredentialModal = ({ visible, onOpenChange }: CreateCredentia
                   </Button>
                 </DialogFooter>
               </form>
-            </Form_Shadcn_>
+            </Form>
           </>
         )}
       </DialogContent>
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
index 188d75678c..ed58cf72ff 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
@@ -13,9 +13,9 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Switch,
   Table,
   TableBody,
@@ -149,14 +149,14 @@ export const S3Connection = () => {
               />
             )}
 
-            <Form_Shadcn_ {...form}>
+            <Form {...form}>
               <form id="s3-connection-form" onSubmit={form.handleSubmit(onSubmit)}>
                 {projectIsLoading ? (
                   <GenericSkeletonLoader />
                 ) : isProjectActive ? (
                   <Card>
                     <CardContent>
-                      <FormField_Shadcn_
+                      <FormField
                         name="s3ConnectionEnabled"
                         control={form.control}
                         render={({ field }) => (
@@ -166,14 +166,14 @@ export const S3Connection = () => {
                             label="S3 protocol connection"
                             description="Allow clients to connect to Supabase Storage via the S3 protocol"
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Switch
                                 size="large"
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                                 disabled={!isSuccessStorageConfig || field.disabled}
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -257,7 +257,7 @@ export const S3Connection = () => {
                   </Alert_Shadcn_>
                 )}
               </form>
-            </Form_Shadcn_>
+            </Form>
           </PageSectionContent>
         </PageSection>
 
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
index 6dc2d72f9c..cfc6a9b2f9 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
@@ -9,10 +9,10 @@ import {
   Card,
   CardContent,
   CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormMessage,
   Input_Shadcn_,
   Select_Shadcn_,
   SelectContent_Shadcn_,
@@ -261,7 +261,7 @@ export const StorageSettings = () => {
     <PageContainer>
       <PageSection>
         <PageSectionContent className="flex flex-col gap-y-8">
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             {!IS_PLATFORM ? (
               <Admonition
                 type="default"
@@ -292,7 +292,7 @@ export const StorageSettings = () => {
                     <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
                       <Card>
                         <CardContent>
-                          <FormField_Shadcn_
+                          <FormField
                             control={form.control}
                             name="imageTransformationEnabled"
                             render={({ field }) => (
@@ -311,7 +311,7 @@ export const StorageSettings = () => {
                                   </>
                                 }
                               >
-                                <FormControl_Shadcn_>
+                                <FormControl>
                                   <Switch
                                     size="large"
                                     disabled={
@@ -320,14 +320,14 @@ export const StorageSettings = () => {
                                     checked={hasAccessToImageTransformations && field.value}
                                     onCheckedChange={field.onChange}
                                   />
-                                </FormControl_Shadcn_>
+                                </FormControl>
                               </FormItemLayout>
                             )}
                           />
                         </CardContent>
 
                         <CardContent>
-                          <FormField_Shadcn_
+                          <FormField
                             control={form.control}
                             name="fileSizeLimit"
                             render={({ field }) => (
@@ -354,7 +354,7 @@ export const StorageSettings = () => {
                                   </>
                                 }
                               >
-                                <FormControl_Shadcn_>
+                                <FormControl>
                                   <div className="flex items-center justify-end">
                                     <Input_Shadcn_
                                       type="number"
@@ -369,7 +369,7 @@ export const StorageSettings = () => {
                                         !canUpdateStorageSettings
                                       }
                                     />
-                                    <FormField_Shadcn_
+                                    <FormField
                                       control={form.control}
                                       name="unit"
                                       render={({ field: unitField }) => (
@@ -404,7 +404,7 @@ export const StorageSettings = () => {
                                       )}
                                     />
                                   </div>
-                                </FormControl_Shadcn_>
+                                </FormControl>
                                 {sizeLimitCheckCondition === 'confirm' && (
                                   <ValidateSizeLimit
                                     onValidate={sizeLimitCheckQuery}
@@ -416,12 +416,12 @@ export const StorageSettings = () => {
                             )}
                           />
                           {fileSizeLimitError && (
-                            <FormMessage_Shadcn_ className="ml-auto mt-2 text-right w-1/2">
+                            <FormMessage className="ml-auto mt-2 text-right w-1/2">
                               <StorageFileSizeLimitErrorMessage
                                 error={fileSizeLimitError}
                                 projectRef={projectRef}
                               />
-                            </FormMessage_Shadcn_>
+                            </FormMessage>
                           )}
                         </CardContent>
                         {hasLimitedStorageAccess && (
@@ -489,7 +489,7 @@ export const StorageSettings = () => {
                 )}
               </>
             )}
-          </Form_Shadcn_>
+          </Form>
         </PageSectionContent>
       </PageSection>
     </PageContainer>
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx
index 927b3ba1cc..d79239cc3e 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx
@@ -12,9 +12,9 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
@@ -173,10 +173,10 @@ export const CreateVectorBucketDialog = ({
 
         <DialogSectionSeparator />
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
             <DialogSection className="flex flex-col !p-0">
-              <FormField_Shadcn_
+              <FormField
                 key="name"
                 name="name"
                 control={form.control}
@@ -188,7 +188,7 @@ export const CreateVectorBucketDialog = ({
                     labelOptional="Cannot be changed after creation"
                     description="Must be between 3–63 characters. Only lowercase letters, numbers, and hyphens are allowed"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         id="name"
                         data-1p-ignore
@@ -198,7 +198,7 @@ export const CreateVectorBucketDialog = ({
                         {...field}
                         placeholder="Enter bucket name"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -216,7 +216,7 @@ export const CreateVectorBucketDialog = ({
               </Admonition>
             </DialogSection>
           </form>
-        </Form_Shadcn_>
+        </Form>
 
         <DialogFooter>
           <Button type="default" disabled={isLoading} onClick={() => setVisible(false)}>
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
index 18ccfe2ba5..95ac7b2d28 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
@@ -8,9 +8,9 @@ import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Input_Shadcn_,
   RadioGroupStacked,
   RadioGroupStackedItem,
@@ -229,14 +229,14 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
           />
         )}
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form
             id={formId}
             onSubmit={form.handleSubmit(onSubmit)}
             className="overflow-auto flex-grow px-0"
           >
             <SheetSection className="flex flex-col gap-y-4">
-              <FormField_Shadcn_
+              <FormField
                 key="name"
                 name="name"
                 control={form.control}
@@ -247,7 +247,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                     description="Must be between 3–63 characters. Valid characters are a-z, 0-9, hyphens, and periods."
                     layout="horizontal"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         id="name"
                         data-1p-ignore
@@ -257,14 +257,14 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                         {...field}
                         placeholder="Enter a table name"
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </SheetSection>
             <Separator />
             <SheetSection className="flex flex-col gap-y-4">
-              <FormField_Shadcn_
+              <FormField
                 key="dimension"
                 name="dimension"
                 control={form.control}
@@ -275,7 +275,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                     description="Must be an integer between 1–4096."
                     layout="horizontal"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         id="dimension"
                         type="number"
@@ -287,12 +287,12 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                         }}
                         value={field.value ?? ''}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
 
-              <FormField_Shadcn_
+              <FormField
                 key="distanceMetric"
                 name="distanceMetric"
                 control={form.control}
@@ -303,7 +303,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                     layout="horizontal"
                     className="gap-1"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <RadioGroupStacked
                         id="distance_metric"
                         name="distance_metric"
@@ -322,7 +322,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                           ></RadioGroupStackedItem>
                         ))}
                       </RadioGroupStacked>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -339,7 +339,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                 {fields.map((field, index) => (
                   <div key={field.id} className="flex items-start gap-2">
                     <div className="flex-1">
-                      <FormField_Shadcn_
+                      <FormField
                         control={form.control}
                         name={`metadataKeys.${index}.value`}
                         render={({ field }) => (
@@ -352,7 +352,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                             }
                             layout="vertical"
                           >
-                            <FormControl_Shadcn_>
+                            <FormControl>
                               <Input_Shadcn_
                                 {...field}
                                 value={field.value}
@@ -364,7 +364,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
                                 data-form-type="other"
                                 data-bwignore
                               />
-                            </FormControl_Shadcn_>
+                            </FormControl>
                           </FormItemLayout>
                         )}
                       />
@@ -386,7 +386,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
               </div>
             </SheetSection>
           </form>
-        </Form_Shadcn_>
+        </Form>
 
         <SheetFooter>
           <Button type="default" disabled={isCreating} onClick={() => setVisible(false)}>
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx
index 4a299e316c..300fd7e294 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/InitializeForeignSchemaDialog.tsx
@@ -16,8 +16,8 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -143,7 +143,7 @@ export const InitializeForeignSchemaDialog = () => {
         <Button type="default">Query from Postgres</Button>
       </DialogTrigger>
       <DialogContent size="medium" aria-describedby={undefined}>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <DialogHeader>
               <DialogTitle>Query this vector bucket from Postgres</DialogTitle>
@@ -155,7 +155,7 @@ export const InitializeForeignSchemaDialog = () => {
                 Create a Postgres schema to expose tables from the "{bucketId}" bucket as foreign
                 tables.
               </p>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="schema"
                 render={({ field }) => (
@@ -177,7 +177,7 @@ export const InitializeForeignSchemaDialog = () => {
               </div>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/interfaces/Support/AffectedServicesSelector.tsx b/apps/studio/components/interfaces/Support/AffectedServicesSelector.tsx
index ebbfd3b64c..7ca04998d9 100644
--- a/apps/studio/components/interfaces/Support/AffectedServicesSelector.tsx
+++ b/apps/studio/components/interfaces/Support/AffectedServicesSelector.tsx
@@ -2,7 +2,7 @@
 
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import type { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { FormControl, FormField } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { MultiSelectV2 } from 'ui-patterns/MultiSelectDeprecated/MultiSelectV2'
 
@@ -23,12 +23,12 @@ export function AffectedServicesSelector({ form, category }: AffectedServicesSel
   if (CATEGORIES_WITHOUT_AFFECTED_SERVICES.includes(category)) return null
 
   return (
-    <FormField_Shadcn_
+    <FormField
       name="affectedServices"
       control={form.control}
       render={({ field }) => (
         <FormItemLayout hideMessage layout="vertical" label="Which services are affected?">
-          <FormControl_Shadcn_>
+          <FormControl>
             <MultiSelectV2
               options={SERVICE_OPTIONS}
               value={field.value.length === 0 ? [] : field.value?.split(', ')}
@@ -36,7 +36,7 @@ export function AffectedServicesSelector({ form, category }: AffectedServicesSel
               searchPlaceholder="Search for a service"
               onChange={(services) => form.setValue('affectedServices', services.join(', '))}
             />
-          </FormControl_Shadcn_>
+          </FormControl>
         </FormItemLayout>
       )}
     />
diff --git a/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx b/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
index 48a47234c8..46ea1ce1a5 100644
--- a/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
+++ b/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
@@ -3,8 +3,8 @@ import { SupportCategories } from '@supabase/shared-types/out/constants'
 import type { UseFormReturn } from 'react-hook-form'
 import {
   cn,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -69,14 +69,14 @@ interface CategorySelectorProps {
 
 function CategorySelector({ form }: CategorySelectorProps) {
   return (
-    <FormField_Shadcn_
+    <FormField
       name="category"
       control={form.control}
       render={({ field }) => {
         const { ref: _ref, ...fieldWithoutRef } = field
         return (
           <FormItemLayout hideMessage layout="vertical" label="What are you having issues with?">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Select_Shadcn_
                 {...fieldWithoutRef}
                 defaultValue={field.value}
@@ -102,7 +102,7 @@ function CategorySelector({ form }: CategorySelectorProps) {
                   </SelectGroup_Shadcn_>
                 </SelectContent_Shadcn_>
               </Select_Shadcn_>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )
       }}
@@ -116,14 +116,14 @@ interface SeveritySelectorProps {
 
 function SeveritySelector({ form }: SeveritySelectorProps) {
   return (
-    <FormField_Shadcn_
+    <FormField
       name="severity"
       control={form.control}
       render={({ field }) => {
         const { ref, ...fieldWithoutRef } = field
         return (
           <FormItemLayout hideMessage layout="vertical" label="Severity">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Select_Shadcn_
                 {...fieldWithoutRef}
                 defaultValue={field.value}
@@ -147,7 +147,7 @@ function SeveritySelector({ form }: SeveritySelectorProps) {
                   </SelectGroup_Shadcn_>
                 </SelectContent_Shadcn_>
               </Select_Shadcn_>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )
       }}
diff --git a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx b/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
index 4963d37963..848430af9a 100644
--- a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
@@ -7,8 +7,8 @@ import type { UseFormReturn } from 'react-hook-form'
 import {
   Button,
   cn,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -36,12 +36,12 @@ export function ClientLibraryInfo({ form, category, library }: ClientLibraryInfo
 
   return (
     <div className="flex flex-col gap-y-1">
-      <FormField_Shadcn_
+      <FormField
         name="library"
         control={form.control}
         render={({ field }) => (
           <FormItemLayout layout="vertical" label="Which library are you having issues with">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Select_Shadcn_ {...field} defaultValue={field.value} onValueChange={field.onChange}>
                 <SelectTrigger_Shadcn_ className="w-full" aria-label="Select a library">
                   <SelectValue_Shadcn_ placeholder="Select a library" />
@@ -56,7 +56,7 @@ export function ClientLibraryInfo({ form, category, library }: ClientLibraryInfo
                   </SelectGroup_Shadcn_>
                 </SelectContent_Shadcn_>
               </Select_Shadcn_>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
index 97948f588e..74805fae9e 100644
--- a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
+++ b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
@@ -5,7 +5,7 @@ import {
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  FormField_Shadcn_,
+  FormField,
   Switch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -26,7 +26,7 @@ export function DashboardLogsToggle({ form, sanitizedLog }: DashboardLogsToggleP
   if (!DASHBOARD_LOG_CATEGORIES.includes(form.getValues('category'))) return
 
   return (
-    <FormField_Shadcn_
+    <FormField
       name="attachDashboardLogs"
       control={form.control}
       render={({ field }) => (
diff --git a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
index 5edd152d63..39e81c3cf3 100644
--- a/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
+++ b/apps/studio/components/interfaces/Support/LinkSupportTicketForm.tsx
@@ -4,14 +4,7 @@ import { useEffect } from 'react'
 import type { SubmitHandler } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  DialogSectionSeparator,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-} from 'ui'
+import { Button, DialogSectionSeparator, Form, FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { CategoryAndSeverityInfo } from './CategoryAndSeverityInfo'
@@ -109,7 +102,7 @@ export const LinkSupportTicketForm = ({
   }, [isSuccess])
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form
         id="link-support-ticket-form"
         onSubmit={form.handleSubmit(onSubmit)}
@@ -118,14 +111,14 @@ export const LinkSupportTicketForm = ({
         <div className="flex flex-col py-6 gap-y-6">
           <h3 className="px-6 text-xl">Link support ticket to account</h3>
           <div className="px-6 flex flex-col gap-y-8">
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="conversation_id"
               render={({ field }) => (
                 <FormItemLayout hideMessage layout="vertical" label="Conversation ID">
-                  <FormControl_Shadcn_>
+                  <FormControl>
                     <Input_Shadcn_ {...field} readOnly />
-                  </FormControl_Shadcn_>
+                  </FormControl>
                 </FormItemLayout>
               )}
             />
@@ -176,6 +169,6 @@ export const LinkSupportTicketForm = ({
           </Button>
         </div>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/interfaces/Support/MessageField.tsx b/apps/studio/components/interfaces/Support/MessageField.tsx
index be94263427..1bdef3e1bd 100644
--- a/apps/studio/components/interfaces/Support/MessageField.tsx
+++ b/apps/studio/components/interfaces/Support/MessageField.tsx
@@ -1,7 +1,7 @@
 import type { UseFormReturn } from 'react-hook-form'
 // End of third-party imports
 
-import { FormControl_Shadcn_, FormField_Shadcn_, TextArea_Shadcn_ } from 'ui'
+import { FormControl, FormField, TextArea_Shadcn_ } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
@@ -16,7 +16,7 @@ interface MessageFieldProps {
 
 export function MessageField({ form, originalError }: MessageFieldProps) {
   return (
-    <FormField_Shadcn_
+    <FormField
       name="message"
       control={form.control}
       render={({ field }) => (
@@ -30,14 +30,14 @@ export function MessageField({ form, originalError }: MessageFieldProps) {
             )
           }
         >
-          <FormControl_Shadcn_>
+          <FormControl>
             <TextArea_Shadcn_
               {...field}
               rows={4}
               maxLength={5000}
               placeholder="Describe the issue you’re facing, along with any relevant information. Please be as detailed and specific as possible."
             />
-          </FormControl_Shadcn_>
+          </FormControl>
           {originalError && (
             <Admonition
               showIcon={false}
diff --git a/apps/studio/components/interfaces/Support/OrganizationSelector.tsx b/apps/studio/components/interfaces/Support/OrganizationSelector.tsx
index 4dc3954950..9e4869c65c 100644
--- a/apps/studio/components/interfaces/Support/OrganizationSelector.tsx
+++ b/apps/studio/components/interfaces/Support/OrganizationSelector.tsx
@@ -1,8 +1,8 @@
 import type { UseFormReturn } from 'react-hook-form'
 import {
   Badge,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  FormControl,
+  FormField,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -28,14 +28,14 @@ export function OrganizationSelector({ form, orgSlug }: OrganizationSelectorProp
   const subscriptionPlanId = getOrgSubscriptionPlan(organizations, orgSlug)
 
   return (
-    <FormField_Shadcn_
+    <FormField
       name="organizationSlug"
       control={form.control}
       render={({ field }) => {
         const { ref: _ref, ...fieldWithoutRef } = field
         return (
           <FormItemLayout hideMessage layout="vertical" label="Which organization is affected?">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Select_Shadcn_
                 {...fieldWithoutRef}
                 disabled={!isSuccessOrganizations}
@@ -75,7 +75,7 @@ export function OrganizationSelector({ form, orgSlug }: OrganizationSelectorProp
                   </SelectGroup_Shadcn_>
                 </SelectContent_Shadcn_>
               </Select_Shadcn_>
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )
       }}
diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
index 2ef1a10347..3f815e5fd9 100644
--- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
@@ -6,14 +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_Shadcn_,
-  FormField_Shadcn_,
-} from 'ui'
+import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, FormControl, FormField } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
@@ -72,12 +65,12 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
   const { projectRef: urlProjectRef } = useParams()
 
   return (
-    <FormField_Shadcn_
+    <FormField
       name="projectRef"
       control={form.control}
       render={({ field }) => (
         <FormItemLayout hideMessage layout="vertical" label="Which project is affected?">
-          <FormControl_Shadcn_>
+          <FormControl>
             <OrganizationProjectSelector
               key={orgSlug}
               sameWidthAsTrigger
@@ -130,7 +123,7 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
                 </CommandGroup_Shadcn_>
               )}
             />
-          </FormControl_Shadcn_>
+          </FormControl>
         </FormItemLayout>
       )}
     />
diff --git a/apps/studio/components/interfaces/Support/SubjectAndSuggestionsInfo.tsx b/apps/studio/components/interfaces/Support/SubjectAndSuggestionsInfo.tsx
index d0d25f1f9f..77962f3286 100644
--- a/apps/studio/components/interfaces/Support/SubjectAndSuggestionsInfo.tsx
+++ b/apps/studio/components/interfaces/Support/SubjectAndSuggestionsInfo.tsx
@@ -4,7 +4,7 @@ import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import type { UseFormReturn } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { FormControl, FormField, Input_Shadcn_ } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { DocsSuggestions } from './DocsSuggestions'
@@ -29,14 +29,14 @@ export function SubjectAndSuggestionsInfo({
 }: SubjectAndSuggestionsInfoProps) {
   return (
     <div className={'flex flex-col gap-y-2'}>
-      <FormField_Shadcn_
+      <FormField
         name="subject"
         control={form.control}
         render={({ field }) => (
           <FormItemLayout layout="vertical" label="Subject">
-            <FormControl_Shadcn_>
+            <FormControl>
               <Input_Shadcn_ {...field} placeholder="Summary of the problem you have" />
-            </FormControl_Shadcn_>
+            </FormControl>
           </FormItemLayout>
         )}
       />
diff --git a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
index 474e3162a3..ba477dc2c2 100644
--- a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
+++ b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
@@ -9,7 +9,7 @@ import {
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
-  FormField_Shadcn_,
+  FormField,
   Switch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -29,7 +29,7 @@ interface SupportAccessToggleProps {
 
 export function SupportAccessToggle({ form }: SupportAccessToggleProps) {
   return (
-    <FormField_Shadcn_
+    <FormField
       name="allowSupportAccess"
       control={form.control}
       render={({ field }) => {
diff --git a/apps/studio/components/interfaces/Support/SupportFormV2.tsx b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
index 688945f35f..a0c9d60b1f 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV2.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
@@ -4,7 +4,7 @@ import { useConstant, useFlag } from 'common'
 import { CLIENT_LIBRARIES } from 'common/constants'
 import { type Dispatch, type MouseEventHandler } from 'react'
 import type { SubmitHandler, UseFormReturn } from 'react-hook-form'
-import { DialogSectionSeparator, Form_Shadcn_ } from 'ui'
+import { DialogSectionSeparator, Form } from 'ui'
 
 import {
   AffectedServicesSelector,
@@ -197,7 +197,7 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
   }
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form id="support-form" className="flex flex-col gap-y-6">
         <h3 className="px-6 text-xl">How can we help?</h3>
 
@@ -256,6 +256,6 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
           />
         </div>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
diff --git a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
index c0ffda0c98..81819d355f 100644
--- a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
@@ -20,8 +20,8 @@ import {
   DialogHeader,
   DialogSection,
   DialogTitle,
-  Form_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormField,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -289,11 +289,11 @@ export const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
               ? 'Your project’s data will be restored to when it was initially paused.'
               : 'Your project’s data will be restored and billing will resume based on compute size and hours active.'}
           </p>
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form onSubmit={form.handleSubmit(onConfirmRestore)}>
               {showPostgresVersionSelector && (
                 <div className="space-y-2">
-                  <FormField_Shadcn_
+                  <FormField
                     control={form.control}
                     name="postgresVersionSelection"
                     render={({ field }) => (
@@ -312,7 +312,7 @@ export const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
                 </div>
               )}
             </form>
-          </Form_Shadcn_>
+          </Form>
         </div>
       </ConfirmationModal>
 
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx
index 62d32eee8c..b881e8c452 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIOptInModal.tsx
@@ -10,7 +10,7 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
+  Form,
 } from 'ui'
 
 import { AIOptInLevelSelector } from '@/components/interfaces/Organization/GeneralSettings/AIOptInLevelSelector'
@@ -44,7 +44,7 @@ export const AIOptInModal = ({ visible, onCancel }: AIOptInModalProps) => {
   return (
     <Dialog open={visible} onOpenChange={onOpenChange}>
       <DialogContent size="large" aria-describedby={undefined}>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id="ai-opt-in-form" onSubmit={form.handleSubmit(onSubmit)}>
             <DialogHeader padding="small">
               <DialogTitle>Update Supabase Assistant Opt-in Level</DialogTitle>
@@ -84,7 +84,7 @@ export const AIOptInModal = ({ visible, onCancel }: AIOptInModalProps) => {
               </div>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx
index 258116724f..850c962c71 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx
@@ -5,9 +5,9 @@ import { useForm } from 'react-hook-form'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
@@ -176,14 +176,14 @@ function MessageActionsThumbsDown({
         {form.formState.isSubmitSuccessful ? (
           <p className="text-sm">We appreciate your feedback!</p>
         ) : (
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="reason"
                 render={({ field }) => (
                   <FormItemLayout label="What went wrong?" labelOptional="optional">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <TextArea_Shadcn_
                         placeholder="Describe why the response was not helpful..."
                         autoComplete="off"
@@ -191,7 +191,7 @@ function MessageActionsThumbsDown({
                         autoFocus
                         {...field}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -201,7 +201,7 @@ function MessageActionsThumbsDown({
                 </Button>
               </div>
             </form>
-          </Form_Shadcn_>
+          </Form>
         )}
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>
diff --git a/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx b/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx
index 1bdb6ad202..bebbc3b06f 100644
--- a/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx
+++ b/apps/studio/components/ui/RequestUpgradeToBillingOwners.tsx
@@ -14,9 +14,9 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   TextArea_Shadcn_,
   Tooltip,
   TooltipContent,
@@ -167,7 +167,7 @@ export const RequestUpgradeToBillingOwners = ({
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
             <DialogHeader>
               <DialogTitle>{titleText}</DialogTitle>
@@ -207,7 +207,7 @@ export const RequestUpgradeToBillingOwners = ({
                   )}
                 </div>
               </div>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="note"
                 render={({ field }) => (
@@ -216,7 +216,7 @@ export const RequestUpgradeToBillingOwners = ({
                     label="Add a note to your request (optional)"
                     layout="vertical"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <TextArea_Shadcn_
                         id="note"
                         {...field}
@@ -229,7 +229,7 @@ export const RequestUpgradeToBillingOwners = ({
                             : 'e.g. We need to upgrade to the Pro plan to use this feature'
                         }
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -244,7 +244,7 @@ export const RequestUpgradeToBillingOwners = ({
               </Button>
             </DialogFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx
index de4105f407..af1eeef4a6 100644
--- a/apps/studio/pages/new/[slug].tsx
+++ b/apps/studio/pages/new/[slug].tsx
@@ -9,7 +9,7 @@ import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { AWS_REGIONS, type CloudProvider } from 'shared-data'
 import { toast } from 'sonner'
-import { Button, Form_Shadcn_, FormField_Shadcn_, useWatch_Shadcn_ } from 'ui'
+import { Button, Form, FormField, useWatch } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { z } from 'zod'
@@ -151,7 +151,7 @@ const Wizard: NextPageWithLayout = () => {
     dbRegion,
     organization,
     highAvailability,
-  } = useWatch_Shadcn_({ control: form.control })
+  } = useWatch({ control: form.control })
 
   // [Charis] Since the form is updated in a useEffect, there is an edge case
   // when switching from free to paid, where canChooseInstanceSize is true for
@@ -435,7 +435,7 @@ const Wizard: NextPageWithLayout = () => {
         <title>{pageTitle}</title>
         <meta name="description" content="Supabase Studio" />
       </Head>
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmitWithComputeCostsConfirmation)}>
           <Panel
             loading={!isOrganizationsSuccess}
@@ -486,7 +486,7 @@ const Wizard: NextPageWithLayout = () => {
 
                       {showPostgresVersionSelector && (
                         <Panel.Content>
-                          <FormField_Shadcn_
+                          <FormField
                             control={form.control}
                             name="postgresVersionSelection"
                             render={({ field }) => (
@@ -591,7 +591,7 @@ const Wizard: NextPageWithLayout = () => {
             </div>
           </ConfirmationModal>
         </form>
-      </Form_Shadcn_>
+      </Form>
     </>
   )
 }
diff --git a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
index ec1c030dcf..57ce2dedd5 100644
--- a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
+++ b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
@@ -6,16 +6,7 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Button,
-  Card,
-  CardContent,
-  CardFooter,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Switch,
-} from 'ui'
+import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
 import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { PageContainer } from 'ui-patterns/PageContainer'
@@ -214,11 +205,11 @@ const RedirectToTemplates = () => {
                   </PageSectionSummary>
                 </PageSectionMeta>
                 <PageSectionContent>
-                  <Form_Shadcn_ {...templateForm}>
+                  <Form {...templateForm}>
                     <form onSubmit={templateForm.handleSubmit(onSubmit)} className="space-y-4">
                       <Card>
                         <CardContent>
-                          <FormField_Shadcn_
+                          <FormField
                             control={templateForm.control}
                             name={templateEnabledKey as keyof z.infer<typeof TemplateFormSchema>}
                             render={({ field }) => (
@@ -227,13 +218,13 @@ const RedirectToTemplates = () => {
                                 label="Enable notification"
                                 description="Send this email to users when triggered"
                               >
-                                <FormControl_Shadcn_>
+                                <FormControl>
                                   <Switch
                                     checked={field.value}
                                     onCheckedChange={field.onChange}
                                     disabled={!canUpdateConfig}
                                   />
-                                </FormControl_Shadcn_>
+                                </FormControl>
                               </FormItemLayout>
                             )}
                           />
@@ -259,7 +250,7 @@ const RedirectToTemplates = () => {
                         </CardFooter>
                       </Card>
                     </form>
-                  </Form_Shadcn_>
+                  </Form>
                 </PageSectionContent>
               </PageSection>
             )}
diff --git a/apps/studio/pages/project/[ref]/functions/new.tsx b/apps/studio/pages/project/[ref]/functions/new.tsx
index 5bc3ada738..8c6cb92a83 100644
--- a/apps/studio/pages/project/[ref]/functions/new.tsx
+++ b/apps/studio/pages/project/[ref]/functions/new.tsx
@@ -16,10 +16,10 @@ import {
   CommandInput_Shadcn_,
   CommandItem_Shadcn_,
   CommandList_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
   Input_Shadcn_,
   Label_Shadcn_,
   Popover_Shadcn_,
@@ -375,20 +375,20 @@ const NewFunctionPage = () => {
         setSelectedFileId={setSelectedFileId}
       />
 
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
           className="flex items-center bg-background-muted justify-end p-4 border-t bg-surface-100 gap-3"
         >
           <div className="flex items-center gap-3">
             <Label_Shadcn_ htmlFor="functionName">Function name</Label_Shadcn_>
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="functionName"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex flex-col gap-0 m-0">
+                <FormItem className="flex flex-col gap-0 m-0">
                   <div className="flex items-center">
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input_Shadcn_
                         id="functionName"
                         type="text"
@@ -397,7 +397,7 @@ const NewFunctionPage = () => {
                         className="w-[250px]"
                         {...field}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                     {form.formState.errors.functionName && (
                       <Tooltip>
                         <TooltipTrigger>
@@ -409,7 +409,7 @@ const NewFunctionPage = () => {
                       </Tooltip>
                     )}
                   </div>
-                </FormItem_Shadcn_>
+                </FormItem>
               )}
             />
           </div>
@@ -422,7 +422,7 @@ const NewFunctionPage = () => {
             Deploy function
           </Button>
         </form>
-      </Form_Shadcn_>
+      </Form>
       <PreventNavigationOnUnsavedChanges hasChanges={hasUnsavedChanges && !hasDeployed} />
     </PageLayout>
   )
diff --git a/apps/www/components/Forms/ApplyToSupaSquadForm.tsx b/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
index 67951fa8c9..cc788a2c71 100644
--- a/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
+++ b/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
@@ -1,16 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  SupaSquadApplication,
+  supaSquadApplicationSchema,
+} from '~/data/open-source/contributing/supasquad.utils'
 import { AlertCircle } from 'lucide-react'
 import { FC, memo, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   Button,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
   Separator,
   TextArea_Shadcn_,
@@ -32,13 +36,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from 'ui/src/components/shadcn/ui/alert-dialog'
-import {
-  SupaSquadApplication,
-  supaSquadApplicationSchema,
-} from '~/data/open-source/contributing/supasquad.utils'
+
 import { CountrySelector } from '../Supasquad/CountrySelector'
 
-interface FormItem_Shadcn_ {
+interface FormItem {
   type: 'text' | 'textarea'
   label: string
   placeholder: string
@@ -139,7 +140,7 @@ const FormContent = memo(function FormContent({
 }) {
   return (
     <div className="flex flex-col">
-      <Form_Shadcn_ {...form}>
+      <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
           className="space-y-6 text-left"
@@ -147,32 +148,32 @@ const FormContent = memo(function FormContent({
           noValidate
         >
           <div className="flex flex-col md:flex-row gap-4 items-start text-left">
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="first_name"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="w-full md:flex-1">
-                  <FormLabel_Shadcn_ className="text-foreground">First Name *</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem className="w-full md:flex-1">
+                  <FormLabel className="text-foreground">First Name *</FormLabel>
+                  <FormControl>
                     <Input_Shadcn_
                       placeholder="Your first name"
                       autoComplete="given-name"
                       {...field}
                     />
-                  </FormControl_Shadcn_>
+                  </FormControl>
 
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="last_name"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="w-full md:flex-1">
-                  <FormLabel_Shadcn_ className="text-foreground">Last Name *</FormLabel_Shadcn_>
-                  <FormControl_Shadcn_>
+                <FormItem className="w-full md:flex-1">
+                  <FormLabel className="text-foreground">Last Name *</FormLabel>
+                  <FormControl>
                     <div className="relative ">
                       <Input_Shadcn_
                         placeholder="Your last name"
@@ -180,21 +181,21 @@ const FormContent = memo(function FormContent({
                         {...field}
                       />
                     </div>
-                  </FormControl_Shadcn_>
+                  </FormControl>
 
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  <FormMessage />
+                </FormItem>
               )}
             />
           </div>
 
-          <FormField_Shadcn_
+          <FormField
             control={form.control}
             name="email"
             render={({ field }) => (
-              <FormItem_Shadcn_>
-                <FormLabel_Shadcn_ className="text-foreground">Email Address *</FormLabel_Shadcn_>
-                <FormControl_Shadcn_>
+              <FormItem>
+                <FormLabel className="text-foreground">Email Address *</FormLabel>
+                <FormControl>
                   <div className="relative">
                     <Input_Shadcn_
                       type="email"
@@ -203,9 +204,9 @@ const FormContent = memo(function FormContent({
                       {...field}
                     />
                   </div>
-                </FormControl_Shadcn_>
-                <FormMessage_Shadcn_ />
-              </FormItem_Shadcn_>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
           />
 
@@ -214,18 +215,18 @@ const FormContent = memo(function FormContent({
           <div className="space-y-8">
             <h3 className="h3 text-foreground">Interests and skills</h3>
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="tracks"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_ className="text-foreground">
+                <FormItem>
+                  <FormLabel className="text-foreground">
                     What track would you like to be considered for? *
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  </FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     See longer descriptions of the 4 options above
-                  </FormDescription_Shadcn_>
-                  <FormControl_Shadcn_>
+                  </FormDescription>
+                  <FormControl>
                     <div className="relative mt-1">
                       <MultiSelector
                         onValuesChange={(values) => {
@@ -261,25 +262,25 @@ const FormContent = memo(function FormContent({
                         </MultiSelectorContent>
                       </MultiSelector>
                     </div>
-                  </FormControl_Shadcn_>
+                  </FormControl>
 
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="why_you_want_to_join"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="space-y-1">
-                  <FormLabel_Shadcn_ className="text-foreground">
+                <FormItem className="space-y-1">
+                  <FormLabel className="text-foreground">
                     Why do you want to join the program? *
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  </FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     What do you have to contribute? What would you like to get out of it?
-                  </FormDescription_Shadcn_>
-                  <FormControl_Shadcn_>
+                  </FormDescription>
+                  <FormControl>
                     <div className="relative">
                       <TextArea_Shadcn_
                         autoComplete="off"
@@ -288,21 +289,21 @@ const FormContent = memo(function FormContent({
                         {...field}
                       />
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="contributions"
               render={({ field }) => (
-                <FormItem_Shadcn_ className="space-y-1">
-                  <FormLabel_Shadcn_ className="text-foreground">
+                <FormItem className="space-y-1">
+                  <FormLabel className="text-foreground">
                     Share some of your recent contributions *
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  </FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     <p>
                       Any relevant links to show your current engagement with the Supabase
                       community.
@@ -311,8 +312,8 @@ const FormContent = memo(function FormContent({
                       If you haven&apos;t contributed yet, spend some time engaging with the
                       community, then reapply once you&apos;ve built up a few contributions.
                     </p>
-                  </FormDescription_Shadcn_>
-                  <FormControl_Shadcn_>
+                  </FormDescription>
+                  <FormControl>
                     <div className="relative">
                       <TextArea_Shadcn_
                         autoComplete="off"
@@ -323,25 +324,23 @@ const FormContent = memo(function FormContent({
                         {...field}
                       />
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
             <Separator />
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="areas_of_interest"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_ className="text-foreground">
-                    Product Areas of Interest *
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                <FormItem>
+                  <FormLabel className="text-foreground">Product Areas of Interest *</FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     What specific areas would you like to help with? Leave blank if you&apos;re not
                     sure.
-                  </FormDescription_Shadcn_>
-                  <FormControl_Shadcn_>
+                  </FormDescription>
+                  <FormControl>
                     <div className="relative mt-1">
                       <MultiSelector
                         onValuesChange={field.onChange}
@@ -366,30 +365,30 @@ const FormContent = memo(function FormContent({
                         </MultiSelectorContent>
                       </MultiSelector>
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="skills"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_ className="text-foreground">
+                <FormItem>
+                  <FormLabel className="text-foreground">
                     Skills (frameworks, tools, programming languages)
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                  </FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     Know Postgres really well? React? Expo? Python? Rust? Terraform? Add it here!
-                  </FormDescription_Shadcn_>
-                  <FormControl_Shadcn_>
+                  </FormDescription>
+                  <FormControl>
                     <div className="relative mt-1">
                       <Input_Shadcn_ type="text" {...field} />
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
           </div>
@@ -400,72 +399,68 @@ const FormContent = memo(function FormContent({
             <h3 className="h3 text-foreground">Location and Availability</h3>
 
             <div className="flex flex-col md:flex-row gap-4 items-start text-left">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="country"
                 render={({ field }) => (
-                  <FormItem_Shadcn_ className="w-full md:flex-1">
-                    <FormLabel_Shadcn_ className="text-foreground">Country *</FormLabel_Shadcn_>
-                    <FormControl_Shadcn_>
+                  <FormItem className="w-full md:flex-1">
+                    <FormLabel className="text-foreground">Country *</FormLabel>
+                    <FormControl>
                       <div className="relative mt-1">
                         <CountrySelector value={field.value || ''} onValueChange={field.onChange} />
                       </div>
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
 
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="city"
                 render={({ field }) => (
-                  <FormItem_Shadcn_ className="w-full md:flex-1">
-                    <FormLabel_Shadcn_ className="text-foreground">City *</FormLabel_Shadcn_>
-                    <FormControl_Shadcn_>
+                  <FormItem className="w-full md:flex-1">
+                    <FormLabel className="text-foreground">City *</FormLabel>
+                    <FormControl>
                       <div className="relative mt-1">
                         <Input_Shadcn_ type="text" placeholder="City" {...field} />
                       </div>
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
             </div>
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="monthly_commitment"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_ className="text-foreground">
-                    Monthly Commitment
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                <FormItem>
+                  <FormLabel className="text-foreground">Monthly Commitment</FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     How many hours can you commit per month? If not sure, leave blank.
-                  </FormDescription_Shadcn_>
-                  <FormControl_Shadcn_>
+                  </FormDescription>
+                  <FormControl>
                     <div className="relative mt-1">
                       <Input_Shadcn_ {...field} />
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={form.control}
               name="languages_spoken"
               render={({ field }) => (
-                <FormItem_Shadcn_>
-                  <FormLabel_Shadcn_ className="text-foreground">
-                    Languages spoken *
-                  </FormLabel_Shadcn_>
-                  <FormDescription_Shadcn_ className="text-foreground-lighter">
+                <FormItem>
+                  <FormLabel className="text-foreground">Languages spoken *</FormLabel>
+                  <FormDescription className="text-foreground-lighter">
                     What languages do you speak?
-                  </FormDescription_Shadcn_>
-                  <FormControl_Shadcn_>
+                  </FormDescription>
+                  <FormControl>
                     <div className="relative mt-1">
                       <MultiSelector
                         onValuesChange={field.onChange}
@@ -490,9 +485,9 @@ const FormContent = memo(function FormContent({
                         </MultiSelectorContent>
                       </MultiSelector>
                     </div>
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
           </div>
@@ -503,51 +498,51 @@ const FormContent = memo(function FormContent({
             <h3 className="h4 text-foreground">Social Links</h3>
 
             <div className="space-y-3">
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="discord"
                 render={({ field }) => (
-                  <FormItem_Shadcn_>
-                    <FormLabel_Shadcn_ className="text-foreground">Discord</FormLabel_Shadcn_>
-                    <FormControl_Shadcn_>
+                  <FormItem>
+                    <FormLabel className="text-foreground">Discord</FormLabel>
+                    <FormControl>
                       <div className="relative mt-1">
                         <Input_Shadcn_ type="text" placeholder="#username" {...field} />
                       </div>
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
 
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="github"
                 render={({ field }) => (
-                  <FormItem_Shadcn_>
-                    <FormLabel_Shadcn_ className="text-foreground">GitHub</FormLabel_Shadcn_>
-                    <FormControl_Shadcn_>
+                  <FormItem>
+                    <FormLabel className="text-foreground">GitHub</FormLabel>
+                    <FormControl>
                       <div className="relative mt-1">
                         <Input_Shadcn_ type="text" placeholder="@yourusername" {...field} />
                       </div>
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
 
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="twitter"
                 render={({ field }) => (
-                  <FormItem_Shadcn_>
-                    <FormLabel_Shadcn_ className="text-foreground">Twitter</FormLabel_Shadcn_>
-                    <FormControl_Shadcn_>
+                  <FormItem>
+                    <FormLabel className="text-foreground">Twitter</FormLabel>
+                    <FormControl>
                       <div className="relative mt-1">
                         <Input_Shadcn_ type="text" placeholder="@yourhandle" {...field} />
                       </div>
-                    </FormControl_Shadcn_>
-                    <FormMessage_Shadcn_ />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
             </div>
@@ -583,7 +578,7 @@ const FormContent = memo(function FormContent({
             aria-hidden="true"
           />
         </form>
-      </Form_Shadcn_>
+      </Form>
 
       {Object.values(errors).length > 0 && (
         <Alert variant="destructive" className="mt-6">
diff --git a/apps/www/pages/opt-out/[ref].tsx b/apps/www/pages/opt-out/[ref].tsx
index 0b5b45c7ce..758e54a9dd 100644
--- a/apps/www/pages/opt-out/[ref].tsx
+++ b/apps/www/pages/opt-out/[ref].tsx
@@ -9,9 +9,9 @@ import { useForm } from 'react-hook-form'
 import {
   Button,
   cn,
-  Form_Shadcn_,
-  FormField_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormField,
+  FormMessage,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -145,11 +145,11 @@ export default function OptOutPage() {
           </Admonition>
         )}
 
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="gap-2 max-w-xs flex flex-col">
             <input hidden value={form.getValues('ref')} readOnly {...register('ref')} />
             <input hidden {...register('captchaToken')} />
-            <FormField_Shadcn_
+            <FormField
               name="reason"
               control={form.control}
               render={({ field }) => (
@@ -230,7 +230,7 @@ export default function OptOutPage() {
             <Button htmlType="submit" size="small" disabled={submissionType === 'success'}>
               Report spam
             </Button>
-            <FormMessage_Shadcn_
+            <FormMessage
               className={cn(
                 'border-l pl-3',
                 submissionType === 'error'
@@ -239,9 +239,9 @@ export default function OptOutPage() {
               )}
             >
               {formMessage}
-            </FormMessage_Shadcn_>
+            </FormMessage>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </OptOutLayout>
     </>
   )
diff --git a/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx b/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
index 322baed951..83a607f82e 100644
--- a/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
+++ b/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
@@ -14,13 +14,13 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Input_Shadcn_,
 } from 'ui'
 import { DialogHeader } from 'ui/src/components/shadcn/ui/dialog'
@@ -47,9 +47,9 @@ export interface TextConfirmModalProps {
     description?: string | ReactNode
   }
   input?: React.ComponentProps<typeof Input_Shadcn_>
-  label?: React.ComponentProps<typeof FormLabel_Shadcn_>
-  formMessage?: React.ComponentProps<typeof FormMessage_Shadcn_>
-  description?: React.ComponentProps<typeof FormDescription_Shadcn_>
+  label?: React.ComponentProps<typeof FormLabel>
+  formMessage?: React.ComponentProps<typeof FormMessage>
+  description?: React.ComponentProps<typeof FormDescription>
   blockDeleteButton?: boolean
   errorMessage?: string
   enableCopy?: boolean
@@ -163,18 +163,18 @@ export const TextConfirmModal = forwardRef<
               <DialogSectionSeparator />
             </>
           )}
-          <Form_Shadcn_ {...form}>
+          <Form {...form}>
             <form
               autoComplete="off"
               onSubmit={form.handleSubmit(onSubmit)}
               className="px-5 flex flex-col gap-y-3 pt-3"
             >
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="confirmValue"
                 render={({ field }) => (
-                  <FormItem_Shadcn_ className="flex flex-col gap-y-2">
-                    <FormLabel_Shadcn_ {...label} enableSelection={!enableCopy}>
+                  <FormItem className="flex flex-col gap-y-2">
+                    <FormLabel {...label} enableSelection={!enableCopy}>
                       Type{' '}
                       {enableCopy ? (
                         <Button
@@ -196,18 +196,18 @@ export const TextConfirmModal = forwardRef<
                         </span>
                       )}{' '}
                       to confirm.
-                    </FormLabel_Shadcn_>
-                    <FormControl_Shadcn_>
+                    </FormLabel>
+                    <FormControl>
                       <Input_Shadcn_
                         autoComplete="off"
                         placeholder={confirmPlaceholder}
                         {...input}
                         {...field}
                       />
-                    </FormControl_Shadcn_>
-                    {!!description && <FormDescription_Shadcn_ {...description} />}
-                    <FormMessage_Shadcn_ {...formMessage} />
-                  </FormItem_Shadcn_>
+                    </FormControl>
+                    {!!description && <FormDescription {...description} />}
+                    <FormMessage {...formMessage} />
+                  </FormItem>
                 )}
               />
               <div className="flex gap-2">
@@ -235,7 +235,7 @@ export const TextConfirmModal = forwardRef<
                 </Button>
               </div>
             </form>
-          </Form_Shadcn_>
+          </Form>
         </DialogContent>
       </Dialog>
     )
diff --git a/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx b/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx
index 934df17fde..54b21ba799 100644
--- a/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx
+++ b/packages/ui-patterns/src/form/FormItemLayout/FormItemLayout.tsx
@@ -1,5 +1,5 @@
 import { ElementRef, forwardRef } from 'react'
-import { FormItem_Shadcn_ } from 'ui'
+import { FormItem } from 'ui'
 
 import { FormLayout } from '../Layout/FormLayout'
 
@@ -8,11 +8,11 @@ const FormItemLayout = forwardRef<
   React.ComponentPropsWithoutRef<typeof FormLayout> // Use any as placeholder types
 >(({ ...props }, ref) => {
   return (
-    <FormItem_Shadcn_>
+    <FormItem>
       <FormLayout ref={ref} isReactForm {...props}>
         {props.children}
       </FormLayout>
-    </FormItem_Shadcn_>
+    </FormItem>
   )
 })
 
diff --git a/packages/ui-patterns/src/form/FormLayout2.tsx b/packages/ui-patterns/src/form/FormLayout2.tsx
index 2993c38208..c7056e5562 100644
--- a/packages/ui-patterns/src/form/FormLayout2.tsx
+++ b/packages/ui-patterns/src/form/FormLayout2.tsx
@@ -5,9 +5,9 @@ import {
   Badge,
   Button,
   Checkbox_Shadcn_,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
+  Form,
+  FormControl,
+  FormField,
   RadioGroup_Shadcn_,
   RadioGroupItem_Shadcn_,
   Select_Shadcn_,
@@ -111,10 +111,10 @@ export const Page = () => {
           <SheetTitle>Create a function</SheetTitle>
           <SheetDescription>Create a function</SheetDescription>
         </SheetHeader>
-        <Form_Shadcn_ {...form}>
+        <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <SheetSection>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="username"
                 render={({ field }) => (
@@ -127,9 +127,9 @@ export const Page = () => {
                       <InfoTooltip side="right">You can also rename this later.</InfoTooltip>
                     }
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input placeholder="Name of function" {...field} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -194,7 +194,7 @@ export const Page = () => {
               )}
             /> */}
             <SheetSection>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="switch_option"
                 render={({ field }) => (
@@ -204,16 +204,16 @@ export const Page = () => {
                     description="This is an explanation."
                     layout="flex"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Switch checked={field.value} onCheckedChange={field.onChange} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
             </SheetSection>
             <Separator />
             <SheetSection>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="email"
                 render={({ field }) => (
@@ -223,14 +223,14 @@ export const Page = () => {
                     layout="horizontal"
                   >
                     <Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl_Shadcn_ className="w-full">
+                      <FormControl className="w-full">
                         <SelectTrigger_Shadcn_ className="w-full">
                           <SelectValue_Shadcn_
                             placeholder="Select a verified email"
                             className="flex gap-2"
                           />
                         </SelectTrigger_Shadcn_>
-                      </FormControl_Shadcn_>
+                      </FormControl>
                       <SelectContent_Shadcn_>
                         <SelectItem_Shadcn_ value="m@example.com">
                           <div className="flex gap-2 items-center">
@@ -260,7 +260,7 @@ export const Page = () => {
             <Separator />
 
             <SheetSection>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="kevins_input"
                 render={({ field }) => (
@@ -271,13 +271,13 @@ export const Page = () => {
                     layout="vertical"
                     labelOptional="Optional"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Input
                         icon={<Box strokeWidth={1.5} size={16} />}
                         placeholder="Needs to be 6 long"
                         {...field}
                       />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -286,7 +286,7 @@ export const Page = () => {
             <Separator />
 
             <SheetSection>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="consistent_settings"
                 render={({ field }) => (
@@ -301,9 +301,9 @@ export const Page = () => {
                     description="This is your public display name."
                     layout="flex"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -312,7 +312,7 @@ export const Page = () => {
             <Separator />
 
             <SheetSection>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="items"
                 render={() => (
@@ -329,7 +329,7 @@ export const Page = () => {
                 </FormDescription>
               </div> */}
                     {items.map((item) => (
-                      <FormField_Shadcn_
+                      <FormField
                         key={item.id}
                         control={form.control}
                         name="items"
@@ -342,7 +342,7 @@ export const Page = () => {
                               layout="flex"
                               hideMessage
                             >
-                              <FormControl_Shadcn_>
+                              <FormControl>
                                 <Checkbox_Shadcn_
                                   checked={field.value?.includes(item.id)}
                                   onCheckedChange={(checked) => {
@@ -353,7 +353,7 @@ export const Page = () => {
                                         )
                                   }}
                                 />
-                              </FormControl_Shadcn_>
+                              </FormControl>
                             </FormItemLayout>
                           )
                         }}
@@ -366,7 +366,7 @@ export const Page = () => {
             </SheetSection>
 
             <SheetSection>
-              <FormField_Shadcn_
+              <FormField
                 control={form.control}
                 name="type"
                 render={({ field }) => (
@@ -376,7 +376,7 @@ export const Page = () => {
                     description="I am descript"
                     layout="horizontal"
                   >
-                    <FormControl_Shadcn_>
+                    <FormControl>
                       <RadioGroup_Shadcn_
                         onValueChange={field.onChange}
                         defaultValue={field.value}
@@ -388,9 +388,9 @@ export const Page = () => {
                           layout="flex"
                           hideMessage
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <RadioGroupItem_Shadcn_ value="all" />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                         <FormItemLayout
                           className="flex items-center space-x-3 space-y-0"
@@ -398,9 +398,9 @@ export const Page = () => {
                           layout="flex"
                           hideMessage
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <RadioGroupItem_Shadcn_ value="mentions" />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                         <FormItemLayout
                           className="flex items-center space-x-3 space-y-0"
@@ -408,12 +408,12 @@ export const Page = () => {
                           layout="flex"
                           hideMessage
                         >
-                          <FormControl_Shadcn_>
+                          <FormControl>
                             <RadioGroupItem_Shadcn_ value="none" />
-                          </FormControl_Shadcn_>
+                          </FormControl>
                         </FormItemLayout>
                       </RadioGroup_Shadcn_>
-                    </FormControl_Shadcn_>
+                    </FormControl>
                   </FormItemLayout>
                 )}
               />
@@ -423,7 +423,7 @@ export const Page = () => {
               <Button htmlType="submit">Submit</Button>
             </SheetFooter>
           </form>
-        </Form_Shadcn_>
+        </Form>
       </SheetContent>
     </Sheet>
   )
diff --git a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx
index b95f805916..ee63db76dd 100644
--- a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx
+++ b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.test.tsx
@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form'
 import { describe, expect, it, vi } from 'vitest'
 import { z } from 'zod'
 
-import { Button, Form_Shadcn_ } from 'ui'
+import { Button, Form } from 'ui'
 
 import { KeyValueFieldArray, type KeyValueFieldArrayAction } from './KeyValueFieldArray'
 
@@ -65,7 +65,7 @@ const KeyValueForm = ({
   })
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <KeyValueFieldArray
           control={form.control}
@@ -81,7 +81,7 @@ const KeyValueForm = ({
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
@@ -98,7 +98,7 @@ const NameValueForm = ({
   })
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <KeyValueFieldArray
           control={form.control}
@@ -113,7 +113,7 @@ const NameValueForm = ({
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
diff --git a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
index ae94f6ab66..b30f9d6794 100644
--- a/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
+++ b/packages/ui-patterns/src/form/KeyValueFieldArray/KeyValueFieldArray.tsx
@@ -17,10 +17,10 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormMessage_Shadcn_,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
   Input_Shadcn_,
 } from 'ui'
 
@@ -81,7 +81,7 @@ const appendRows = <
  * Rendering-only field array for text/text pairs.
  *
  * Consumers own validation in their resolver schema and can rely on the nested
- * `FormMessage_Shadcn_` instances here to display per-cell errors.
+ * `FormMessage` instances here to display per-cell errors.
  */
 export const KeyValueFieldArray = <
   TFieldValues extends FieldValues,
@@ -126,12 +126,12 @@ export const KeyValueFieldArray = <
       <div className={rowsClassName}>
         {typedFields.map((field, index) => (
           <div key={field.fieldId} className={cn('flex items-start space-x-2', rowClassName)}>
-            <FormField_Shadcn_
+            <FormField
               control={control}
               name={toFieldPath<TFieldValues>(`${name}.${index}.${keyFieldName}`)}
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex-1">
-                  <FormControl_Shadcn_>
+                <FormItem className="flex-1">
+                  <FormControl>
                     <Input_Shadcn_
                       {...field}
                       size={inputSize}
@@ -139,18 +139,18 @@ export const KeyValueFieldArray = <
                       placeholder={keyPlaceholder}
                       disabled={disabled}
                     />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
-            <FormField_Shadcn_
+            <FormField
               control={control}
               name={toFieldPath<TFieldValues>(`${name}.${index}.${valueFieldName}`)}
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex-1">
-                  <FormControl_Shadcn_>
+                <FormItem className="flex-1">
+                  <FormControl>
                     <Input_Shadcn_
                       {...field}
                       size={inputSize}
@@ -158,9 +158,9 @@ export const KeyValueFieldArray = <
                       placeholder={valuePlaceholder}
                       disabled={disabled}
                     />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index d59acac9c3..ca37496710 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -1,13 +1,6 @@
 import { cva } from 'class-variance-authority'
-import { motion } from 'framer-motion'
 import React from 'react'
-import {
-  cn,
-  FormDescription_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
-  Label_Shadcn_,
-} from 'ui'
+import { cn, FormDescription, FormLabel, FormMessage, Label_Shadcn_ } from 'ui'
 import { SIZE } from 'ui/src/lib/constants'
 
 type Props = {
@@ -301,7 +294,7 @@ export const FormLayout = React.forwardRef<
     const hasLabel = Boolean(label || beforeLabel || afterLabel)
     const renderError =
       isReactForm && !hideMessage ? (
-        <FormMessage_Shadcn_
+        <FormMessage
           className={cn(
             'mt-2 transition-all duration-300 ease-in-out',
             layout === 'flex-row-reverse' && 'mt-0'
@@ -312,13 +305,13 @@ export const FormLayout = React.forwardRef<
 
     const renderDescription =
       description && isReactForm ? (
-        <FormDescription_Shadcn_
+        <FormDescription
           className={cn(DescriptionVariants({ size, layout }))}
           data-formlayout-id={'description'}
           id={`${id}-description`}
         >
           {description}
-        </FormDescription_Shadcn_>
+        </FormDescription>
       ) : description ? (
         <p
           className={cn(DescriptionVariants({ size, layout }), 'text-sm text-foreground-light')}
@@ -371,13 +364,13 @@ export const FormLayout = React.forwardRef<
               data-formlayout-id={'labelContainer'}
             >
               {hasLabel && isReactForm ? (
-                <FormLabel_Shadcn_
+                <FormLabel
                   className="text-foreground flex gap-2 items-center break-words"
                   data-formlayout-id="formLabel"
                   htmlFor={props.name || id}
                 >
                   <LabelContents />
-                </FormLabel_Shadcn_>
+                </FormLabel>
               ) : (
                 <Label_Shadcn_
                   className="text-foreground flex gap-2 items-center break-words leading-normal"
diff --git a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx
index 19bfaa0490..45bd3ccb41 100644
--- a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx
+++ b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.test.tsx
@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form'
 import { describe, expect, it, vi } from 'vitest'
 import { z } from 'zod'
 
-import { Button, Form_Shadcn_ } from 'ui'
+import { Button, Form } from 'ui'
 
 import { SingleValueFieldArray } from './SingleValueFieldArray'
 
@@ -42,7 +42,7 @@ const ValueForm = ({
   })
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <SingleValueFieldArray
           control={form.control}
@@ -56,7 +56,7 @@ const ValueForm = ({
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
@@ -69,7 +69,7 @@ const NameForm = ({ onSubmit = vi.fn() }: { onSubmit?: (values: NameFormValues)
   })
 
   return (
-    <Form_Shadcn_ {...form}>
+    <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <SingleValueFieldArray
           control={form.control}
@@ -83,7 +83,7 @@ const NameForm = ({ onSubmit = vi.fn() }: { onSubmit?: (values: NameFormValues)
         />
         <Button htmlType="submit">Submit</Button>
       </form>
-    </Form_Shadcn_>
+    </Form>
   )
 }
 
diff --git a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx
index 2bcd6b74e9..d01f90f382 100644
--- a/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx
+++ b/packages/ui-patterns/src/form/SingleValueFieldArray/SingleValueFieldArray.tsx
@@ -8,15 +8,7 @@ import {
   FieldValues,
   useFieldArray,
 } from 'react-hook-form'
-import {
-  Button,
-  cn,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormMessage_Shadcn_,
-  Input_Shadcn_,
-} from 'ui'
+import { Button, cn, FormControl, FormField, FormItem, FormMessage, Input_Shadcn_ } from 'ui'
 
 export interface SingleValueFieldArrayProps<
   TFieldValues extends FieldValues,
@@ -97,12 +89,12 @@ export const SingleValueFieldArray = <
       <div className={rowsClassName}>
         {typedFields.map((field, index) => (
           <div key={field.fieldId} className={cn('flex items-start space-x-2', rowClassName)}>
-            <FormField_Shadcn_
+            <FormField
               control={control}
               name={toFieldPath<TFieldValues>(`${name}.${index}.${valueFieldName}`)}
               render={({ field }) => (
-                <FormItem_Shadcn_ className="flex-1">
-                  <FormControl_Shadcn_>
+                <FormItem className="flex-1">
+                  <FormControl>
                     <Input_Shadcn_
                       {...field}
                       size={inputSize}
@@ -111,9 +103,9 @@ export const SingleValueFieldArray = <
                       placeholder={placeholder}
                       disabled={disabled}
                     />
-                  </FormControl_Shadcn_>
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
             />
 
diff --git a/packages/ui-patterns/src/form/utils.tsx b/packages/ui-patterns/src/form/utils.tsx
index 0782551b23..6b1449413e 100644
--- a/packages/ui-patterns/src/form/utils.tsx
+++ b/packages/ui-patterns/src/form/utils.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form'
-import { FormControl_Shadcn_, FormField_Shadcn_, FormItem_Shadcn_ } from 'ui'
+import { FormControl, FormField, FormItem } from 'ui'
 
 /**
  * Handles react-hook-form field type for FormItem<name> components
@@ -16,12 +16,12 @@ export interface FormItemProps<
  * Repeatable wrapper for FormItem<name> components
  */
 const FormItemWrapper = forwardRef<
-  ElementRef<typeof FormItem_Shadcn_>,
-  ComponentPropsWithoutRef<typeof FormItem_Shadcn_> // Use any as placeholder types
+  ElementRef<typeof FormItem>,
+  ComponentPropsWithoutRef<typeof FormItem> // Use any as placeholder types
 >(({ ...props }, ref) => (
-  <FormItem_Shadcn_ ref={ref} {...props}>
-    <FormControl_Shadcn_>{props.children}</FormControl_Shadcn_>
-  </FormItem_Shadcn_>
+  <FormItem ref={ref} {...props}>
+    <FormControl>{props.children}</FormControl>
+  </FormItem>
 ))
 
 FormItemWrapper.displayName = 'FormItemWrapper'
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index efbc29f3f1..e8daf81363 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -130,19 +130,7 @@ export {
   FieldTitle as FieldTitle_Shadcn_,
 } from './src/components/shadcn/ui/field'
 
-export {
-  useFormField as useFormField_Shadcn_,
-  Form as Form_Shadcn_,
-  FormItem as FormItem_Shadcn_,
-  FormLabel as FormLabel_Shadcn_,
-  FormControl as FormControl_Shadcn_,
-  FormDescription as FormDescription_Shadcn_,
-  FormMessage as FormMessage_Shadcn_,
-  FormField as FormField_Shadcn_,
-  useWatch as useWatch_Shadcn_,
-  FormInputGroupInput,
-  FormInputGroupTextArea,
-} from './src/components/shadcn/ui/form'
+export * from './src/components/shadcn/ui/form'
 
 export {
   Popover as Popover_Shadcn_,
diff --git a/packages/ui/src/components/shadcn/ui/input-group.tsx b/packages/ui/src/components/shadcn/ui/input-group.tsx
index 404f8c37dc..5249b24a80 100644
--- a/packages/ui/src/components/shadcn/ui/input-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/input-group.tsx
@@ -8,20 +8,20 @@ import { Textarea, type TextareaProps } from './textarea'
 
 interface InputGroupProps extends React.ComponentProps<'div'> {
   /**
-   * This props is passed in by <FormControl_Shadcn_> but they should be applied on the input itself. When using
-   * <InputGroup> inside a <Form_Shadcn_>, use <FormInputGroupInput> and <FormInputGroupTextArea> instead of the
+   * This props is passed in by <FormControl> but they should be applied on the input itself. When using
+   * <InputGroup> inside a <Form>, use <FormInputGroupInput> and <FormInputGroupTextArea> instead of the
    * regular <Input> and <Textarea> components.
    */
   id?: string
   /**
-   * This props is passed in by <FormControl_Shadcn_> but they should be applied on the input itself. When using
-   * <InputGroup> inside a <Form_Shadcn_>, use <FormInputGroupInput> and <FormInputGroupTextArea> instead of the
+   * This props is passed in by <FormControl> but they should be applied on the input itself. When using
+   * <InputGroup> inside a <Form>, use <FormInputGroupInput> and <FormInputGroupTextArea> instead of the
    * regular <Input> and <Textarea> components.
    */
   'aria-invalid'?: React.AriaAttributes['aria-invalid']
   /**
-   * This props is passed in by <FormControl_Shadcn_> but they should be applied on the input itself. When using
-   * <InputGroup> inside a <Form_Shadcn_>, use <FormInputGroupInput> and <FormInputGroupTextArea> instead of the
+   * This props is passed in by <FormControl> but they should be applied on the input itself. When using
+   * <InputGroup> inside a <Form>, use <FormInputGroupInput> and <FormInputGroupTextArea> instead of the
    * regular <Input> and <Textarea> components.
    */
   'aria-describedby'?: string
@@ -29,7 +29,7 @@ interface InputGroupProps extends React.ComponentProps<'div'> {
 
 /*
  * Used to group input elements together with addons like labels, buttons, or text. When using this component
- * inside a <Form_Shadcn_>, use FormInputGroupInput and FormInputGroupTextArea instead of the regular Input
+ * inside a <Form>, use FormInputGroupInput and FormInputGroupTextArea instead of the regular Input
  * and Textarea components to ensure proper form field association and accessibility.
  */
 function InputGroup({
@@ -157,7 +157,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
 }
 
 /*
- * If you need to use this component inside a <Form_Shadcn_>, use FormInputGroupInput instead.
+ * If you need to use this component inside a <Form>, use FormInputGroupInput instead.
  */
 function InputGroupInput({ className, ...props }: InputProps) {
   return (
@@ -177,7 +177,7 @@ function InputGroupInput({ className, ...props }: InputProps) {
 }
 
 /*
- * If you need to use this component inside a <Form_Shadcn_>, use FormInputGroupTextArea instead.
+ * If you need to use this component inside a <Form>, use FormInputGroupTextArea instead.
  */
 function InputGroupTextarea({ className, ...props }: TextareaProps) {
   return (