diff --git a/apps/docs/src/remix/0.1 Remix Stub.mdx b/apps/docs/src/remix-hook-form/0.1 Remix Stub.mdx
similarity index 100%
rename from apps/docs/src/remix/0.1 Remix Stub.mdx
rename to apps/docs/src/remix-hook-form/0.1 Remix Stub.mdx
diff --git a/apps/docs/src/remix/0.2 Custom Submissions.mdx b/apps/docs/src/remix-hook-form/0.2 Custom Submissions.mdx
similarity index 100%
rename from apps/docs/src/remix/0.2 Custom Submissions.mdx
rename to apps/docs/src/remix-hook-form/0.2 Custom Submissions.mdx
diff --git a/apps/docs/src/remix/remix-checkbox-list.stories.tsx b/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
similarity index 93%
rename from apps/docs/src/remix/remix-checkbox-list.stories.tsx
rename to apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
index abcff10c..71994d77 100644
--- a/apps/docs/src/remix/remix-checkbox-list.stories.tsx
+++ b/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixCheckbox } from '@lambdacurry/forms/remix/remix-checkbox';
+import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { FormMessage } from '@lambdacurry/forms/ui/form';
 import type { ActionFunctionArgs } from '@remix-run/node';
@@ -67,7 +67,7 @@ const ControlledCheckboxListExample = () => {
           <p className="text-sm text-gray-500">Select your favorite colors:</p>
           <div className="grid gap-4">
             {AVAILABLE_COLORS.map(({ value, label }) => (
-              <RemixCheckbox key={value} className="rounded-md border p-4" name={`colors.${value}`} label={label} />
+              <Checkbox key={value} className="rounded-md border p-4" name={`colors.${value}`} label={label} />
             ))}
           </div>
           <FormMessage error={methods.formState.errors.colors?.root?.message} />
@@ -100,9 +100,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Colors selected successfully', selectedColors };
 };
 
-const meta: Meta<typeof RemixCheckbox> = {
-  title: 'Remix/RemixCheckboxList',
-  component: RemixCheckbox,
+const meta: Meta<typeof Checkbox> = {
+  title: 'RemixHookForm/CheckboxList',
+  component: Checkbox,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -113,7 +113,7 @@ const meta: Meta<typeof RemixCheckbox> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixCheckbox>;
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -162,4 +162,4 @@ export const Tests: Story = {
     await testErrorState(storyContext);
     await testColorSelection(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-checkbox.stories.tsx b/apps/docs/src/remix-hook-form/checkbox.stories.tsx
similarity index 85%
rename from apps/docs/src/remix/remix-checkbox.stories.tsx
rename to apps/docs/src/remix-hook-form/checkbox.stories.tsx
index 99264cd1..0b44fa67 100644
--- a/apps/docs/src/remix/remix-checkbox.stories.tsx
+++ b/apps/docs/src/remix-hook-form/checkbox.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixCheckbox } from '@lambdacurry/forms/remix/remix-checkbox';
+import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
@@ -38,14 +38,14 @@ const ControlledCheckboxExample = () => {
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="grid gap-4">
-          <RemixCheckbox className="rounded-md border p-4" name="terms" label="Accept terms and conditions" />
-          <RemixCheckbox
+          <Checkbox className="rounded-md border p-4" name="terms" label="Accept terms and conditions" />
+          <Checkbox
             className="rounded-md border p-4"
             name="marketing"
             label="Receive marketing emails"
             description="We will send you hourly updates about our products"
           />
-          <RemixCheckbox className="rounded-md border p-4" name="required" label="This is a required checkbox" />
+          <Checkbox className="rounded-md border p-4" name="required" label="This is a required checkbox" />
         </div>
         <Button type="submit" className="mt-4">
           Submit
@@ -66,9 +66,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Form submitted successfully' };
 };
 
-const meta: Meta<typeof RemixCheckbox> = {
-  title: 'Remix/RemixCheckbox',
-  component: RemixCheckbox,
+const meta: Meta<typeof Checkbox> = {
+  title: 'RemixHookForm/Checkbox',
+  component: Checkbox,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -79,7 +79,7 @@ const meta: Meta<typeof RemixCheckbox> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixCheckbox>;
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -142,9 +142,9 @@ export const Tests: Story = {
       <RemixFormProvider {...methods}>
         <fetcher.Form onSubmit={methods.handleSubmit} method="post" action="/">
           <div className='grid gap-4'>
-            <RemixCheckbox className='rounded-md border p-4' name="terms" label="Accept terms and conditions" />
-            <RemixCheckbox className='rounded-md border p-4' name="marketing" label="Receive marketing emails" description="We will send you hourly updates about our products" />
-            <RemixCheckbox className='rounded-md border p-4' name="required" label="This is a required checkbox" />
+            <Checkbox className='rounded-md border p-4' name="terms" label="Accept terms and conditions" />
+            <Checkbox className='rounded-md border p-4' name="marketing" label="Receive marketing emails" description="We will send you hourly updates about our products" />
+            <Checkbox className='rounded-md border p-4' name="required" label="This is a required checkbox" />
           </div>
           <Button type="submit" className="mt-4">
             Submit
@@ -162,4 +162,4 @@ export const Tests: Story = {
     await testInvalidSubmission(storyContext);
     await testValidSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-date-picker.stories.tsx b/apps/docs/src/remix-hook-form/date-picker.stories.tsx
similarity index 89%
rename from apps/docs/src/remix/remix-date-picker.stories.tsx
rename to apps/docs/src/remix-hook-form/date-picker.stories.tsx
index 4158456b..4d81e456 100644
--- a/apps/docs/src/remix/remix-date-picker.stories.tsx
+++ b/apps/docs/src/remix-hook-form/date-picker.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixDatePicker } from '@lambdacurry/forms/remix/remix-date-picker';
+import { DatePicker } from '@lambdacurry/forms/remix-hook-form/date-picker';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { Form, useFetcher } from '@remix-run/react';
@@ -15,7 +15,7 @@ const formSchema = z.object({
 
 type FormData = z.infer<typeof formSchema>;
 
-const RemixDatePickerExample = () => {
+const DatePickerExample = () => {
   const fetcher = useFetcher<{ message?: string }>();
   const methods = useRemixForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -32,7 +32,7 @@ const RemixDatePickerExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixDatePicker name="eventDate" label="Event Date" description="Choose the date for your event." />
+        <DatePicker name="eventDate" label="Event Date" description="Choose the date for your event." />
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -57,20 +57,20 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixDatePicker> = {
-  title: 'Remix/RemixDatePicker',
-  component: RemixDatePicker,
+const meta: Meta<typeof DatePicker> = {
+  title: 'RemixHookForm/DatePicker',
+  component: DatePicker,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
     withRemixStubDecorator({
       root: {
-        Component: RemixDatePickerExample,
+        Component: DatePickerExample,
         action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
       },
     }),
   ],
-} satisfies Meta<typeof RemixDatePicker>;
+} satisfies Meta<typeof DatePicker>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -119,4 +119,4 @@ export const Tests: Story = {
     await testDateSelection(storyContext);
     await testSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-dropdown-menu-select.stories.tsx b/apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx
similarity index 91%
rename from apps/docs/src/remix/remix-dropdown-menu-select.stories.tsx
rename to apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx
index 5102a1d5..9e26be86 100644
--- a/apps/docs/src/remix/remix-dropdown-menu-select.stories.tsx
+++ b/apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixDropdownMenuSelect } from '@lambdacurry/forms/remix/remix-dropdown-menu-select';
+import { DropdownMenuSelect } from '@lambdacurry/forms/remix-hook-form/dropdown-menu-select';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { DropdownMenuItem } from '@lambdacurry/forms/ui/dropdown-menu';
 import type { ActionFunctionArgs } from '@remix-run/node';
@@ -18,7 +18,7 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 // Component for the form
-const RemixDropdownMenuSelectExample = () => {
+const DropdownMenuSelectExample = () => {
   const fetcher = useFetcher<{ message?: string }>();
   const methods = useRemixForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -35,7 +35,7 @@ const RemixDropdownMenuSelectExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixDropdownMenuSelect
+        <DropdownMenuSelect
           name="favoriteColor"
           label="Favorite Color"
           description="Choose your favorite color."
@@ -44,7 +44,7 @@ const RemixDropdownMenuSelectExample = () => {
           <DropdownMenuItem onSelect={() => methods.setValue('favoriteColor', 'Red')}>Red</DropdownMenuItem>
           <DropdownMenuItem onSelect={() => methods.setValue('favoriteColor', 'Green')}>Green</DropdownMenuItem>
           <DropdownMenuItem onSelect={() => methods.setValue('favoriteColor', 'Blue')}>Blue</DropdownMenuItem>
-        </RemixDropdownMenuSelect>
+        </DropdownMenuSelect>
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -69,20 +69,20 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixDropdownMenuSelect> = {
-  title: 'Remix/RemixDropdownMenuSelect',
-  component: RemixDropdownMenuSelect,
+const meta: Meta<typeof DropdownMenuSelect> = {
+  title: 'RemixHookForm/DropdownMenuSelect',
+  component: DropdownMenuSelect,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
     withRemixStubDecorator({
       root: {
-        Component: RemixDropdownMenuSelectExample,
+        Component: DropdownMenuSelectExample,
         action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
       },
     }),
   ],
-} satisfies Meta<typeof RemixDropdownMenuSelect>;
+} satisfies Meta<typeof DropdownMenuSelect>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -140,4 +140,4 @@ export const Tests: Story = {
     await testColorSelection(storyContext);
     await testValidSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-otp-input.stories.tsx b/apps/docs/src/remix-hook-form/otp-input.stories.tsx
similarity index 92%
rename from apps/docs/src/remix/remix-otp-input.stories.tsx
rename to apps/docs/src/remix-hook-form/otp-input.stories.tsx
index 3c5fe430..2187f63b 100644
--- a/apps/docs/src/remix/remix-otp-input.stories.tsx
+++ b/apps/docs/src/remix-hook-form/otp-input.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixOTPInputField } from '@lambdacurry/forms/remix/remix-otp-input';
+import { OTPInput } from '@lambdacurry/forms/remix-hook-form/otp-input';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { Form, useFetcher } from '@remix-run/react';
@@ -33,7 +33,7 @@ const RemixOTPInputExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixOTPInputField
+        <OTPInput
           name="otp"
           label="One-Time Password"
           description="Enter the 6-digit code sent to your phone."
@@ -63,9 +63,9 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixOTPInputField> = {
-  title: 'Remix/RemixOTPInput',
-  component: RemixOTPInputField,
+const meta: Meta<typeof OTPInput> = {
+  title: 'RemixHookForm/OTPInput',
+  component: OTPInput,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -76,7 +76,7 @@ const meta: Meta<typeof RemixOTPInputField> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixOTPInputField>;
+} satisfies Meta<typeof OTPInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -105,4 +105,4 @@ export const Tests: Story = {
     await testIncompleteSubmission(storyContext);
     await testSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-radio-group.stories.tsx b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
similarity index 92%
rename from apps/docs/src/remix/remix-radio-group.stories.tsx
rename to apps/docs/src/remix-hook-form/radio-group.stories.tsx
index 8d4ddefe..249828be 100644
--- a/apps/docs/src/remix/remix-radio-group.stories.tsx
+++ b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixRadioGroupField } from '@lambdacurry/forms/remix/remix-radio-group';
+import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
 import type { ActionFunctionArgs } from '@remix-run/node';
@@ -35,7 +35,7 @@ const RemixRadioGroupExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixRadioGroupField
+        <RadioGroup
           name="plan"
           label="Select a plan"
           description="Choose the plan that best fits your needs."
@@ -53,7 +53,7 @@ const RemixRadioGroupExample = () => {
             <RadioGroupItem value="enterprise" id="enterprise" />
             <label htmlFor="enterprise">Enterprise</label>
           </div>
-        </RemixRadioGroupField>
+        </RadioGroup>
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -77,9 +77,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Plan selected successfully' };
 };
 
-const meta: Meta<typeof RemixRadioGroupField> = {
-  title: 'Remix/RemixRadioGroup',
-  component: RemixRadioGroupField,
+const meta: Meta<typeof RadioGroup> = {
+  title: 'RemixHookForm/RadioGroup',
+  component: RadioGroup,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -90,7 +90,7 @@ const meta: Meta<typeof RemixRadioGroupField> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixRadioGroupField>;
+} satisfies Meta<typeof RadioGroup>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -121,4 +121,4 @@ export const Tests: Story = {
     await testRadioGroupSelection(storyContext);
     await testSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-switch.stories.tsx b/apps/docs/src/remix-hook-form/switch.stories.tsx
similarity index 89%
rename from apps/docs/src/remix/remix-switch.stories.tsx
rename to apps/docs/src/remix-hook-form/switch.stories.tsx
index 1e7f304d..cd627483 100644
--- a/apps/docs/src/remix/remix-switch.stories.tsx
+++ b/apps/docs/src/remix-hook-form/switch.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixSwitch } from '@lambdacurry/forms/remix/remix-switch';
+import { Switch } from '@lambdacurry/forms/remix-hook-form/switch';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
@@ -36,8 +36,8 @@ const ControlledSwitchExample = () => {
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="grid gap-4">
-          <RemixSwitch name="notifications" label="Enable notifications" />
-          <RemixSwitch name="darkMode" label="Dark mode" description="Toggle dark mode for the application" />
+          <Switch name="notifications" label="Enable notifications" />
+          <Switch name="darkMode" label="Dark mode" description="Toggle dark mode for the application" />
         </div>
         <Button type="submit" className="mt-4">
           Submit
@@ -58,9 +58,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Settings updated successfully' };
 };
 
-const meta: Meta<typeof RemixSwitch> = {
-  title: 'Remix/RemixSwitch',
-  component: RemixSwitch,
+const meta: Meta<typeof Switch> = {
+  title: 'RemixHookForm/Switch',
+  component: Switch,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -71,7 +71,7 @@ const meta: Meta<typeof RemixSwitch> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixSwitch>;
+} satisfies Meta<typeof Switch>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -117,4 +117,4 @@ export const Tests: Story = {
     await testToggleSwitches(storyContext);
     await testSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-text-field.stories.tsx b/apps/docs/src/remix-hook-form/text-field.stories.tsx
similarity index 93%
rename from apps/docs/src/remix/remix-text-field.stories.tsx
rename to apps/docs/src/remix-hook-form/text-field.stories.tsx
index 2dc7c3d3..52cfa183 100644
--- a/apps/docs/src/remix/remix-text-field.stories.tsx
+++ b/apps/docs/src/remix-hook-form/text-field.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixTextField } from '@lambdacurry/forms/remix/remix-text-field';
+import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
@@ -37,7 +37,7 @@ const ControlledTextFieldExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
-        <RemixTextField name="username" label="Username" description="Enter a unique username" />
+        <TextField name="username" label="Username" description="Enter a unique username" />
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -75,9 +75,9 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixTextField> = {
-  title: 'Remix/RemixTextField',
-  component: RemixTextField,
+const meta: Meta<typeof TextField> = {
+  title: 'RemixHookForm/TextField',
+  component: TextField,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -93,7 +93,7 @@ const meta: Meta<typeof RemixTextField> = {
       ],
     }),
   ],
-} satisfies Meta<typeof RemixTextField>;
+} satisfies Meta<typeof TextField>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -155,4 +155,4 @@ export const Tests: Story = {
     await testUsernameTaken(storyContext);
     await testValidSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/apps/docs/src/remix/remix-textarea.stories.tsx b/apps/docs/src/remix-hook-form/textarea.stories.tsx
similarity index 92%
rename from apps/docs/src/remix/remix-textarea.stories.tsx
rename to apps/docs/src/remix-hook-form/textarea.stories.tsx
index e6658f93..773ef9b2 100644
--- a/apps/docs/src/remix/remix-textarea.stories.tsx
+++ b/apps/docs/src/remix-hook-form/textarea.stories.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixTextarea } from '@lambdacurry/forms/remix/remix-textarea';
+import { Textarea } from '@lambdacurry/forms/remix-hook-form/textarea';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
@@ -36,7 +36,7 @@ const ControlledTextareaExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
-        <RemixTextarea name="comment" label="Comment" description="Enter your comment (minimum 10 characters)" />
+        <Textarea name="comment" label="Comment" description="Enter your comment (minimum 10 characters)" />
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -74,9 +74,9 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixTextarea> = {
-  title: 'Remix/RemixTextarea',
-  component: RemixTextarea,
+const meta: Meta<typeof Textarea> = {
+  title: 'RemixHookForm/Textarea',
+  component: Textarea,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -87,7 +87,7 @@ const meta: Meta<typeof RemixTextarea> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixTextarea>;
+} satisfies Meta<typeof Textarea>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -142,4 +142,4 @@ export const Tests: Story = {
     await testBlockedContent(storyContext);
     await testValidSubmission(storyContext);
   },
-};
+};
\ No newline at end of file
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
deleted file mode 100644
index 9cfd6693..00000000
--- a/packages/components/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './ui';
-export * from './remix';
diff --git a/packages/components/src/remix-hook-form/checkbox.tsx b/packages/components/src/remix-hook-form/checkbox.tsx
new file mode 100644
index 00000000..719cb820
--- /dev/null
+++ b/packages/components/src/remix-hook-form/checkbox.tsx
@@ -0,0 +1,18 @@
+import { useRemixFormContext } from 'remix-hook-form';
+import { Checkbox as BaseCheckbox, type CheckboxProps as BaseCheckboxProps } from '../ui/checkbox-field';
+import { FormControl , FormDescription, FormLabel, FormMessage } from './form';
+
+export type CheckboxProps = Omit<BaseCheckboxProps, 'control'>;
+
+export function Checkbox(props: CheckboxProps) {
+  const { control } = useRemixFormContext();
+
+  const components = {
+    FormDescription: FormDescription,
+    FormControl: FormControl,
+    FormLabel: FormLabel,
+    FormMessage: FormMessage,
+  };
+
+  return <BaseCheckbox control={control} {...props} components={components} />;
+}
diff --git a/packages/components/src/remix-hook-form/date-picker.tsx b/packages/components/src/remix-hook-form/date-picker.tsx
new file mode 100644
index 00000000..e19904be
--- /dev/null
+++ b/packages/components/src/remix-hook-form/date-picker.tsx
@@ -0,0 +1,16 @@
+import { useRemixFormContext } from 'remix-hook-form';
+import { DatePickerField as BaseDatePickerField, type DatePickerFieldProps as BaseDatePickerFieldProps } from '../ui/date-picker-field';
+
+export type DatePickerProps = Omit<BaseDatePickerFieldProps, 'control'>;
+
+export function DatePicker({ components, ...props }: DatePickerProps) {
+  const { control } = useRemixFormContext();
+
+  return (
+    <BaseDatePickerField
+      control={control}
+      components={{ ...components }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/components/src/remix-hook-form/dropdown-menu-select.tsx b/packages/components/src/remix-hook-form/dropdown-menu-select.tsx
new file mode 100644
index 00000000..f8764114
--- /dev/null
+++ b/packages/components/src/remix-hook-form/dropdown-menu-select.tsx
@@ -0,0 +1,10 @@
+import { useRemixFormContext } from 'remix-hook-form';
+import { DropdownMenuSelectField as BaseDropdownMenuSelectField, type DropdownMenuSelectProps as BaseDropdownMenuSelectProps } from '../ui/dropdown-menu-select-field';
+
+export type DropdownMenuSelectProps = Omit<BaseDropdownMenuSelectProps, 'control'>;
+
+export function DropdownMenuSelect(props: DropdownMenuSelectProps) {
+  const { control } = useRemixFormContext();
+
+  return <BaseDropdownMenuSelectField control={control} {...props} />;
+}
diff --git a/packages/components/src/remix-hook-form/form.tsx b/packages/components/src/remix-hook-form/form.tsx
new file mode 100644
index 00000000..914f0e4a
--- /dev/null
+++ b/packages/components/src/remix-hook-form/form.tsx
@@ -0,0 +1,75 @@
+// biome-ignore lint/style/noNamespaceImport: prevents React undefined errors when exporting as a component library
+import * as React from 'react';
+import type { FieldValues, KeepStateOptions, UseFormReturn } from 'react-hook-form';
+import { useRemixFormContext } from 'remix-hook-form';
+import { FormControl as BaseFormControl, FormDescription as BaseFormDescription, FormFieldContext as BaseFormFieldContext, FormItemContext as BaseFormItemContext, FormLabel as BaseFormLabel, FormMessage as BaseFormMessage } from '../ui/form';
+
+export interface FormProviderProps<T extends FieldValues>
+  extends Omit<UseFormReturn<T>, 'handleSubmit' | 'reset'> {
+  children: React.ReactNode;
+  handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;
+  reset: (values?: T, keepStateOptions?: KeepStateOptions) => void;
+}
+
+export const useFormField = () => {
+  const fieldContext = React.useContext(BaseFormFieldContext);
+  const itemContext = React.useContext(BaseFormItemContext);
+  const { getFieldState, formState } = useRemixFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField must be used within a <FormField> component. Ensure this hook is called from a component that is a child of FormField.');
+  }
+
+  const { id, formItemId, formDescriptionId, formMessageId } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId,
+    formDescriptionId,
+    formMessageId,
+    ...fieldState,
+  };
+};
+
+export const FormLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof BaseFormLabel>>(
+  (props, ref) => <BaseFormLabel ref={ref} {...props} />,
+);
+FormLabel.displayName = 'FormLabel';
+
+export const FormControl = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof BaseFormControl>>(
+  (props, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (
+      <BaseFormControl
+        ref={ref}
+        error={!!error}
+        formItemId={formItemId}
+        formDescriptionId={formDescriptionId}
+        formMessageId={formMessageId}
+        {...props}
+      />
+    );
+  },
+);
+FormControl.displayName = 'FormControl';
+
+export const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<typeof BaseFormDescription>
+>((props, ref) => {
+  const { formDescriptionId } = useFormField();
+  return <BaseFormDescription ref={ref} formDescriptionId={formDescriptionId} {...props} />;
+});
+FormDescription.displayName = 'FormDescription';
+
+export const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<typeof BaseFormMessage>
+>((props, ref) => {
+  const { error, formMessageId } = useFormField();
+  return <BaseFormMessage ref={ref} formMessageId={formMessageId} error={error?.message || (error ? String(error) : undefined)} {...props} />;
+});
+FormMessage.displayName = 'FormMessage';
\ No newline at end of file
diff --git a/packages/components/src/remix-hook-form/otp-input.tsx b/packages/components/src/remix-hook-form/otp-input.tsx
new file mode 100644
index 00000000..da4d5ccf
--- /dev/null
+++ b/packages/components/src/remix-hook-form/otp-input.tsx
@@ -0,0 +1,15 @@
+import { useRemixFormContext } from 'remix-hook-form';
+import { OTPInputField as BaseOTPInputField, type OTPInputFieldProps as BaseOTPInputFieldProps } from '../ui/otp-input-field';
+
+export type OTPInputFieldProps = Omit<BaseOTPInputFieldProps, 'control'>;
+
+export function OTPInput(props: OTPInputFieldProps) {
+  const { control } = useRemixFormContext();
+  const { name, ...restProps } = props;
+
+  if (!name) {
+    throw new Error('Name is required for OTPInput');
+  }
+
+  return <BaseOTPInputField control={control} name={name} {...restProps} />;
+}
diff --git a/packages/components/src/remix-hook-form/radio-group.tsx b/packages/components/src/remix-hook-form/radio-group.tsx
new file mode 100644
index 00000000..9bb5db88
--- /dev/null
+++ b/packages/components/src/remix-hook-form/radio-group.tsx
@@ -0,0 +1,10 @@
+import { useRemixFormContext } from 'remix-hook-form';
+import { RadioGroupField as BaseRadioGroupField, type RadioGroupFieldProps as BaseRadioGroupFieldProps } from '../ui/radio-group-field';
+
+export type RadioGroupFieldProps = Omit<BaseRadioGroupFieldProps, 'control'>;
+
+export function RadioGroup(props: RadioGroupFieldProps) {
+  const { control } = useRemixFormContext();
+
+  return <BaseRadioGroupField control={control} {...props} />;
+}
diff --git a/packages/components/src/remix-hook-form/switch.tsx b/packages/components/src/remix-hook-form/switch.tsx
new file mode 100644
index 00000000..d03dadef
--- /dev/null
+++ b/packages/components/src/remix-hook-form/switch.tsx
@@ -0,0 +1,32 @@
+import type * as React from 'react';
+import { useRemixFormContext } from 'remix-hook-form';
+import { SwitchField as BaseSwitchField } from '../ui/switch-field';
+import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
+
+export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseSwitchField>, 'control'> {
+  name: string;
+  label?: string;
+  description?: string;
+}
+
+export function Switch({ name, label, description, className, ...props }: SwitchProps) {
+  const { control } = useRemixFormContext();
+
+  const components = {
+    FormDescription: FormDescription,
+    FormControl: FormControl,
+    FormLabel: FormLabel,
+    FormMessage: FormMessage,
+  };
+
+  return (
+    <BaseSwitchField
+      control={control}
+      name={name}
+      label={label}
+      description={description}
+      components={components}
+      {...props}
+    />
+  );
+}
diff --git a/packages/components/src/remix-hook-form/text-field.tsx b/packages/components/src/remix-hook-form/text-field.tsx
new file mode 100644
index 00000000..8db979bb
--- /dev/null
+++ b/packages/components/src/remix-hook-form/text-field.tsx
@@ -0,0 +1,18 @@
+import { useRemixFormContext } from 'remix-hook-form';
+import { TextField as BaseTextField, type TextFieldProps as BaseTextFieldProps } from '../ui/text-field';
+import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
+
+export type TextFieldProps = Omit<BaseTextFieldProps, 'control'>;
+
+export function TextField(props: TextFieldProps) {
+  const { control } = useRemixFormContext();
+
+  const components = {
+    FormControl: FormControl,
+    FormLabel: FormLabel,
+    FormDescription: FormDescription,
+    FormMessage: FormMessage,
+  };
+
+  return <BaseTextField control={control} components={components} {...props} />;
+}
diff --git a/packages/components/src/remix-hook-form/textarea.tsx b/packages/components/src/remix-hook-form/textarea.tsx
new file mode 100644
index 00000000..ae8e217d
--- /dev/null
+++ b/packages/components/src/remix-hook-form/textarea.tsx
@@ -0,0 +1,18 @@
+import { useRemixFormContext } from 'remix-hook-form';
+import { TextareaField as BaseTextareaField, type TextareaFieldProps as BaseTextareaFieldProps } from '../ui/textarea-field';
+import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
+
+export type TextareaProps = Omit<BaseTextareaFieldProps, 'control'>;
+
+export function Textarea(props: TextareaProps) {
+  const { control } = useRemixFormContext();
+
+  const components = {
+    FormControl: FormControl,
+    FormLabel: FormLabel,
+    FormDescription: FormDescription,
+    FormMessage: FormMessage,
+  };
+
+  return <BaseTextareaField control={control} components={components} {...props} />;
+}
diff --git a/packages/components/src/remix/index.ts b/packages/components/src/remix/index.ts
deleted file mode 100644
index 15f916af..00000000
--- a/packages/components/src/remix/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './remix-checkbox';
-export * from './remix-date-picker';
-export * from './remix-dropdown-menu-select';
-export * from './remix-form';
-export * from './remix-otp-input';
-export * from './remix-radio-group';
-export * from './remix-switch';
-export * from './remix-text-field';
-export * from './remix-textarea';
diff --git a/packages/components/src/remix/remix-checkbox.tsx b/packages/components/src/remix/remix-checkbox.tsx
deleted file mode 100644
index f49a6700..00000000
--- a/packages/components/src/remix/remix-checkbox.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { Checkbox, type CheckboxProps } from '../ui/checkbox-field';
-import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-
-export type RemixCheckboxProps = Omit<CheckboxProps, 'control'>;
-
-export function RemixCheckbox(props: RemixCheckboxProps) {
-  const { control } = useRemixFormContext();
-
-  const components = {
-    FormDescription: RemixFormDescription,
-    FormControl: RemixFormControl,
-    FormLabel: RemixFormLabel,
-    FormMessage: RemixFormMessage,
-  };
-
-  return <Checkbox control={control} {...props} components={components} />;
-}
diff --git a/packages/components/src/remix/remix-date-picker.tsx b/packages/components/src/remix/remix-date-picker.tsx
deleted file mode 100644
index 01cf1ffd..00000000
--- a/packages/components/src/remix/remix-date-picker.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { DatePickerField, type DatePickerFieldProps } from '../ui/date-picker-field';
-
-export type RemixDatePickerProps = Omit<DatePickerFieldProps, 'control'>;
-
-export function RemixDatePicker(props: RemixDatePickerProps) {
-  const { control } = useRemixFormContext();
-
-  return <DatePickerField control={control} {...props} />;
-}
diff --git a/packages/components/src/remix/remix-dropdown-menu-select.tsx b/packages/components/src/remix/remix-dropdown-menu-select.tsx
deleted file mode 100644
index 9da336cb..00000000
--- a/packages/components/src/remix/remix-dropdown-menu-select.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { DropdownMenuSelectField, type DropdownMenuSelectProps } from '../ui/dropdown-menu-select-field';
-
-export type RemixDropdownMenuSelectProps = Omit<DropdownMenuSelectProps, 'control'>;
-
-export function RemixDropdownMenuSelect(props: RemixDropdownMenuSelectProps) {
-  const { control } = useRemixFormContext();
-
-  return <DropdownMenuSelectField control={control} {...props} />;
-}
diff --git a/packages/components/src/remix/remix-form.tsx b/packages/components/src/remix/remix-form.tsx
deleted file mode 100644
index 1f23b8e8..00000000
--- a/packages/components/src/remix/remix-form.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// biome-ignore lint/style/noNamespaceImport: prevents React undefined errors when exporting as a component library
-import * as React from 'react';
-import type { FieldValues, KeepStateOptions, UseFormRegister, UseFormReturn } from 'react-hook-form';
-import { useRemixFormContext } from 'remix-hook-form';
-import { FormControl, FormDescription, FormFieldContext, FormItemContext, FormLabel, FormMessage } from '../ui/form';
-
-export interface RemixFormProviderProps<T extends FieldValues>
-  extends Omit<UseFormReturn<T>, 'handleSubmit' | 'reset'> {
-  children: React.ReactNode;
-  handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;
-  register: UseFormRegister<T>;
-  reset: (values?: T, keepStateOptions?: KeepStateOptions) => void;
-}
-
-export const useRemixFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useRemixFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const { id, formItemId, formDescriptionId, formMessageId } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId,
-    formDescriptionId,
-    formMessageId,
-    ...fieldState,
-  };
-};
-
-export const RemixFormLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof FormLabel>>(
-  (props, ref) => <FormLabel ref={ref} {...props} />,
-);
-RemixFormLabel.displayName = 'RemixFormLabel';
-
-export const RemixFormControl = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof FormControl>>(
-  (props, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useRemixFormField();
-    return (
-      <FormControl
-        ref={ref}
-        error={!!error}
-        formItemId={formItemId}
-        formDescriptionId={formDescriptionId}
-        formMessageId={formMessageId}
-        {...props}
-      />
-    );
-  },
-);
-RemixFormControl.displayName = 'RemixFormControl';
-
-export const RemixFormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<typeof FormDescription>
->((props, ref) => {
-  const { formDescriptionId } = useRemixFormField();
-  return <FormDescription ref={ref} formDescriptionId={formDescriptionId} {...props} />;
-});
-RemixFormDescription.displayName = 'RemixFormDescription';
-
-export const RemixFormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<typeof FormMessage>
->((props, ref) => {
-  const { error, formMessageId } = useRemixFormField();
-  return <FormMessage ref={ref} formMessageId={formMessageId} error={error?.message} {...props} />;
-});
-RemixFormMessage.displayName = 'RemixFormMessage';
diff --git a/packages/components/src/remix/remix-otp-input.tsx b/packages/components/src/remix/remix-otp-input.tsx
deleted file mode 100644
index dc09bf3a..00000000
--- a/packages/components/src/remix/remix-otp-input.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { OTPInputField, type OTPInputFieldProps } from '../ui/otp-input-field';
-
-export type RemixOTPInputFieldProps = Omit<OTPInputFieldProps, 'control'>;
-
-export function RemixOTPInputField(props: RemixOTPInputFieldProps) {
-  const { control } = useRemixFormContext();
-  const { name, ...restProps } = props;
-
-  if (!name) {
-    throw new Error('Name is required for Input');
-  }
-
-  return <OTPInputField control={control} name={name} {...restProps} />;
-}
diff --git a/packages/components/src/remix/remix-radio-group.tsx b/packages/components/src/remix/remix-radio-group.tsx
deleted file mode 100644
index 908eab9e..00000000
--- a/packages/components/src/remix/remix-radio-group.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { RadioGroupField, type RadioGroupFieldProps } from '../ui/radio-group-field';
-
-export type RemixRadioGroupFieldProps = Omit<RadioGroupFieldProps, 'control'>;
-
-export function RemixRadioGroupField(props: RemixRadioGroupFieldProps) {
-  const { control } = useRemixFormContext();
-
-  return <RadioGroupField control={control} {...props} />;
-}
diff --git a/packages/components/src/remix/remix-switch.tsx b/packages/components/src/remix/remix-switch.tsx
deleted file mode 100644
index 0140fb8b..00000000
--- a/packages/components/src/remix/remix-switch.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type * as React from 'react';
-import { useRemixFormContext } from 'remix-hook-form';
-import { SwitchField } from '../ui/switch-field';
-import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-
-export interface RemixSwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchField>, 'control'> {
-  name: string;
-  label?: string;
-  description?: string;
-}
-
-export function RemixSwitch({ name, label, description, className, ...props }: RemixSwitchProps) {
-  const { control } = useRemixFormContext();
-
-  const components = {
-    FormDescription: RemixFormDescription,
-    FormControl: RemixFormControl,
-    FormLabel: RemixFormLabel,
-    FormMessage: RemixFormMessage,
-  };
-
-  return (
-    <SwitchField
-      control={control}
-      name={name}
-      label={label}
-      description={description}
-      components={components}
-      {...props}
-    />
-  );
-}
diff --git a/packages/components/src/remix/remix-text-field.tsx b/packages/components/src/remix/remix-text-field.tsx
deleted file mode 100644
index 663f2d22..00000000
--- a/packages/components/src/remix/remix-text-field.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { TextField, type TextFieldProps } from '../ui/text-field';
-import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-
-export type RemixTextFieldProps = Omit<TextFieldProps, 'control'>;
-
-export function RemixTextField(props: RemixTextFieldProps) {
-  const { control } = useRemixFormContext();
-
-  const components = {
-    FormControl: RemixFormControl,
-    FormLabel: RemixFormLabel,
-    FormDescription: RemixFormDescription,
-    FormMessage: RemixFormMessage,
-  };
-
-  return <TextField control={control} components={components} {...props} />;
-}
diff --git a/packages/components/src/remix/remix-textarea.tsx b/packages/components/src/remix/remix-textarea.tsx
deleted file mode 100644
index c87ed660..00000000
--- a/packages/components/src/remix/remix-textarea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { TextareaField, type TextareaFieldProps } from '../ui/textarea-field';
-import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-
-export type RemixTextareaProps = Omit<TextareaFieldProps, 'control'>;
-
-export function RemixTextarea(props: RemixTextareaProps) {
-  const { control } = useRemixFormContext();
-
-  const components = {
-    FormControl: RemixFormControl,
-    FormLabel: RemixFormLabel,
-    FormDescription: RemixFormDescription,
-    FormMessage: RemixFormMessage,
-  };
-
-  return <TextareaField control={control} components={components} {...props} />;
-}