diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 01c6946a..7bc9ce25 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -34,17 +34,6 @@ jobs:
       - name: Install Playwright Chromium
         run: npx playwright install chromium
 
-      - name: Build Storybook
-        run: yarn build-storybook
-
-      - name: Start Storybook server
-        run: yarn workspace @lambdacurry/forms-docs storybook --ci --port 6006 &
-        env:
-          NODE_OPTIONS: --max-old-space-size=4096
-
-      - name: Wait for Storybook to be ready
-        run: npx wait-on http://localhost:6006
-
       - name: Run tests
         run: yarn test
 
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d07ff312..f8b9823a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,7 @@
     "hookform",
     "isbot",
     "lucide",
+    "Nuqs",
     "shadcn",
     "sonner"
   ],
@@ -20,5 +21,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.biome": "explicit",
     "source.organizeImports.biome": "explicit"
-  }
+  },
+  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list", "wrapperClassName"]
 }
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5bd6c758..2376e1b1 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -6,7 +6,9 @@
     "build": "storybook build",
     "build-storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
-    "test": "test-storybook"
+    "serve": "http-server ./storybook-static -p 6006 -s",
+    "test": "start-server-and-test serve http://127.0.0.1:6006 'test-storybook --url http://127.0.0.1:6006'",
+    "test:local": "test-storybook"
   },
   "dependencies": {
     "@lambdacurry/forms": "*",
@@ -28,12 +30,15 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.20",
+    "http-server": "^14.1.1",
     "react": "^19.0.0",
     "react-router": "^7.0.0",
     "react-router-dom": "^7.0.0",
+    "start-server-and-test": "^2.0.11",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
     "vite": "^6.2.2",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "wait-on": "^8.0.3"
   }
 }
diff --git a/apps/docs/src/examples/middleware-example.tsx b/apps/docs/src/examples/middleware-example.tsx
new file mode 100644
index 00000000..10d968bc
--- /dev/null
+++ b/apps/docs/src/examples/middleware-example.tsx
@@ -0,0 +1,79 @@
+// Example of using the new middleware feature in remix-hook-form v7.0.0
+import { Form } from 'react-router';
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as zod from 'zod';
+import { TextField } from '@lambdacurry/forms/remix-hook-form';
+import { getValidatedFormData } from 'remix-hook-form/middleware';
+import type { ActionFunctionArgs } from 'react-router';
+
+// Define schema and types
+const schema = zod.object({
+  name: zod.string().min(1, "Name is required"),
+  email: zod.string().email("Invalid email format").min(1, "Email is required"),
+});
+
+type FormData = zod.infer<typeof schema>;
+const resolver = zodResolver(schema);
+
+// Action function using the new middleware
+export const action = async ({ context }: ActionFunctionArgs) => {
+  // Use the middleware to extract and validate form data
+  const { errors, data, receivedValues } = await getValidatedFormData<FormData>(
+    context,
+    resolver
+  );
+  
+  if (errors) {
+    return { errors, defaultValues: receivedValues };
+  }
+  
+  // Process the validated data
+  console.log('Processing data:', data);
+  
+  return { success: true, data };
+};
+
+// Component
+export default function MiddlewareExample() {
+  const {
+    handleSubmit,
+    formState: { errors },
+    register,
+  } = useRemixForm<FormData>({
+    mode: "onSubmit",
+    resolver,
+  });
+  
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Remix Hook Form v7 Middleware Example</h1>
+      
+      <RemixFormProvider>
+        <Form method="POST" onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <TextField
+              label="Name"
+              {...register("name")}
+              error={errors.name?.message}
+            />
+            
+            <TextField
+              label="Email"
+              type="email"
+              {...register("email")}
+              error={errors.email?.message}
+            />
+            
+            <button 
+              type="submit"
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            >
+              Submit
+            </button>
+          </div>
+        </Form>
+      </RemixFormProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/src/examples/root-example.tsx b/apps/docs/src/examples/root-example.tsx
new file mode 100644
index 00000000..586a1a50
--- /dev/null
+++ b/apps/docs/src/examples/root-example.tsx
@@ -0,0 +1,23 @@
+// Example of setting up the middleware in root.tsx
+import { unstable_extractFormDataMiddleware } from 'remix-hook-form/middleware';
+import { Outlet } from 'react-router-dom';
+
+// Export the middleware for React Router 7
+export const unstable_middleware = [unstable_extractFormDataMiddleware()];
+
+export default function Root() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Remix Hook Form v7 Example</title>
+      </head>
+      <body>
+        <div className="container mx-auto">
+          <Outlet />
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/docs/src/lib/storybook/react-router-stub.tsx b/apps/docs/src/lib/storybook/react-router-stub.tsx
index 6421d7ab..901b3f02 100644
--- a/apps/docs/src/lib/storybook/react-router-stub.tsx
+++ b/apps/docs/src/lib/storybook/react-router-stub.tsx
@@ -7,7 +7,8 @@ import {
   type LoaderFunction,
   type MetaFunction,
   type NonIndexRouteObject,
-  createRoutesStub,
+  RouterProvider,
+  createMemoryRouter,
 } from 'react-router-dom';
 
 export type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
@@ -36,21 +37,49 @@ interface StubIndexRouteObject
 
 interface RemixStubOptions {
   routes: StubRouteObject[];
+  initialPath?: string;
 }
 
 export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorator => {
-  const { routes } = options;
-  return (Story) => {
-    // Map routes to include Story component as fallback if no Component provided
+  const { routes, initialPath = '/' } = options;
+  // This outer function runs once when Storybook loads the story meta
+
+  return (Story, context) => {
+    // This inner function runs when the story component actually renders
     const mappedRoutes = routes.map((route) => ({
       ...route,
-      Component: route.Component ?? (() => <Story />),
+      Component: route.Component ?? (() => <Story {...context.args} />),
     }));
 
-    // Use more specific type assertion to fix the incompatibility
-    // @ts-ignore - Types from createRoutesStub are incompatible but the code works at runtime
-    const RemixStub = createRoutesStub(mappedRoutes);
+    // Get the base path (without existing query params from options)
+    const basePath = initialPath.split('?')[0];
+    
+    // Get the current search string from the actual browser window, if available
+    // If not available, use a default search string with parameters needed for the data table
+    const currentWindowSearch = typeof window !== 'undefined' 
+      ? window.location.search 
+      : '?page=0&pageSize=10';
+    
+    // Combine them for the initial entry
+    const actualInitialPath = `${basePath}${currentWindowSearch}`;
+
+    // Create a memory router, initializing it with the path derived from the window's search params
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    const router = createMemoryRouter(mappedRoutes as any, {
+      initialEntries: [actualInitialPath], // Use the path combined with window.location.search
+    });
 
-    return <RemixStub initialEntries={['/']} />;
+    return <RouterProvider router={router} />;
   };
 };
+
+/**
+ * A decorator that provides URL state management for stories
+ * Use this when you need URL query parameters in your stories
+ */
+export const withURLState = (initialPath = '/'): Decorator => {
+  return withReactRouterStubDecorator({
+    routes: [{ path: '/' }],
+    initialPath,
+  });
+};
diff --git a/apps/docs/src/remix-hook-form/checkbox-custom.stories.tsx b/apps/docs/src/remix-hook-form/checkbox-custom.stories.tsx
index 94506165..08da48f5 100644
--- a/apps/docs/src/remix-hook-form/checkbox-custom.stories.tsx
+++ b/apps/docs/src/remix-hook-form/checkbox-custom.stories.tsx
@@ -5,7 +5,7 @@ import { Button } from '@lambdacurry/forms/ui/button';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import * as React from 'react';
+import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
@@ -21,62 +21,44 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 // Custom checkbox component
-const PurpleCheckbox = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->((props, ref) => (
+const PurpleCheckbox = (props: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>) => (
   <CheckboxPrimitive.Root
-    ref={ref}
     {...props}
     className="h-8 w-8 rounded-full border-4 border-purple-500 bg-white data-[state=checked]:bg-purple-500"
   >
     {props.children}
   </CheckboxPrimitive.Root>
-));
+);
 PurpleCheckbox.displayName = 'PurpleCheckbox';
 
 // Custom indicator
-const PurpleIndicator = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>
->((props, ref) => (
-  <CheckboxPrimitive.Indicator
-    ref={ref}
-    {...props}
-    className="flex h-full w-full items-center justify-center text-white"
-  >
+const PurpleIndicator = (props: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>) => (
+  <CheckboxPrimitive.Indicator {...props} className="flex h-full w-full items-center justify-center text-white">
     ✓
   </CheckboxPrimitive.Indicator>
-));
+);
 PurpleIndicator.displayName = 'PurpleIndicator';
 
 // Custom form label component
-const CustomLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof FormLabel>>(
-  ({ className, htmlFor, ...props }, ref) => (
-    <label
-      ref={ref}
-      htmlFor={htmlFor}
-      className={`custom-label text-purple-600 font-bold text-lg ${className}`}
-      {...props}
-    >
+const CustomLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => {
+  const { className, htmlFor, ...rest } = props;
+  return (
+    <label htmlFor={htmlFor} className={`custom-label text-purple-600 font-bold text-lg ${className}`} {...rest}>
       {props.children} ★
     </label>
-  ),
-);
+  );
+};
 CustomLabel.displayName = 'CustomLabel';
 
 // Custom error message component
-const CustomErrorMessage = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<typeof FormMessage>>(
-  ({ className, ...props }, ref) => (
-    <p
-      ref={ref}
-      className={`custom-error flex items-center text-red-500 bg-red-100 p-2 rounded-md ${className}`}
-      {...props}
-    >
+const CustomErrorMessage = (props: React.ComponentPropsWithoutRef<typeof FormMessage>) => {
+  const { className, ...rest } = props;
+  return (
+    <p className={`custom-error flex items-center text-red-500 bg-red-100 p-2 rounded-md ${className}`} {...rest}>
       <span className="mr-1 text-lg">⚠️</span> {props.children}
     </p>
-  ),
-);
+  );
+};
 CustomErrorMessage.displayName = 'CustomErrorMessage';
 
 // Example with custom checkbox components
@@ -251,217 +233,133 @@ export const CustomCheckboxComponentExamples: Story = {
     docs: {
       description: {
         story: `
-### Checkbox Component Customization
+### Checkbox Customization Examples
 
-This example demonstrates three different approaches to customizing the Checkbox component with complete control over styling and behavior.
+This story demonstrates three different approaches to customizing the Checkbox component:
 
-#### 1. Custom Checkbox Appearance
+#### Custom Checkbox Components Example
 
-The first approach customizes the visual appearance of the checkbox itself:
+The first example customizes the actual checkbox and its indicator component:
 
 \`\`\`tsx
-<Checkbox
-  name="terms"
-  label="Accept terms and conditions"
-  description="You must accept our terms to continue"
-  components={{
-    Checkbox: PurpleCheckbox,
-    CheckboxIndicator: PurpleIndicator,
-  }}
-/>
-\`\`\`
-
-Where the custom components are defined as:
-
-\`\`\`tsx
-// Custom checkbox component
-const PurpleCheckbox = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->((props, ref) => (
+const PurpleCheckbox = (
+  props: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+) => (
   <CheckboxPrimitive.Root
-    ref={ref}
     {...props}
     className="h-8 w-8 rounded-full border-4 border-purple-500 bg-white data-[state=checked]:bg-purple-500"
   >
     {props.children}
   </CheckboxPrimitive.Root>
-));
+);
 
-// Custom indicator
-const PurpleIndicator = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>
->((props, ref) => (
+const PurpleIndicator = (
+  props: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>
+) => (
   <CheckboxPrimitive.Indicator
-    ref={ref}
     {...props}
     className="flex h-full w-full items-center justify-center text-white"
   >
     ✓
   </CheckboxPrimitive.Indicator>
-));
-\`\`\`
-
-#### 2. Custom Form Elements
-
-The second approach customizes the form elements (label and error message) while keeping the default checkbox:
-
-\`\`\`tsx
-<Checkbox
-  name="required"
-  label="This is a required checkbox"
-  components={{
-    FormLabel: CustomLabel,
-    FormMessage: CustomErrorMessage,
-  }}
-/>
-\`\`\`
-
-With the custom form components defined as:
-
-\`\`\`tsx
-// Custom form label component
-const CustomLabel = React.forwardRef<
-  HTMLLabelElement,
-  React.ComponentPropsWithoutRef<typeof FormLabel>
->(({ className, htmlFor, ...props }, ref) => (
-  <label
-    ref={ref}
-    htmlFor={htmlFor}
-    className={\`custom-label text-purple-600 font-bold text-lg \${className}\`}
-    {...props}
-  >
-    {props.children} ★
-  </label>
-));
-
-// Custom error message component
-const CustomErrorMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<typeof FormMessage>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={\`custom-error flex items-center text-red-500 bg-red-100 p-2 rounded-md \${className}\`}
-    {...props}
-  >
-    <span className="mr-1 text-lg">⚠️</span> {props.children}
-  </p>
-));
+);
 \`\`\`
 
-#### 3. Combining Custom Components
+#### Custom Form Components Example
 
-The third approach combines both custom checkbox and form elements:
+The second example customizes the form label and error message components:
 
 \`\`\`tsx
-// Create component objects for reuse
-const customCheckboxComponents = {
-  Checkbox: PurpleCheckbox,
-  CheckboxIndicator: PurpleIndicator,
+const CustomLabel = (
+  props: React.ComponentPropsWithoutRef<typeof FormLabel>
+) => {
+  const { className, htmlFor, ...rest } = props;
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={\`custom-label text-purple-600 font-bold text-lg \${className}\`}
+      {...rest}
+    >
+      {props.children} ★
+    </label>
+  );
 };
 
-const customLabelComponents = {
-  FormLabel: CustomLabel,
-  FormMessage: CustomErrorMessage,
+const CustomErrorMessage = (
+  props: React.ComponentPropsWithoutRef<typeof FormMessage>
+) => {
+  const { className, ...rest } = props;
+  return (
+    <p
+      className={\`custom-error flex items-center text-red-500 bg-red-100 p-2 rounded-md \${className}\`}
+      {...rest}
+    >
+      <span className="mr-1 text-lg">⚠️</span> {props.children}
+    </p>
+  );
 };
-
-// Use spread operator to combine them
-<Checkbox
-  name="terms"
-  label="Accept terms and conditions"
-  components={{
-    ...customCheckboxComponents,
-    ...customLabelComponents,
-  }}
-/>
 \`\`\`
-
-### Key Points
-
-- Always use React.forwardRef when creating custom components
-- Make sure to spread the props to pass all necessary attributes
-- Include the ref to maintain form functionality
-- Add a displayName to your component for better debugging
-- The components prop accepts replacements for Checkbox, CheckboxIndicator, FormLabel, FormMessage, and FormDescription
-- You can mix and match different custom components as needed
-`,
+        `,
       },
       source: {
         code: `
 // Custom checkbox component
-const PurpleCheckbox = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->((props, ref) => (
+const PurpleCheckbox = (
+  props: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+) => (
   <CheckboxPrimitive.Root
-    ref={ref}
     {...props}
     className="h-8 w-8 rounded-full border-4 border-purple-500 bg-white data-[state=checked]:bg-purple-500"
   >
     {props.children}
   </CheckboxPrimitive.Root>
-));
+);
 
 // Custom indicator
-const PurpleIndicator = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>
->((props, ref) => (
+const PurpleIndicator = (
+  props: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>
+) => (
   <CheckboxPrimitive.Indicator
-    ref={ref}
     {...props}
     className="flex h-full w-full items-center justify-center text-white"
   >
     ✓
   </CheckboxPrimitive.Indicator>
-));
+);
 
 // Custom form label component
-const CustomLabel = React.forwardRef<
-  HTMLLabelElement,
-  React.ComponentPropsWithoutRef<typeof FormLabel>
->(({ className, htmlFor, ...props }, ref) => (
-  <label
-    ref={ref}
-    htmlFor={htmlFor}
-    className={\`custom-label text-purple-600 font-bold text-lg \${className}\`}
-    {...props}
-  >
-    {props.children} ★
-  </label>
-));
+const CustomLabel = (
+  props: React.ComponentPropsWithoutRef<typeof FormLabel>
+) => {
+  const { className, htmlFor, ...rest } = props;
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={\`custom-label text-purple-600 font-bold text-lg \${className}\`}
+      {...rest}
+    >
+      {props.children} ★
+    </label>
+  );
+};
 
 // Custom error message component
-const CustomErrorMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<typeof FormMessage>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={\`custom-error flex items-center text-red-500 bg-red-100 p-2 rounded-md \${className}\`}
-    {...props}
-  >
-    <span className="mr-1 text-lg">⚠️</span> {props.children}
-  </p>
-));
+const CustomErrorMessage = (
+  props: React.ComponentPropsWithoutRef<typeof FormMessage>
+) => {
+  const { className, ...rest } = props;
+  return (
+    <p
+      className={\`custom-error flex items-center text-red-500 bg-red-100 p-2 rounded-md \${className}\`}
+      {...rest}
+    >
+      <span className="mr-1 text-lg">⚠️</span> {props.children}
+    </p>
+  );
+};
 
 // Usage in form
-<Checkbox
-  name="terms"
-  label="Accept terms and conditions"
-  components={{
-    ...customCheckboxComponents,
-    ...customLabelComponents,
-  }}
-/>
-
-<Checkbox
-  name="required"
-  label="This is a required checkbox"
-  components={customLabelComponents}
-/>`,
+`,
       },
     },
   },
diff --git a/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx b/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
new file mode 100644
index 00000000..d24c5b72
--- /dev/null
+++ b/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
@@ -0,0 +1,258 @@
+import { DataTableRouterForm } from '@lambdacurry/forms/remix-hook-form/data-table-router-form';
+import { dataTableRouterParsers } from '@lambdacurry/forms/remix-hook-form/data-table-router-parsers';
+import { DataTableColumnHeader } from '@lambdacurry/forms/ui/data-table/data-table-column-header';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { type LoaderFunctionArgs, useLoaderData } from 'react-router';
+import { z } from 'zod';
+import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
+
+// Define the data schema
+const userSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  email: z.string().email(),
+  role: z.enum(['admin', 'user', 'editor']),
+  status: z.enum(['active', 'inactive', 'pending']),
+  createdAt: z.string().datetime(),
+});
+
+type User = z.infer<typeof userSchema>;
+
+// Sample data
+const users: User[] = Array.from({ length: 100 }).map((_, i) => ({
+  id: `user-${i + 1}`,
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: i % 3 === 0 ? 'admin' : i % 3 === 1 ? 'user' : 'editor',
+  status: i % 3 === 0 ? 'active' : i % 3 === 1 ? 'inactive' : 'pending',
+  createdAt: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toISOString(),
+}));
+
+// Define response type
+interface DataResponse {
+  data: User[];
+  meta: {
+    total: number;
+    page: number;
+    pageSize: number;
+    pageCount: number;
+  };
+}
+
+// Define the columns
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: 'id',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="ID" />,
+    cell: ({ row }) => <div className="font-medium">{row.getValue('id')}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+    cell: ({ row }) => <div>{row.getValue('name')}</div>,
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
+    cell: ({ row }) => <div>{row.getValue('email')}</div>,
+  },
+  {
+    accessorKey: 'role',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Role" />,
+    cell: ({ row }) => <div className="capitalize">{row.getValue('role')}</div>,
+    enableColumnFilter: true,
+    filterFn: (row, id, value: string[]) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => <div className="capitalize">{row.getValue('status')}</div>,
+    enableColumnFilter: true,
+    filterFn: (row, id, value: string[]) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => <div>{new Date(row.getValue('createdAt')).toLocaleDateString()}</div>,
+  },
+];
+
+// Component to display the data table with router form integration
+function DataTableRouterFormExample() {
+  const loaderData = useLoaderData<DataResponse>();
+
+  // Ensure we have data even if loaderData is undefined
+  const data = loaderData?.data ?? [];
+  const pageCount = loaderData?.meta.pageCount ?? 0;
+
+  console.log('DataTableRouterFormExample - loaderData:', loaderData);
+
+  return (
+    <div className="container mx-auto py-10">
+      <h1 className="text-2xl font-bold mb-4">Users Table (React Router Form Integration)</h1>
+      <p className="mb-4">This example demonstrates integration with React Router forms, including:</p>
+      <ul className="list-disc pl-5 mb-4">
+        <li>Form-based filtering with automatic submission</li>
+        <li>Loading state while waiting for data</li>
+        <li>Server-side filtering and pagination</li>
+        <li>URL-based state management with React Router</li>
+      </ul>
+      <DataTableRouterForm<User, keyof User>
+        columns={columns}
+        data={data}
+        pageCount={pageCount}
+        filterableColumns={[
+          {
+            id: 'role' as keyof User,
+            title: 'Role',
+            options: [
+              { label: 'Admin', value: 'admin' },
+              { label: 'User', value: 'user' },
+              { label: 'Editor', value: 'editor' },
+            ],
+          },
+          {
+            id: 'status' as keyof User,
+            title: 'Status',
+            options: [
+              { label: 'Active', value: 'active' },
+              { label: 'Inactive', value: 'inactive' },
+              { label: 'Pending', value: 'pending' },
+            ],
+          },
+        ]}
+        searchableColumns={[
+          {
+            id: 'name' as keyof User,
+            title: 'Name',
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+// Loader function to handle data fetching based on URL parameters
+const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
+  // Add a small delay to simulate network latency
+  await new Promise((resolve) => setTimeout(resolve, 300));
+
+  // Ensure we have a valid URL object
+  const url = request?.url ? new URL(request.url) : new URL('http://localhost?page=0&pageSize=10');
+  const params = url.searchParams;
+
+  console.log('handleDataFetch - URL:', url.toString());
+  console.log('handleDataFetch - Search Params:', Object.fromEntries(params.entries()));
+
+  // Use our custom parsers to parse URL search parameters
+  const page = dataTableRouterParsers.page.parse(params.get('page'));
+  const pageSize = dataTableRouterParsers.pageSize.parse(params.get('pageSize'));
+  const sortField = dataTableRouterParsers.sortField.parse(params.get('sortField'));
+  const sortOrder = dataTableRouterParsers.sortOrder.parse(params.get('sortOrder'));
+  const search = dataTableRouterParsers.search.parse(params.get('search'));
+  const parsedFilters = dataTableRouterParsers.filters.parse(params.get('filters'));
+
+  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortOrder, search, parsedFilters });
+
+  // Apply filters
+  let filteredData = [...users];
+
+  // 1. Apply global search filter
+  if (search) {
+    const searchLower = search.toLowerCase();
+    filteredData = filteredData.filter(
+      (user) => user.name.toLowerCase().includes(searchLower) || user.email.toLowerCase().includes(searchLower),
+    );
+  }
+
+  // 2. Apply faceted filters from the parsed 'filters' array
+  if (parsedFilters && parsedFilters.length > 0) {
+    // Check if parsedFilters is not null
+    parsedFilters.forEach((filter) => {
+      if (filter.id in users[0] && Array.isArray(filter.value) && filter.value.length > 0) {
+        const filterValues = filter.value as string[];
+        filteredData = filteredData.filter((user) => {
+          const userValue = user[filter.id as keyof User];
+          return filterValues.includes(userValue);
+        });
+      } else {
+        console.warn(`Invalid filter encountered: ${JSON.stringify(filter)}`);
+      }
+    });
+  }
+
+  // 3. Apply sorting
+  if (sortField && sortOrder && sortField in users[0]) {
+    filteredData.sort((a, b) => {
+      const aValue = a[sortField as keyof User];
+      const bValue = b[sortField as keyof User];
+      if (aValue < bValue) return sortOrder === 'asc' ? -1 : 1;
+      if (aValue > bValue) return sortOrder === 'asc' ? 1 : -1;
+      return 0;
+    });
+  }
+
+  // 4. Apply pagination
+  // Determine safe values for page and pageSize using defaultValue when params are missing
+  const safePage = params.has('page') ? page : dataTableRouterParsers.page.defaultValue;
+  const safePageSize = params.has('pageSize') ? pageSize : dataTableRouterParsers.pageSize.defaultValue;
+  const start = safePage * safePageSize;
+  const paginatedData = filteredData.slice(start, start + safePageSize);
+
+  // Log the data being returned for debugging
+  console.log(`Returning ${paginatedData.length} items, page ${safePage}, total ${filteredData.length}`);
+
+  // Return the data response
+  return {
+    data: paginatedData,
+    meta: {
+      total: filteredData.length,
+      page: safePage,
+      pageSize: safePageSize,
+      pageCount: Math.ceil(filteredData.length / safePageSize),
+    },
+  };
+};
+
+const meta = {
+  title: 'RemixHookForm/Data Table',
+  component: DataTableRouterForm,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          Component: DataTableRouterFormExample,
+          loader: handleDataFetch,
+        },
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  args: {} as any,
+  render: () => <DataTableRouterFormExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a description of the DataTableRouterForm component.',
+      },
+    },
+  },
+};
diff --git a/apps/docs/src/remix-hook-form/date-picker.stories.tsx b/apps/docs/src/remix-hook-form/date-picker.stories.tsx
index d79ec349..f02ef2e3 100644
--- a/apps/docs/src/remix-hook-form/date-picker.stories.tsx
+++ b/apps/docs/src/remix-hook-form/date-picker.stories.tsx
@@ -94,6 +94,9 @@ const meta: Meta<typeof DatePicker> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// Helper function for sleep delays
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 export const Default: Story = {
   parameters: {
     docs: {
@@ -105,22 +108,67 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Open the date picker
-    const datePickerButton = canvas.getByRole('button', { name: /select a date/i });
+    // Find all buttons in the form
+    const buttons = await canvas.findAllByRole('button');
+
+    // Select the date picker button (the one with aria-haspopup="dialog")
+    const datePickerButton = buttons.find((btn) => btn.getAttribute('aria-haspopup') === 'dialog');
+    if (!datePickerButton) {
+      throw new Error('Could not find date picker button');
+    }
+    expect(datePickerButton).toBeInTheDocument();
+
+    // Click to open the date picker
     await userEvent.click(datePickerButton);
 
-    // Select a date (today)
-    const today = new Date();
-    const formattedDate = today.getDate().toString();
-    const dateButton = canvas.getByRole('button', { name: new RegExp(`^${formattedDate}$`) });
-    await userEvent.click(dateButton);
+    // Wait for date picker dialog to open
+    await sleep(200);
+
+    // Find the dialog popup using document.querySelector
+    const dialog = document.querySelector('[role="dialog"]');
+
+    // Look for day buttons within the dialog using the dialog element's within scope
+    const dialogContent = within(dialog as HTMLElement);
+
+    // Find all day cells
+    const dayCells = await dialogContent.findAllByRole('gridcell');
+
+    // Click on a day that's not disabled
+    const dayToClick = dayCells.find((day) => day.textContent && /^\d+$/.test(day.textContent.trim()));
+
+    if (dayToClick) {
+      await userEvent.click(dayToClick);
+    } else {
+      // If we can't find a specific day, click the first day cell
+      await userEvent.click(dayCells[0]);
+    }
+
+    // Wait for date picker to close
+    await sleep(100);
+
+    // Now click the submit button
+    const submitButton = buttons.find((btn) => btn.textContent?.includes('Submit'));
+    if (!submitButton) {
+      throw new Error('Could not find submit button');
+    }
 
-    // Submit the form
-    const submitButton = canvas.getByRole('button', { name: 'Submit' });
     await userEvent.click(submitButton);
 
-    // Check if the selected date is displayed
-    const selectedDate = new Date(today).toLocaleDateString();
-    await expect(await canvas.findByText(selectedDate)).toBeInTheDocument();
+    // Wait for form submission to complete
+    await sleep(200);
+
+    // After submission, the date picker button should now show a date value
+    // instead of "Select a date"
+    const updatedPickerButton = await canvas.findByRole('button', {
+      expanded: false,
+    });
+
+    // Check if this is the date picker button
+    expect(updatedPickerButton.getAttribute('aria-haspopup')).toBe('dialog');
+
+    // Verify the button's text is no longer just "Select a date"
+    const buttonText = updatedPickerButton.textContent || '';
+    expect(buttonText).not.toContain('Select a date');
+    expect(buttonText).toMatch(/\d/); // Should contain at least one digit
   },
 };
diff --git a/apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx b/apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx
index 1e789837..3d6d5b45 100644
--- a/apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx
+++ b/apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx
@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DropdownMenuSelect } from '@lambdacurry/forms/remix-hook-form/dropdown-menu-select';
 import { Button } from '@lambdacurry/forms/ui/button';
-import { FormMessage } from '@lambdacurry/forms/ui/form';
+import { DropdownMenuSelectItem } from '@lambdacurry/forms/ui/dropdown-menu-select-field';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
-import { Form, useFetcher } from 'react-router';
+import { expect, screen, userEvent, within } from '@storybook/test';
+import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
@@ -41,7 +41,7 @@ const ControlledDropdownMenuSelectExample = () => {
       onValid: (data) => {
         fetcher.submit(
           createFormData({
-            selectedFruit: data.fruit,
+            fruit: data.fruit,
           }),
           {
             method: 'post',
@@ -56,8 +56,13 @@ const ControlledDropdownMenuSelectExample = () => {
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
         <div className="space-y-4">
-          <DropdownMenuSelect name="fruit" label="Select a fruit" options={AVAILABLE_FRUITS} />
-          <FormMessage error={methods.formState.errors.fruit?.message} />
+          <DropdownMenuSelect name="fruit" label="Select a fruit">
+            {AVAILABLE_FRUITS.map((fruit) => (
+              <DropdownMenuSelectItem key={fruit.value} value={fruit.value}>
+                {fruit.label}
+              </DropdownMenuSelectItem>
+            ))}
+          </DropdownMenuSelect>
           <Button type="submit" className="mt-4">
             Submit
           </Button>
@@ -92,10 +97,13 @@ const meta: Meta<typeof DropdownMenuSelect> = {
   tags: ['autodocs'],
   decorators: [
     withReactRouterStubDecorator({
-      root: {
-        Component: ControlledDropdownMenuSelectExample,
-        action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
-      },
+      routes: [
+        {
+          path: '/',
+          Component: ControlledDropdownMenuSelectExample,
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
     }),
   ],
 } satisfies Meta<typeof DropdownMenuSelect>;
@@ -115,11 +123,11 @@ export const Default: Story = {
     const canvas = within(canvasElement);
 
     // Open the dropdown
-    const dropdownButton = canvas.getByRole('combobox');
+    const dropdownButton = canvas.getByRole('button', { name: 'Select an option' });
     await userEvent.click(dropdownButton);
 
-    // Select an option
-    const option = canvas.getByRole('option', { name: 'Banana' });
+    // Select an option (portal renders outside the canvas)
+    const option = screen.getByRole('menuitem', { name: 'Banana' });
     await userEvent.click(option);
 
     // Submit the form
diff --git a/apps/docs/src/remix-hook-form/otp-input.stories.tsx b/apps/docs/src/remix-hook-form/otp-input.stories.tsx
index ef4f1f1c..644585c8 100644
--- a/apps/docs/src/remix-hook-form/otp-input.stories.tsx
+++ b/apps/docs/src/remix-hook-form/otp-input.stories.tsx
@@ -103,17 +103,11 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Get all input fields
-    const inputs = canvas.getAllByRole('textbox');
-    expect(inputs).toHaveLength(6);
+    // Get the main OTP input
+    const otpInput = canvas.getByRole('textbox');
 
-    // Enter OTP
-    await userEvent.type(inputs[0], '1');
-    await userEvent.type(inputs[1], '2');
-    await userEvent.type(inputs[2], '3');
-    await userEvent.type(inputs[3], '4');
-    await userEvent.type(inputs[4], '5');
-    await userEvent.type(inputs[5], '6');
+    // Type the 6-digit OTP directly into the hidden input
+    await userEvent.type(otpInput, '123456');
 
     // Submit the form
     const submitButton = canvas.getByRole('button', { name: 'Submit' });
diff --git a/apps/docs/src/remix-hook-form/radio-group-custom.stories.tsx b/apps/docs/src/remix-hook-form/radio-group-custom.stories.tsx
index a0406ea3..31159318 100644
--- a/apps/docs/src/remix-hook-form/radio-group-custom.stories.tsx
+++ b/apps/docs/src/remix-hook-form/radio-group-custom.stories.tsx
@@ -1,13 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
+import { RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group-item';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
-import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
 import { cn } from '@lambdacurry/forms/ui/utils';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import * as React from 'react';
+import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { Form, useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
@@ -25,60 +25,64 @@ const formSchema = z.object({
 
 type FormData = z.infer<typeof formSchema>;
 
+// Custom FormLabel component that makes the entire area clickable
+const FullWidthCardLabel = ({ className, children, htmlFor, ...props }: React.ComponentPropsWithoutRef<'label'>) => {
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={cn(
+        'absolute inset-0 cursor-pointer flex items-center p-4 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </label>
+  );
+};
+
 // Custom radio group component
-const PurpleRadioGroup = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->((props, ref) => {
+const PurpleRadioGroup = (props: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>) => {
   return (
     <RadioGroupPrimitive.Root
-      ref={ref}
       className="flex flex-col space-y-4 border-2 border-purple-300 rounded-lg p-4 bg-purple-50"
       {...props}
     />
   );
-});
+};
 PurpleRadioGroup.displayName = 'PurpleRadioGroup';
 
 // Custom radio group item component
-const PurpleRadioGroupItem = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+const PurpleRadioGroupItem = (
+  props: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
     indicator?: React.ReactNode;
-  }
->((props, ref) => {
+  },
+) => {
   return (
     <RadioGroupPrimitive.Item
-      ref={ref}
       className="h-6 w-6 rounded-full border-2 border-purple-500 text-purple-600 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
       {...props}
     >
       {props.children}
     </RadioGroupPrimitive.Item>
   );
-});
+};
 PurpleRadioGroupItem.displayName = 'PurpleRadioGroupItem';
 
 // Custom radio group indicator component
-const PurpleRadioGroupIndicator = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Indicator>
->((props, ref) => {
+const PurpleRadioGroupIndicator = (props: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Indicator>) => {
   return (
-    <RadioGroupPrimitive.Indicator ref={ref} className="flex items-center justify-center" {...props}>
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center" {...props}>
       <div className="h-3 w-3 rounded-full bg-purple-500" />
     </RadioGroupPrimitive.Indicator>
   );
-});
+};
 PurpleRadioGroupIndicator.displayName = 'PurpleRadioGroupIndicator';
 
 // Custom radio group indicator with icon
-const IconRadioGroupIndicator = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Indicator>
->((props, ref) => {
+const IconRadioGroupIndicator = (props: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Indicator>) => {
   return (
-    <RadioGroupPrimitive.Indicator ref={ref} className="flex items-center justify-center" {...props}>
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center" {...props}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -97,33 +101,27 @@ const IconRadioGroupIndicator = React.forwardRef<
       </svg>
     </RadioGroupPrimitive.Indicator>
   );
-});
+};
 IconRadioGroupIndicator.displayName = 'IconRadioGroupIndicator';
 
 // Custom form label component
-const PurpleLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof FormLabel>>(
-  ({ className, ...props }, ref) => <FormLabel ref={ref} className="text-purple-700 font-bold text-lg" {...props} />,
+const PurpleLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => (
+  <FormLabel className="text-purple-700 font-bold text-lg" {...props} />
 );
 PurpleLabel.displayName = 'PurpleLabel';
 
 // Custom error message component
-const PurpleErrorMessage = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<typeof FormMessage>>(
-  ({ className, ...props }, ref) => (
-    <FormMessage ref={ref} className="text-red-500 bg-red-50 p-2 rounded-md border border-red-200 mt-1" {...props} />
-  ),
+const PurpleErrorMessage = (props: React.ComponentPropsWithoutRef<typeof FormMessage>) => (
+  <FormMessage className="text-red-500 bg-red-50 p-2 rounded-md border border-red-200 mt-1" {...props} />
 );
 PurpleErrorMessage.displayName = 'PurpleErrorMessage';
 
 // Card-style radio group item component
-const CardRadioGroupItem = React.forwardRef<
-  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->((props, ref) => {
+const CardRadioGroupItem = (props: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>) => {
   const { value, children, className, ...otherProps } = props;
 
   return (
     <RadioGroupPrimitive.Item
-      ref={ref}
       value={value}
       className={cn(
         'relative w-full p-4 border-2 rounded-lg transition-all',
@@ -159,7 +157,7 @@ const CardRadioGroupItem = React.forwardRef<
       </div>
     </RadioGroupPrimitive.Item>
   );
-});
+};
 CardRadioGroupItem.displayName = 'CardRadioGroupItem';
 
 const CustomRadioGroupExample = () => {
@@ -194,18 +192,9 @@ const CustomRadioGroupExample = () => {
                 FormMessage: PurpleErrorMessage,
               }}
             >
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="starter" id="starter-1" />
-                <label htmlFor="starter-1">Starter</label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="pro" id="pro-1" />
-                <label htmlFor="pro-1">Pro</label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="enterprise" id="enterprise-1" />
-                <label htmlFor="enterprise-1">Enterprise</label>
-              </div>
+              <RadioGroupItem value="starter" id="starter-1" label="Starter" />
+              <RadioGroupItem value="pro" id="pro-1" label="Pro" />
+              <RadioGroupItem value="enterprise" id="enterprise-1" label="Enterprise" />
             </RadioGroup>
           </div>
 
@@ -217,45 +206,36 @@ const CustomRadioGroupExample = () => {
               description="Choose the plan that best fits your needs."
               className="space-y-2"
             >
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem
-                  value="starter"
-                  id="starter-2"
-                  components={{
-                    RadioGroupItem: PurpleRadioGroupItem,
-                    RadioGroupIndicator: PurpleRadioGroupIndicator,
-                  }}
-                />
-                <label htmlFor="starter-2" className="text-purple-700">
-                  Starter
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem
-                  value="pro"
-                  id="pro-2"
-                  components={{
-                    RadioGroupItem: PurpleRadioGroupItem,
-                    RadioGroupIndicator: PurpleRadioGroupIndicator,
-                  }}
-                />
-                <label htmlFor="pro-2" className="text-purple-700">
-                  Pro
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem
-                  value="enterprise"
-                  id="enterprise-2"
-                  components={{
-                    RadioGroupItem: PurpleRadioGroupItem,
-                    RadioGroupIndicator: PurpleRadioGroupIndicator,
-                  }}
-                />
-                <label htmlFor="enterprise-2" className="text-purple-700">
-                  Enterprise
-                </label>
-              </div>
+              <RadioGroupItem
+                value="starter"
+                id="starter-2"
+                label="Starter"
+                labelClassName="text-purple-700"
+                components={{
+                  RadioGroupItem: PurpleRadioGroupItem,
+                  RadioGroupIndicator: PurpleRadioGroupIndicator,
+                }}
+              />
+              <RadioGroupItem
+                value="pro"
+                id="pro-2"
+                label="Pro"
+                labelClassName="text-purple-700"
+                components={{
+                  RadioGroupItem: PurpleRadioGroupItem,
+                  RadioGroupIndicator: PurpleRadioGroupIndicator,
+                }}
+              />
+              <RadioGroupItem
+                value="enterprise"
+                id="enterprise-2"
+                label="Enterprise"
+                labelClassName="text-purple-700"
+                components={{
+                  RadioGroupItem: PurpleRadioGroupItem,
+                  RadioGroupIndicator: PurpleRadioGroupIndicator,
+                }}
+              />
             </RadioGroup>
           </div>
 
@@ -267,45 +247,36 @@ const CustomRadioGroupExample = () => {
               description="Choose the plan that best fits your needs."
               className="space-y-2"
             >
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem
-                  value="starter"
-                  id="starter-3"
-                  components={{
-                    RadioGroupItem: PurpleRadioGroupItem,
-                    RadioGroupIndicator: IconRadioGroupIndicator,
-                  }}
-                />
-                <label htmlFor="starter-3" className="text-purple-700">
-                  Starter
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem
-                  value="pro"
-                  id="pro-3"
-                  components={{
-                    RadioGroupItem: PurpleRadioGroupItem,
-                    RadioGroupIndicator: IconRadioGroupIndicator,
-                  }}
-                />
-                <label htmlFor="pro-3" className="text-purple-700">
-                  Pro
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem
-                  value="enterprise"
-                  id="enterprise-3"
-                  components={{
-                    RadioGroupItem: PurpleRadioGroupItem,
-                    RadioGroupIndicator: IconRadioGroupIndicator,
-                  }}
-                />
-                <label htmlFor="enterprise-3" className="text-purple-700">
-                  Enterprise
-                </label>
-              </div>
+              <RadioGroupItem
+                value="starter"
+                id="starter-3"
+                label="Starter"
+                components={{
+                  RadioGroupItem: PurpleRadioGroupItem,
+                  RadioGroupIndicator: IconRadioGroupIndicator,
+                  Label: PurpleLabel,
+                }}
+              />
+              <RadioGroupItem
+                value="pro"
+                id="pro-3"
+                label="Pro"
+                components={{
+                  RadioGroupItem: PurpleRadioGroupItem,
+                  RadioGroupIndicator: IconRadioGroupIndicator,
+                  Label: PurpleLabel,
+                }}
+              />
+              <RadioGroupItem
+                value="enterprise"
+                id="enterprise-3"
+                label="Enterprise"
+                components={{
+                  RadioGroupItem: PurpleRadioGroupItem,
+                  RadioGroupIndicator: IconRadioGroupIndicator,
+                  Label: PurpleLabel,
+                }}
+              />
             </RadioGroup>
           </div>
 
@@ -317,20 +288,59 @@ const CustomRadioGroupExample = () => {
               description="Choose the plan that best fits your needs."
               className="space-y-4"
             >
-              <CardRadioGroupItem className="text-left" value="starter" id="starter-4">
-                <div className="font-medium">Starter</div>
-                <div className="text-sm text-gray-500">Perfect for beginners</div>
-              </CardRadioGroupItem>
-
-              <CardRadioGroupItem className="text-left" value="pro" id="pro-4">
-                <div className="font-medium">Pro</div>
-                <div className="text-sm text-gray-500">For professional users</div>
-              </CardRadioGroupItem>
-
-              <CardRadioGroupItem className="text-left" value="enterprise" id="enterprise-4">
-                <div className="font-medium">Enterprise</div>
-                <div className="text-sm text-gray-500">For large organizations</div>
-              </CardRadioGroupItem>
+              <RadioGroupItem
+                value="starter"
+                id="starter-4"
+                className="sr-only"
+                wrapperClassName="relative h-[100px] rounded-lg transition-colors transition-border duration-500 ease-in-out border-2 border-gray-200 hover:bg-purple-100 has-[:checked]:border-purple-500 has-[:checked]:bg-purple-100"
+                label={
+                  <div className="flex flex-col">
+                    <div className="text-lg font-bold text-purple-700 transition-colors duration-500">Starter</div>
+                    <div className="text-sm text-gray-500 mt-1 transition-colors duration-500">
+                      Perfect for small projects
+                    </div>
+                  </div>
+                }
+                components={{
+                  Label: FullWidthCardLabel,
+                }}
+              />
+
+              <RadioGroupItem
+                value="pro"
+                id="pro-4"
+                className="sr-only"
+                wrapperClassName="relative h-[100px] rounded-lg transition-colors transition-border duration-500 ease-in-out border-2 border-gray-200 hover:bg-purple-100 has-[:checked]:border-purple-500 has-[:checked]:bg-purple-100"
+                label={
+                  <div className="flex flex-col">
+                    <div className="text-lg font-bold text-purple-700 transition-colors duration-500">Pro</div>
+                    <div className="text-sm text-gray-500 mt-1 transition-colors duration-500">
+                      For professional developers
+                    </div>
+                  </div>
+                }
+                components={{
+                  Label: FullWidthCardLabel,
+                }}
+              />
+
+              <RadioGroupItem
+                value="enterprise"
+                id="enterprise-4"
+                className="sr-only"
+                wrapperClassName="relative h-[100px] rounded-lg transition-colors transition-border duration-500 ease-in-out border-2 border-gray-200 hover:bg-purple-100 has-[&:checked]:border-purple-500 has-[&:checked]:bg-purple-100"
+                label={
+                  <div className="flex flex-col">
+                    <div className="text-lg font-bold text-purple-700 transition-colors duration-500">Enterprise</div>
+                    <div className="text-sm text-gray-500 mt-1 transition-colors duration-500">
+                      Advanced features for teams
+                    </div>
+                  </div>
+                }
+                components={{
+                  Label: FullWidthCardLabel,
+                }}
+              />
             </RadioGroup>
           </div>
 
@@ -340,24 +350,15 @@ const CustomRadioGroupExample = () => {
               name="requiredPlan"
               label="Select a required plan"
               description="This field is required."
-              className="space-y-2"
+              options={[
+                { value: 'starter', label: 'Starter', id: 'starter-5' },
+                { value: 'pro', label: 'Pro', id: 'pro-5' },
+                { value: 'enterprise', label: 'Enterprise', id: 'enterprise-5' },
+              ]}
               components={{
                 FormMessage: PurpleErrorMessage,
               }}
-            >
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="starter" id="starter-5" />
-                <label htmlFor="starter-5">Starter</label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="pro" id="pro-5" />
-                <label htmlFor="pro-5">Pro</label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="enterprise" id="enterprise-5" />
-                <label htmlFor="enterprise-5">Enterprise</label>
-              </div>
-            </RadioGroup>
+            />
           </div>
         </div>
 
@@ -401,6 +402,7 @@ export const CustomComponents: Story = {
       routes: [
         {
           path: '/',
+          Component: CustomRadioGroupExample,
           action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
         },
       ],
@@ -414,7 +416,7 @@ export const CustomComponents: Story = {
       source: {
         code: `
 import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
-import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
+import { RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group-item';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
 import { cn } from '@lambdacurry/forms/ui/utils';
@@ -436,11 +438,9 @@ import { cn } from '@lambdacurry/forms/ui/utils';
     FormMessage: PurpleErrorMessage,
   }}
 >
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="starter" id="starter-1" />
-    <label htmlFor="starter-1">Starter</label>
-  </div>
-  {/* More radio items */}
+  <RadioGroupItem value="starter" id="starter-1" label="Starter" />
+  <RadioGroupItem value="pro" id="pro-1" label="Pro" />
+  <RadioGroupItem value="enterprise" id="enterprise-1" label="Enterprise" />
 </RadioGroup>
 
 /**
@@ -455,27 +455,23 @@ import { cn } from '@lambdacurry/forms/ui/utils';
   description="Choose the plan that best fits your needs."
   className="space-y-2"
 >
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem
-      value="starter"
-      id="starter-2"
-      components={{
-        RadioGroupItem: PurpleRadioGroupItem,
-        RadioGroupIndicator: PurpleRadioGroupIndicator,
-      }}
-    />
-    <label htmlFor="starter-2" className="text-purple-700">
-      Starter
-    </label>
-  </div>
+  <RadioGroupItem
+    value="starter"
+    id="starter-2"
+    label="Starter"
+    labelClassName="text-purple-700"
+    components={{
+      RadioGroupItem: PurpleRadioGroupItem,
+      RadioGroupIndicator: PurpleRadioGroupIndicator,
+    }}
+  />
   {/* More radio items */}
 </RadioGroup>
 
 /**
- * Example 3: Custom Radio Items with Icon
+ * Example 3: Using RadioGroupItem with built-in label and custom Label component
  * 
- * You can replace the default indicator with a custom icon.
- * This example uses an SVG checkmark instead of the default circle.
+ * Our RadioGroupItem component can use a custom Label component
  */
 <RadioGroup
   name="plan"
@@ -483,120 +479,66 @@ import { cn } from '@lambdacurry/forms/ui/utils';
   description="Choose the plan that best fits your needs."
   className="space-y-2"
 >
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem
-      value="starter"
-      id="starter-3"
-      components={{
-        RadioGroupItem: PurpleRadioGroupItem,
-        RadioGroupIndicator: IconRadioGroupIndicator, // Custom SVG icon indicator
-      }}
-    />
-    <label htmlFor="starter-3" className="text-purple-700">
-      Starter
-    </label>
-  </div>
+  <RadioGroupItem
+    value="starter"
+    id="starter-3"
+    label="Starter"
+    components={{
+      RadioGroupItem: PurpleRadioGroupItem,
+      RadioGroupIndicator: IconRadioGroupIndicator,
+      Label: PurpleLabel,
+    }}
+  />
+  <RadioGroupItem
+    value="pro"
+    id="pro-3"
+    label="Pro"
+    components={{
+      RadioGroupItem: PurpleRadioGroupItem,
+      RadioGroupIndicator: IconRadioGroupIndicator,
+      Label: PurpleLabel,
+    }}
+  />
   {/* More radio items */}
 </RadioGroup>
 
 /**
- * Example 4: Card-Style Radio Buttons
+ * Example 4: Using options prop for automatic items with labels
  * 
- * You can completely transform the appearance of radio buttons
- * by creating a custom component that uses RadioGroupPrimitive.Item.
- * This example creates card-style radio buttons with rich content.
+ * You can use the options prop to automatically generate radio items with labels
  */
-
-// Card-style radio group item component
-const CardRadioGroupItem = React.forwardRef((props, ref) => {
-  const { value, children, className, ...otherProps } = props;
-  
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      value={value}
-      className={cn(
-        "relative w-full p-4 border-2 rounded-lg transition-all",
-        "data-[state=checked]:border-purple-500 data-[state=checked]:bg-purple-50",
-        "data-[state=unchecked]:border-gray-200",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2",
-        className
-      )}
-      {...otherProps}
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex flex-col">
-          {children}
-        </div>
-        <div className="flex items-center justify-center h-5 w-5">
-          <RadioGroupPrimitive.Indicator>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="3"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="text-purple-600"
-              aria-hidden="true"
-            >
-              <title>Selected</title>
-              <path d="M20 6 9 17l-5-5" />
-            </svg>
-          </RadioGroupPrimitive.Indicator>
-        </div>
-      </div>
-    </RadioGroupPrimitive.Item>
-  );
-});
-
-// Usage with card-style radio buttons
 <RadioGroup
   name="plan"
   label="Select a plan"
   description="Choose the plan that best fits your needs."
   className="space-y-4"
->
-  <CardRadioGroupItem value="starter" id="starter-4">
-    <div className="font-medium">Starter</div>
-    <div className="text-sm text-gray-500">Perfect for beginners</div>
-  </CardRadioGroupItem>
-  
-  <CardRadioGroupItem value="pro" id="pro-4">
-    <div className="font-medium">Pro</div>
-    <div className="text-sm text-gray-500">For professional users</div>
-  </CardRadioGroupItem>
-  
-  <CardRadioGroupItem value="enterprise" id="enterprise-4">
-    <div className="font-medium">Enterprise</div>
-    <div className="text-sm text-gray-500">For large organizations</div>
-  </CardRadioGroupItem>
-</RadioGroup>
+  options={[
+    { value: 'starter', label: 'Starter', id: 'starter-4' },
+    { value: 'pro', label: 'Pro', id: 'pro-4' },
+    { value: 'enterprise', label: 'Enterprise', id: 'enterprise-4' }
+  ]}
+  itemClassName="bg-purple-50 p-3 rounded-lg border border-purple-100 hover:bg-purple-100 transition-all"
+  labelClassName="text-purple-800 font-bold"
+/>
 
 /**
- * Example 5: Required Radio Group
+ * Example 5: Required Radio Group with options prop
  * 
- * You can create a required radio group by using Zod validation.
- * This example shows how to display custom error messages when validation fails.
+ * You can create a required radio group with automatic items
  */
 <RadioGroup
   name="requiredPlan" // This field is required in the Zod schema
   label="Select a required plan"
   description="This field is required."
-  className="space-y-2"
+  options={[
+    { value: 'starter', label: 'Starter', id: 'starter-5' },
+    { value: 'pro', label: 'Pro', id: 'pro-5' },
+    { value: 'enterprise', label: 'Enterprise', id: 'enterprise-5' }
+  ]}
   components={{
     FormMessage: PurpleErrorMessage, // Custom error message styling
   }}
->
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="starter" id="starter-5" />
-    <label htmlFor="starter-5">Starter</label>
-  </div>
-  {/* More radio items */}
-</RadioGroup>
+/>
 
 // Zod schema with required field
 const formSchema = z.object({
@@ -613,10 +555,17 @@ const formSchema = z.object({
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Test 1: Verify custom label is rendered with purple styling
-    const customLabel = canvas.getAllByText('Select a plan')[0];
-    expect(customLabel).toHaveClass('text-purple-700');
-    expect(customLabel).toHaveClass('font-bold');
+    // Test 1: Verify custom labels are rendered
+    const planLabels = canvas.getAllByText('Select a plan');
+    expect(planLabels.length).toBeGreaterThan(0);
+
+    // Find section with custom radio items
+    const customRadioItemSection = canvas.getByText('Custom Radio Items with Icon').closest('div');
+    expect(customRadioItemSection).toBeTruthy();
+
+    // Verify radio labels exist
+    const starterLabel = within(customRadioItemSection as HTMLElement).getByText('Starter');
+    expect(starterLabel).toBeInTheDocument();
 
     // Test 2: Verify card-style radio buttons work
     const cardStyleContainer = canvas.getByText('Card-Style Radio Buttons').closest('div');
@@ -624,16 +573,17 @@ const formSchema = z.object({
       throw new Error('Could not find card-style container');
     }
 
-    // Find and click the Enterprise card option
-    const enterpriseCard = within(cardStyleContainer as HTMLElement)
-      .getByText('Enterprise')
-      .closest('button');
-    if (!enterpriseCard) {
-      throw new Error('Could not find Enterprise card option');
+    // Find all radio inputs in the card-style container and select the one with "enterprise" value
+    // A more reliable approach than looking for text and closest button
+    const radioInputs = within(cardStyleContainer as HTMLElement).getAllByRole('radio');
+    const enterpriseOption = radioInputs.find((input) => input.getAttribute('value') === 'enterprise');
+
+    if (!enterpriseOption) {
+      throw new Error('Could not find Enterprise radio option');
     }
 
-    await userEvent.click(enterpriseCard);
-    expect(enterpriseCard).toHaveAttribute('data-state', 'checked');
+    await userEvent.click(enterpriseOption);
+    expect(enterpriseOption).toBeChecked();
 
     // Test 3: Verify required field validation
     const submitButton = canvas.getByRole('button', { name: 'Submit' });
@@ -649,7 +599,14 @@ const formSchema = z.object({
       throw new Error('Could not find required radio group container');
     }
 
-    const proOption = within(requiredContainer as HTMLElement).getByLabelText('Pro');
+    // Find all radio inputs in the required container and select the one for "Pro"
+    const requiredRadioInputs = within(requiredContainer as HTMLElement).getAllByRole('radio');
+    const proOption = requiredRadioInputs.find((input) => input.getAttribute('value') === 'pro');
+
+    if (!proOption) {
+      throw new Error('Could not find Pro option in required field');
+    }
+
     await userEvent.click(proOption);
 
     // Submit the form again
diff --git a/apps/docs/src/remix-hook-form/radio-group.stories.tsx b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
index 3bc31529..bc784422 100644
--- a/apps/docs/src/remix-hook-form/radio-group.stories.tsx
+++ b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
@@ -1,35 +1,60 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
+import { RadioGroup, type RadioOption } from '@lambdacurry/forms/remix-hook-form/radio-group';
+import { RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group-item';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { Label } from '@lambdacurry/forms/ui/label';
-import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
+import type { ComponentPropsWithoutRef, ComponentType } from 'react';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
-const AVAILABLE_SIZES = [
+const AVAILABLE_SIZES: RadioOption[] = [
   { value: 'xs', label: 'Extra Small' },
   { value: 'sm', label: 'Small' },
   { value: 'md', label: 'Medium' },
   { value: 'lg', label: 'Large' },
   { value: 'xl', label: 'Extra Large' },
-] as const;
+];
+
+const AVAILABLE_COLORS: RadioOption[] = [
+  { value: 'red', label: 'Red' },
+  { value: 'blue', label: 'Blue' },
+  { value: 'green', label: 'Green' },
+  { value: 'yellow', label: 'Yellow' },
+  { value: 'purple', label: 'Purple' },
+];
 
 const formSchema = z.object({
   size: z.enum(['xs', 'sm', 'md', 'lg', 'xl'], {
     required_error: 'Please select a size',
   }),
+  color: z.enum(['red', 'blue', 'green', 'yellow', 'purple'], {
+    required_error: 'Please select a color',
+  }),
+  design: z.enum(['modern', 'classic', 'vintage'], {
+    required_error: 'Please select a design',
+  }),
 });
 
 type FormData = z.infer<typeof formSchema>;
 
-const ControlledRadioGroupExample = () => {
-  const fetcher = useFetcher<{ message: string; selectedSize: string; errors?: Record<string, { message: string }> }>();
+// Custom label style component
+const CustomLabel: ComponentType<ComponentPropsWithoutRef<typeof Label>> = (props) => {
+  return <Label className="text-blue-600 font-medium" {...props} />;
+};
+CustomLabel.displayName = 'CustomLabel';
+
+// Radio group example with multiple usage patterns
+const RadioGroupExample = () => {
+  const fetcher = useFetcher<{ message: string; data?: FormData; errors?: Record<string, { message: string }> }>();
   const methods = useRemixForm<FormData>({
     resolver: zodResolver(formSchema),
+    defaultValues: {
+      size: 'md',
+    },
     fetcher,
     submitConfig: {
       action: '/',
@@ -40,27 +65,80 @@ const ControlledRadioGroupExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <div className="space-y-4">
-          <RadioGroup name="size" label="Select a size">
-            {AVAILABLE_SIZES.map((size) => (
-              <div key={size.value} className="flex items-center space-x-2">
-                <RadioGroupItem value={size.value} id={size.value} />
-                <Label htmlFor={size.value}>{size.label}</Label>
+        <div className="space-y-8">
+          {/* Example 1: Basic usage with options prop */}
+          <div className="p-4 border rounded-md">
+            <h3 className="text-lg font-medium mb-4">Basic Usage</h3>
+            <RadioGroup
+              name="size"
+              label="Select a size"
+              description="Choose the size that fits you best"
+              options={AVAILABLE_SIZES}
+            />
+          </div>
+
+          {/* Example 2: Using options with custom styling */}
+          <div className="p-4 border rounded-md">
+            <h3 className="text-lg font-medium mb-4">Custom Styled Options</h3>
+            <RadioGroup
+              name="color"
+              label="Select a color"
+              description="Choose your preferred color"
+              options={AVAILABLE_COLORS}
+              labelClassName="text-blue-600 font-semibold"
+              itemClassName="bg-gray-50 p-2 rounded-md hover:bg-gray-100"
+            />
+          </div>
+
+          {/* Example 3: Using RadioGroupItem directly */}
+          <div className="p-4 border rounded-md">
+            <h3 className="text-lg font-medium mb-4">Custom Layout with RadioGroupItem</h3>
+            <RadioGroup
+              name="design"
+              label="Select a design style"
+              description="Choose the design that matches your aesthetic"
+            >
+              <div className="grid grid-cols-3 gap-4">
+                <RadioGroupItem
+                  value="modern"
+                  id="design-modern"
+                  label="Modern"
+                  wrapperClassName="bg-blue-50 p-3 rounded-lg border border-blue-100 hover:bg-blue-100 transition-all flex-col space-y-2"
+                  labelClassName="text-blue-800 font-bold"
+                />
+                <RadioGroupItem
+                  value="classic"
+                  id="design-classic"
+                  label="Classic"
+                  wrapperClassName="bg-amber-50 p-3 rounded-lg border border-amber-100 hover:bg-amber-100 transition-all flex-col space-y-2"
+                  labelClassName="text-amber-800 font-bold"
+                />
+                <RadioGroupItem
+                  value="vintage"
+                  id="design-vintage"
+                  label="Vintage"
+                  wrapperClassName="bg-green-50 p-3 rounded-lg border border-green-100 hover:bg-green-100 transition-all flex-col space-y-2"
+                  labelClassName="text-green-800 font-bold"
+                />
               </div>
-            ))}
-          </RadioGroup>
-          <Button type="submit" className="mt-4">
-            Submit
-          </Button>
-          {fetcher.data?.selectedSize && (
-            <div className="mt-4">
-              <p className="text-sm font-medium">Submitted with size:</p>
-              <p className="text-sm text-gray-500">
-                {AVAILABLE_SIZES.find((size) => size.value === fetcher.data?.selectedSize)?.label}
-              </p>
-            </div>
-          )}
+            </RadioGroup>
+          </div>
         </div>
+
+        <Button type="submit" className="mt-6">
+          Submit
+        </Button>
+
+        {fetcher.data?.message && (
+          <div className="mt-4 p-4 bg-green-50 rounded-md border border-green-200">
+            <p className="text-green-700 font-medium">{fetcher.data.message}</p>
+            {fetcher.data.data && (
+              <pre className="mt-2 text-sm bg-white p-2 rounded-md overflow-auto">
+                {JSON.stringify(fetcher.data.data, null, 2)}
+              </pre>
+            )}
+          </div>
+        )}
       </Form>
     </RemixFormProvider>
   );
@@ -73,7 +151,10 @@ const handleFormSubmission = async (request: Request) => {
     return { errors };
   }
 
-  return { message: 'Size selected successfully', selectedSize: data.size };
+  return {
+    message: 'Form submitted successfully!',
+    data,
+  };
 };
 
 const meta: Meta<typeof RadioGroup> = {
@@ -86,7 +167,7 @@ const meta: Meta<typeof RadioGroup> = {
       routes: [
         {
           path: '/',
-          Component: ControlledRadioGroupExample,
+          Component: RadioGroupExample,
           action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
         },
       ],
@@ -102,22 +183,105 @@ export const Default: Story = {
     docs: {
       description: {
         story:
-          'A radio group component for selecting a single option from a list. Each radio option is wrapped in a flex container to align the radio button with its label.',
+          'The RadioGroup component provides multiple ways to create radio button groups. ' +
+          'You can use the options prop for automatic generation, customize styling, or use RadioGroupItem directly for maximum flexibility.',
+      },
+      source: {
+        code: `
+// Method 1: Basic usage with options prop
+<RadioGroup
+  name="size"
+  label="Select a size"
+  description="Choose the size that fits you best"
+  options={[
+    { value: 'xs', label: 'Extra Small' },
+    { value: 'sm', label: 'Small' },
+    { value: 'md', label: 'Medium' },
+    { value: 'lg', label: 'Large' },
+    { value: 'xl', label: 'Extra Large' },
+  ]}
+/>
+
+// Method 2: Custom styling with options prop
+<RadioGroup
+  name="color"
+  label="Select a color"
+  description="Choose your preferred color"
+  options={AVAILABLE_COLORS}
+  labelClassName="text-blue-600 font-semibold"
+  itemClassName="bg-gray-50 p-2 rounded-md hover:bg-gray-100"
+/>
+
+// Method 3: Custom layout with RadioGroupItem components
+<RadioGroup
+  name="design"
+  label="Select a design style"
+  description="Choose the design that matches your aesthetic"
+>
+  <div className="grid grid-cols-3 gap-4">
+    <RadioGroupItem
+      value="modern"
+      id="design-modern"
+      label="Modern"
+      wrapperClassName="bg-blue-50 p-3 rounded-lg border border-blue-100 hover:bg-blue-100 transition-all flex-col space-y-2"
+      labelClassName="text-blue-800 font-bold"
+    />
+    <RadioGroupItem
+      value="classic"
+      id="design-classic"
+      label="Classic"
+      wrapperClassName="bg-amber-50 p-3 rounded-lg border border-amber-100 hover:bg-amber-100 transition-all flex-col space-y-2"
+      labelClassName="text-amber-800 font-bold"
+    />
+    <RadioGroupItem
+      value="vintage"
+      id="design-vintage"
+      label="Vintage"
+      wrapperClassName="bg-green-50 p-3 rounded-lg border border-green-100 hover:bg-green-100 transition-all flex-col space-y-2"
+      labelClassName="text-green-800 font-bold"
+    />
+  </div>
+</RadioGroup>`,
       },
     },
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Select an option
-    const mediumOption = canvas.getByLabelText('Medium');
-    await userEvent.click(mediumOption);
+    // Test the first radio group (size)
+    const sizeGroupElement = canvas.getByText('Basic Usage').closest('div');
+    if (!sizeGroupElement) throw new Error('Size group element not found');
+    const sizeGroup = within(sizeGroupElement);
+    const mediumOption = sizeGroup.getByLabelText('Medium');
+    expect(mediumOption).toBeChecked(); // Default value
+
+    // Change selection
+    const largeOption = sizeGroup.getByLabelText('Large');
+    await userEvent.click(largeOption);
+    expect(largeOption).toBeChecked();
+
+    // Test the second radio group (color)
+    const colorGroupElement = canvas.getByText('Custom Styled Options').closest('div');
+    if (!colorGroupElement) throw new Error('Color group element not found');
+    const colorGroup = within(colorGroupElement);
+    const blueOption = colorGroup.getByLabelText('Blue');
+    await userEvent.click(blueOption);
+    expect(blueOption).toBeChecked();
+
+    // Test the third radio group (design)
+    const designGroupElement = canvas.getByText('Custom Layout with RadioGroupItem').closest('div');
+    if (!designGroupElement) throw new Error('Design group element not found');
+    const designGroup = within(designGroupElement);
+    const vintageOption = designGroup.getByLabelText('Vintage');
+    await userEvent.click(vintageOption);
+    expect(vintageOption).toBeChecked();
 
     // Submit the form
     const submitButton = canvas.getByRole('button', { name: 'Submit' });
     await userEvent.click(submitButton);
 
-    // Check if the selected option is displayed
-    await expect(await canvas.findByText('Medium')).toBeInTheDocument();
+    // Verify submission results
+    const resultMessage = await canvas.findByText('Form submitted successfully!');
+    expect(resultMessage).toBeInTheDocument();
   },
 };
diff --git a/apps/docs/src/remix-hook-form/switch-custom.stories.tsx b/apps/docs/src/remix-hook-form/switch-custom.stories.tsx
index b0dceb4c..d6fd6d28 100644
--- a/apps/docs/src/remix-hook-form/switch-custom.stories.tsx
+++ b/apps/docs/src/remix-hook-form/switch-custom.stories.tsx
@@ -5,7 +5,7 @@ import { FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import * as React from 'react';
+import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
@@ -21,27 +21,19 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 // Custom Switch component
-const PurpleSwitch = React.forwardRef<
-  React.ComponentRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->((props, ref) => (
+const PurpleSwitch = (props: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>) => (
   <SwitchPrimitives.Root
-    ref={ref}
     {...props}
     className="peer inline-flex h-8 w-16 shrink-0 cursor-pointer items-center rounded-full border-2 border-purple-300 bg-purple-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-purple-600 data-[state=unchecked]:bg-purple-200"
   >
     {props.children}
   </SwitchPrimitives.Root>
-));
+);
 PurpleSwitch.displayName = 'PurpleSwitch';
 
 // Custom Switch Thumb component
-const PurpleSwitchThumb = React.forwardRef<
-  React.ComponentRef<typeof SwitchPrimitives.Thumb>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Thumb>
->((props, ref) => (
+const PurpleSwitchThumb = (props: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Thumb>) => (
   <SwitchPrimitives.Thumb
-    ref={ref}
     {...props}
     className="pointer-events-none flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-8 data-[state=unchecked]:translate-x-0 relative overflow-hidden data-[state=checked]:[--on-opacity:1] data-[state=checked]:[--off-opacity:0] data-[state=unchecked]:[--on-opacity:0] data-[state=unchecked]:[--off-opacity:1]"
   >
@@ -52,45 +44,35 @@ const PurpleSwitchThumb = React.forwardRef<
       OFF
     </span>
   </SwitchPrimitives.Thumb>
-));
+);
 PurpleSwitchThumb.displayName = 'PurpleSwitchThumb';
 
 // Custom Form Label component
-const PurpleLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof FormLabel>>(
-  ({ className, ...props }, ref) => <FormLabel ref={ref} className="text-lg font-bold text-purple-700" {...props} />,
+const PurpleLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => (
+  <FormLabel className="text-lg font-bold text-purple-700" {...props} />
 );
 PurpleLabel.displayName = 'PurpleLabel';
 
 // Custom Form Message component
-const PurpleMessage = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<typeof FormMessage>>(
-  ({ className, ...props }, ref) => (
-    <FormMessage ref={ref} className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />
-  ),
+const PurpleMessage = (props: React.ComponentPropsWithoutRef<typeof FormMessage>) => (
+  <FormMessage className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />
 );
 PurpleMessage.displayName = 'PurpleMessage';
 
 // Green Switch component
-const GreenSwitch = React.forwardRef<
-  React.ComponentRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->((props, ref) => (
+const GreenSwitch = (props: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>) => (
   <SwitchPrimitives.Root
-    ref={ref}
     {...props}
     className="peer inline-flex h-7 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-green-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-white"
   >
     {props.children}
   </SwitchPrimitives.Root>
-));
+);
 GreenSwitch.displayName = 'GreenSwitch';
 
 // Green Switch Thumb component
-const GreenSwitchThumb = React.forwardRef<
-  React.ComponentRef<typeof SwitchPrimitives.Thumb>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Thumb>
->((props, ref) => (
+const GreenSwitchThumb = (props: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Thumb>) => (
   <SwitchPrimitives.Thumb
-    ref={ref}
     {...props}
     className="pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-green-100 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-white"
   >
@@ -105,7 +87,7 @@ const GreenSwitchThumb = React.forwardRef<
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
     </svg>
   </SwitchPrimitives.Thumb>
-));
+);
 GreenSwitchThumb.displayName = 'GreenSwitchThumb';
 
 const CustomSwitchExample = () => {
@@ -188,6 +170,7 @@ const meta: Meta<typeof Switch> = {
       routes: [
         {
           path: '/',
+          Component: CustomSwitchExample,
           action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
         },
       ],
@@ -336,6 +319,7 @@ const PurpleMessage = React.forwardRef((props, ref) => (
       },
     },
   },
+  render: () => <CustomSwitchExample />,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx b/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx
index 8cf0593e..ccf7f5c3 100644
--- a/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx
+++ b/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx
@@ -4,7 +4,7 @@ import { Button } from '@lambdacurry/forms/ui/button';
 import { FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import * as React from 'react';
+import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
@@ -20,50 +20,44 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 // Custom Input component
-const PurpleInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>((props, ref) => (
+const PurpleInput = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
   <input
-    ref={ref}
     {...props}
     className="w-full rounded-lg border-2 border-purple-300 bg-purple-50 px-4 py-2 text-purple-900 placeholder:text-purple-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
   />
-));
+);
 PurpleInput.displayName = 'PurpleInput';
 
 // Custom Form Label component
-const PurpleLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof FormLabel>>(
-  ({ className, ...props }, ref) => <FormLabel ref={ref} className="text-lg font-bold text-purple-700" {...props} />,
+const PurpleLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => (
+  <FormLabel className="text-lg font-bold text-purple-700" {...props} />
 );
 PurpleLabel.displayName = 'PurpleLabel';
 
 // Custom Form Message component
-const PurpleMessage = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<typeof FormMessage>>(
-  ({ className, ...props }, ref) => (
-    <FormMessage ref={ref} className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />
-  ),
+const PurpleMessage = (props: React.ComponentPropsWithoutRef<typeof FormMessage>) => (
+  <FormMessage className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />
 );
 PurpleMessage.displayName = 'PurpleMessage';
 
 // Custom Input with icon
-const IconInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  ({ ...props }, ref) => (
-    <div className="relative">
-      <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <title>Lock</title>
-          <path
-            fillRule="evenodd"
-            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-            clipRule="evenodd"
-          />
-        </svg>
-      </div>
-      <input
-        ref={ref}
-        {...props}
-        className="w-full rounded-md border border-gray-300 py-2 pl-10 pr-3 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-      />
+const IconInput = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <div className="relative">
+    <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <title>Lock</title>
+        <path
+          fillRule="evenodd"
+          d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+          clipRule="evenodd"
+        />
+      </svg>
     </div>
-  ),
+    <input
+      {...props}
+      className="w-full rounded-md border border-gray-300 py-2 pl-10 pr-3 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+    />
+  </div>
 );
 IconInput.displayName = 'IconInput';
 
@@ -142,6 +136,7 @@ const meta: Meta<typeof TextField> = {
       routes: [
         {
           path: '/',
+          Component: CustomTextFieldExample,
           action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
         },
       ],
@@ -153,6 +148,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const CustomComponents: Story = {
+  render: () => <CustomTextFieldExample />,
   parameters: {
     docs: {
       description: {
@@ -194,25 +190,20 @@ Where the custom components are defined as:
 
 \`\`\`tsx
 // Custom Input component
-const PurpleInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>((props, ref) => (
+const PurpleInput = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
   <input
-    ref={ref}
     {...props}
     className="w-full rounded-lg border-2 border-purple-300 bg-purple-50 px-4 py-2 text-purple-900 placeholder:text-purple-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
   />
-));
+);
 
 // Custom Form Label component
-const PurpleLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof FormLabel>>(
-  ({ className, ...props }, ref) => <FormLabel ref={ref} className="text-lg font-bold text-purple-700" {...props} />,
-);
+const PurpleLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => 
+  <FormLabel className="text-lg font-bold text-purple-700" {...props} />;
 
 // Custom Form Message component
-const PurpleMessage = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<typeof FormMessage>>(
-  ({ className, ...props }, ref) => (
-    <FormMessage ref={ref} className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />
-  ),
-);
+const PurpleMessage = (props: React.ComponentPropsWithoutRef<typeof FormMessage>) => 
+  <FormMessage className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />;
 \`\`\`
 
 #### 3. Icon Input
@@ -234,26 +225,23 @@ The third text field demonstrates how to create a custom input with an icon:
 With the IconInput component defined as:
 
 \`\`\`tsx
-const IconInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  ({ ...props }, ref) => (
-    <div className="relative">
-      <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <title>Lock</title>
-          <path
-            fillRule="evenodd"
-            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-            clipRule="evenodd"
-          />
-        </svg>
-      </div>
-      <input
-        ref={ref}
-        {...props}
-        className="w-full rounded-md border border-gray-300 py-2 pl-10 pr-3 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-      />
+const IconInput = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <div className="relative">
+    <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <title>Lock</title>
+        <path
+          fillRule="evenodd"
+          d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+          clipRule="evenodd"
+        />
+      </svg>
     </div>
-  ),
+    <input
+      {...props}
+      className="w-full rounded-md border border-gray-300 py-2 pl-10 pr-3 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+    />
+  </div>
 );
 \`\`\`
 
diff --git a/apps/docs/src/remix-hook-form/text-field.stories.tsx b/apps/docs/src/remix-hook-form/text-field.stories.tsx
index 5dbb4b83..b1c63649 100644
--- a/apps/docs/src/remix-hook-form/text-field.stories.tsx
+++ b/apps/docs/src/remix-hook-form/text-field.stories.tsx
@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field';
 import { Button } from '@lambdacurry/forms/ui/button';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryContext, StoryObj } from '@storybook/react';
 import { expect, userEvent } from '@storybook/test';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
-import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
+import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
@@ -36,19 +36,6 @@ const ControlledTextFieldExample = () => {
       action: '/',
       method: 'post',
     },
-    submitHandlers: {
-      onValid: (data) => {
-        fetcher.submit(
-          createFormData({
-            email: data.email,
-          }),
-          {
-            method: 'post',
-            action: '/',
-          },
-        );
-      },
-    },
   });
 
   return (
@@ -88,7 +75,18 @@ const handleFormSubmission = async (request: Request) => {
     return { errors };
   }
 
-  return { message: 'Email submitted successfully', email: data.email };
+  // Check for taken username
+  if (data.username === USERNAME_TAKEN) {
+    return {
+      errors: {
+        username: {
+          message: USERNAME_TAKEN_ERROR,
+        },
+      },
+    };
+  }
+
+  return { message: 'Form submitted successfully', email: data.email };
 };
 
 const meta: Meta<typeof TextField> = {
@@ -162,7 +160,8 @@ export const Examples: Story = {
     withReactRouterStubDecorator({
       routes: [
         {
-          path: '/username',
+          path: '/',
+          Component: ControlledTextFieldExample,
           action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
         },
       ],
diff --git a/apps/docs/src/remix-hook-form/textarea-custom.stories.tsx b/apps/docs/src/remix-hook-form/textarea-custom.stories.tsx
index 9d1323fc..22b71af6 100644
--- a/apps/docs/src/remix-hook-form/textarea-custom.stories.tsx
+++ b/apps/docs/src/remix-hook-form/textarea-custom.stories.tsx
@@ -20,76 +20,64 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 // Custom Textarea component
-const PurpleTextarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
-  (props, ref) => (
-    <textarea
-      ref={ref}
-      {...props}
-      className="w-full rounded-lg border-2 border-purple-300 bg-purple-50 px-4 py-2 text-purple-900 placeholder:text-purple-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 min-h-[100px]"
-    />
-  ),
+const PurpleTextarea = (props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => (
+  <textarea
+    {...props}
+    className="w-full rounded-lg border-2 border-purple-300 bg-purple-50 px-4 py-2 text-purple-900 placeholder:text-purple-400 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 min-h-[100px]"
+  />
 );
 PurpleTextarea.displayName = 'PurpleTextarea';
 
 // Custom Form Label component
-const PurpleLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof FormLabel>>(
-  ({ className, htmlFor, ...props }, ref) => (
-    <FormLabel ref={ref} className="text-lg font-bold text-purple-700" htmlFor={htmlFor} {...props} />
-  ),
-);
+const PurpleLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => {
+  const { className, htmlFor, ...rest } = props;
+  return <FormLabel className="text-lg font-bold text-purple-700" htmlFor={htmlFor} {...rest} />;
+};
 PurpleLabel.displayName = 'PurpleLabel';
 
 // Custom Form Message component
-const PurpleMessage = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<typeof FormMessage>>(
-  ({ className, ...props }, ref) => (
-    <FormMessage ref={ref} className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />
-  ),
+const PurpleMessage = (props: React.ComponentPropsWithoutRef<typeof FormMessage>) => (
+  <FormMessage className="text-purple-500 bg-purple-50 p-2 rounded-md mt-1" {...props} />
 );
 PurpleMessage.displayName = 'PurpleMessage';
 
 // Custom Textarea with character counter
-const CounterTextarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
-  (props, ref) => {
-    const [charCount, setCharCount] = React.useState(props.value?.toString().length || 0);
+const CounterTextarea = (props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => {
+  const [charCount, setCharCount] = React.useState(props.value?.toString().length || 0);
 
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setCharCount(e.target.value.length);
-      props.onChange?.(e);
-    };
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCharCount(e.target.value.length);
+    props.onChange?.(e);
+  };
 
-    return (
-      <div className="relative">
-        <textarea
-          ref={ref}
-          {...props}
-          onChange={handleChange}
-          className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 min-h-[120px] pr-16"
-        />
-        <div className="absolute bottom-2 right-2 rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-500">
-          {charCount} chars
-        </div>
+  return (
+    <div className="relative">
+      <textarea
+        {...props}
+        onChange={handleChange}
+        className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 min-h-[120px] pr-16"
+      />
+      <div className="absolute bottom-2 right-2 rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-500">
+        {charCount} chars
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 CounterTextarea.displayName = 'CounterTextarea';
 
 // Custom FormItem component that ensures proper label-control association
-const AccessibleFormItem = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof FormItem>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
+const AccessibleFormItem = (props: React.ComponentPropsWithoutRef<typeof FormItem>) => {
+  const { className, ...rest } = props;
+  const id = React.useId();
 
-    return <FormItem ref={ref} className={className} {...props} data-testid={`form-item-${id}`} />;
-  },
-);
+  return <FormItem className={className} {...rest} data-testid={`form-item-${id}`} />;
+};
 AccessibleFormItem.displayName = 'AccessibleFormItem';
 
 // Custom FormControl component that ensures proper label-control association
-const AccessibleFormControl = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof FormControl>>(
-  (props, ref) => {
-    return <FormControl ref={ref} {...props} />;
-  },
-);
+const AccessibleFormControl = (props: React.ComponentPropsWithoutRef<typeof FormControl>) => {
+  return <FormControl {...props} />;
+};
 AccessibleFormControl.displayName = 'AccessibleFormControl';
 
 const CustomTextareaExample = () => {
@@ -188,6 +176,7 @@ const meta: Meta<typeof Textarea> = {
       routes: [
         {
           path: '/',
+          Component: CustomTextareaExample,
           action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
         },
       ],
@@ -243,6 +232,7 @@ This example uses direct DOM elements with explicit label-for associations to en
       },
     },
   },
+  render: () => <CustomTextareaExample />,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/apps/docs/vite.config.mjs b/apps/docs/vite.config.mjs
index feff04db..d5447bcc 100644
--- a/apps/docs/vite.config.mjs
+++ b/apps/docs/vite.config.mjs
@@ -20,4 +20,10 @@ export default defineConfig({
     },
   },
   plugins: [tailwindcss()],
+  server: {
+    historyApiFallback: true,
+  },
+  optimizeDeps: {
+    include: [],
+  },
 });
diff --git a/package.json b/package.json
index 2b7d0d02..6e3d49c9 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,14 @@
     "start": "yarn dev",
     "dev": "turbo run dev",
     "build": "turbo run build",
-    "build-storybook": "turbo run build-storybook",
+    "serve": "turbo run serve",
     "test": "turbo run test",
     "clean": "find . -name '.turbo' -type d -prune -exec rm -rf {} + && find . -name 'node_modules' -type d -prune -exec rm -rf {} + && find . -name 'yarn.lock' -type f -delete",
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write",
-    "release": "turbo run build && changeset publish"
+    "prerelease": "turbo run build",
+    "release": "changeset publish",
+    "build-storybook": "turbo run build-storybook"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 93737621..e5f5f5c3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,140 +1,18 @@
 # @lambdacurry/forms
 
-## 0.13.4
-
-### Patch Changes
-
-- 381cd02: Another attempt at a fix, this should do it
-
-## 0.13.3
-
-### Patch Changes
-
-- e0dde7d: Fixed the correct import paths
-
-## 0.13.2
-
-### Patch Changes
-
-- 2910e45: First one wasn't correct, but this should fix the exports
-
-## 0.13.1
-
-### Patch Changes
-
-- 459fa20: Added the correct export paths following the new structure
-
-## 0.13.0
-
-### Minor Changes
-
-- 4cd12c7: Changed the way components are imported and named to better fit and look better, similar to hookform
-
-## 0.12.6
-
-### Patch Changes
-
-- 88c5ee5: Fixed spacing for the checkbox label
-
-## 0.12.5
-
-### Patch Changes
-
-- 23a31e7: Added classnames to style the checkbox and actually check in the checkbox component
-
-## 0.12.4
-
-### Patch Changes
-
-- b668f74: Added the ability to pass in your own indicator to the radio group
-
-## 0.12.3
-
-### Patch Changes
-
-- e863d1b: Added remix-hook-form as a peer dependency
-
-## 0.12.2
+## 0.14.2
 
 ### Patch Changes
 
-- c39b177: Fixed versioning
+- Updated remix-hook-form to v7.0.0 for React Router 7 compatibility
+- Added example files demonstrating middleware usage
 
-## 0.12.1
+## 0.14.1
 
 ### Patch Changes
 
-- da26669: Updated remix-hook-form
-
-## 0.10.0
-
-### Minor Changes
-
-- 19b0854: Added remix textarea story and fixes a react error
-
-## 0.9.0
-
-### Minor Changes
-
-- 822f1cc: Updated the remix textarea to work correctly
-
-## 0.8.0
-
-### Minor Changes
-
-- 21db17d: Added an export for the remix textarea
-
-## 0.7.0
-
-### Minor Changes
-
-- b212565: Added a remix text area
-
-## 0.6.0
-
-### Minor Changes
-
-- 7a02de0: Fixed Textarea by using relative import
-
-## 0.5.0
-
-### Minor Changes
-
-- 9cba1b3: Updated export for Textarea
-
-## 0.4.0
-
-### Minor Changes
-
-- 9150b21: Added ShadCn Textarea
-
-## 0.3.0
-
-### Minor Changes
-
-- e8e0429: fix: Corrected file exports
-- a39e4b1: Removed component that is not needed
-
-## 0.2.0
-
-### Minor Changes
-
-- fc92a34: Fixed import errors
-
-## 0.1.0
-
-### Minor Changes
-
-- db7b88f: Made it easier to import components
+- 381cd02: Another attempt at a fix, this should do it
 
-## 0.0.2
+## 0.13.4
 
 ### Patch Changes
-
-- d3ab83e: Fixed errors and versioning differences
-
-## 0.0.1
-
-### Major Changes
-
-- ad8069e: Initial Release
diff --git a/packages/components/package.json b/packages/components/package.json
index 272fc7a1..3ba0899c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lambdacurry/forms",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "remix-hook-form": "6.1.3"
+    "remix-hook-form": "7.0.0"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -50,11 +50,14 @@
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-table": "^8.21.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "input-otp": "^1.4.1",
     "lucide-react": "^0.468.0",
@@ -63,7 +66,7 @@
     "react-hook-form": "^7.53.1",
     "react-router": "^7.0.0",
     "react-router-dom": "^7.0.0",
-    "remix-hook-form": "6.1.3",
+    "remix-hook-form": "7.0.0",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
diff --git a/packages/components/src/remix-hook-form/data-table-router-form.tsx b/packages/components/src/remix-hook-form/data-table-router-form.tsx
new file mode 100644
index 00000000..9535d103
--- /dev/null
+++ b/packages/components/src/remix-hook-form/data-table-router-form.tsx
@@ -0,0 +1,211 @@
+import {
+  type ColumnDef,
+  type ColumnFilter,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigation } from 'react-router-dom';
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
+import { z } from 'zod';
+
+import { DataTablePagination } from '../ui/data-table/data-table-pagination';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
+import { DataTableRouterToolbar, type DataTableRouterToolbarProps } from './data-table-router-toolbar';
+
+// Import the parsers and the inferred type
+import type { DataTableRouterState, FilterValue } from './data-table-router-parsers';
+import { getDefaultDataTableState, useDataTableUrlState } from './use-data-table-url-state';
+
+// Schema for form data validation and type safety
+const dataTableSchema = z.object({
+  search: z.string().optional(),
+  filters: z.array(z.object({ id: z.string(), value: z.any() })).optional(),
+  page: z.number().min(0).optional(),
+  pageSize: z.number().min(1).optional(),
+  sortField: z.string().optional(),
+  sortOrder: z.enum(['asc', 'desc']).optional(),
+});
+
+type DataTableFormData = z.infer<typeof dataTableSchema>;
+
+export interface DataTableRouterFormProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  filterableColumns?: DataTableRouterToolbarProps<TData>['filterableColumns'];
+  searchableColumns?: DataTableRouterToolbarProps<TData>['searchableColumns'];
+  pageCount?: number;
+  defaultStateValues?: Partial<DataTableRouterState>;
+}
+
+export function DataTableRouterForm<TData, TValue>({
+  columns,
+  data,
+  filterableColumns = [],
+  searchableColumns = [],
+  pageCount,
+  defaultStateValues,
+}: DataTableRouterFormProps<TData, TValue>) {
+  const navigation = useNavigation();
+  const isLoading = navigation.state === 'loading';
+
+  // Use our custom hook for URL state management
+  const { urlState, setUrlState } = useDataTableUrlState();
+
+  // Initialize RHF to *reflect* the URL state
+  const methods = useRemixForm<DataTableRouterState>({
+    // No resolver needed if Zod isn't primary validation driver here
+    defaultValues: urlState, // Initialize with current URL state
+  });
+
+  // Sync RHF state if urlState changes (e.g., back/forward, external link)
+  useEffect(() => {
+    // Only reset if the urlState differs from current RHF values
+    if (JSON.stringify(urlState) !== JSON.stringify(methods.getValues())) {
+      methods.reset(urlState);
+    }
+  }, [urlState, methods]);
+
+  // Local UI state (column visibility, row selection)
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+
+  // Table instance uses RHF state (which mirrors URL state)
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting: [{ id: urlState.sortField, desc: urlState.sortOrder === 'desc' }],
+      columnFilters: urlState.filters as ColumnFilter[],
+      pagination: { pageIndex: urlState.page, pageSize: urlState.pageSize },
+      columnVisibility,
+      rowSelection,
+    },
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+    pageCount,
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+
+    // Define callbacks inline
+    onSortingChange: (updater) => {
+      const currentSorting = table.getState().sorting;
+      const sorting = typeof updater === 'function' ? updater(currentSorting) : updater;
+      setUrlState({
+        sortField: sorting[0]?.id ?? '',
+        sortOrder: sorting[0]?.desc ? 'desc' : 'asc',
+        page: 0,
+      });
+    },
+    onColumnFiltersChange: (updater) => {
+      const currentFilters = table.getState().columnFilters;
+      const filters = typeof updater === 'function' ? updater(currentFilters) : updater;
+      setUrlState({
+        filters: filters as FilterValue[],
+        page: 0,
+      });
+    },
+  });
+
+  // Determine default pageSize and visible columns for skeleton loader
+  const defaultDataTableState = getDefaultDataTableState(defaultStateValues);
+  const visibleColumns = table.getVisibleFlatColumns();
+  // Generate stable IDs for skeleton rows based on current pageSize or fallback
+  const skeletonRowIds = useMemo(() => {
+    const count = urlState.pageSize > 0 ? urlState.pageSize : defaultDataTableState.pageSize;
+    return Array.from({ length: count }, () => window.crypto.randomUUID());
+  }, [urlState.pageSize, defaultDataTableState.pageSize]);
+
+  // Pagination handler updates URL state
+  const handlePaginationChange = useCallback(
+    (pageIndex: number, newPageSize: number) => {
+      setUrlState({ page: pageIndex, pageSize: newPageSize });
+    },
+    [setUrlState],
+  );
+
+  // Get default state values using our utility function
+  const standardStateValues = getDefaultDataTableState(defaultStateValues);
+
+  // Handle pagination props separately
+  const paginationProps = {
+    pageCount: pageCount || 0,
+    onPaginationChange: handlePaginationChange,
+  };
+
+  return (
+    <RemixFormProvider {...methods}>
+      <div className="space-y-4">
+        <DataTableRouterToolbar<TData>
+          table={table}
+          filterableColumns={filterableColumns}
+          searchableColumns={searchableColumns}
+          setUrlState={setUrlState}
+          defaultStateValues={standardStateValues}
+        />
+
+        {/* Table Rendering */}
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id} colSpan={header.colSpan}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {isLoading ? (
+                // Skeleton rows matching pageSize with zebra background
+                skeletonRowIds.map((rowId) => (
+                  <TableRow key={rowId} className="even:bg-gray-50">
+                    {visibleColumns.map((column) => (
+                      <TableCell key={column.id} className="py-2">
+                        <div className="h-6 my-1.5 bg-gray-200 rounded animate-pulse w-full" />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className="even:bg-gray-50">
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        <DataTablePagination {...paginationProps} />
+      </div>
+    </RemixFormProvider>
+  );
+}
diff --git a/packages/components/src/remix-hook-form/data-table-router-parsers.ts b/packages/components/src/remix-hook-form/data-table-router-parsers.ts
new file mode 100644
index 00000000..cce39518
--- /dev/null
+++ b/packages/components/src/remix-hook-form/data-table-router-parsers.ts
@@ -0,0 +1,108 @@
+
+// Define and export the shape of a single filter
+export interface FilterValue {
+  // Export the interface
+  id: string;
+  value: unknown; // Keep unknown for flexibility, JSON handles serialization
+}
+
+// Runtime parser for FilterValue[]
+const parseFilterValueArray = (value: unknown): FilterValue[] => {
+  if (!Array.isArray(value)) throw new Error('Expected array');
+  return value.map((item) => {
+    if (
+      typeof item !== 'object' ||
+      item === null ||
+      !('id' in item) ||
+      typeof item.id !== 'string' ||
+      !('value' in item)
+    ) {
+      throw new Error('Invalid filter value');
+    }
+    return { id: item.id, value: item.value };
+  });
+};
+
+// Custom parsers to replace nuqs parsers
+export const parseAsString = {
+  parse: (value: string | null): string => {
+    return value || '';
+  },
+  serialize: (value: string | null): string | null => {
+    return value === '' ? null : value;
+  },
+};
+
+export const parseAsInteger = {
+  parse: (value: string | null): number => {
+    if (!value) return 0;
+    const parsed = parseInt(value, 10);
+    return isNaN(parsed) ? 0 : parsed;
+  },
+  serialize: (value: number | null): string | null => {
+    return value === 0 ? null : value?.toString() || null;
+  },
+};
+
+export const parseAsJson = <T>(validator: (value: unknown) => T) => ({
+  parse: (value: string | null): T | null => {
+    if (!value) return null;
+    try {
+      const parsed = JSON.parse(value);
+      return validator(parsed);
+    } catch (e) {
+      console.error('Error parsing JSON:', e);
+      return null;
+    }
+  },
+  serialize: (value: T | null): string | null => {
+    if (value === null) return null;
+    return JSON.stringify(value);
+  },
+});
+
+// Export the parsers with default values
+export const dataTableRouterParsers = {
+  search: {
+    parse: parseAsString.parse,
+    serialize: parseAsString.serialize,
+    defaultValue: '',
+  },
+  filters: {
+    parse: (value: string | null) => parseAsJson<FilterValue[]>(parseFilterValueArray).parse(value) || [],
+    serialize: (value: FilterValue[] | null) => {
+      return value && value.length > 0 ? parseAsJson<FilterValue[]>(parseFilterValueArray).serialize(value) : null;
+    },
+    defaultValue: [] as FilterValue[],
+  },
+  page: {
+    parse: parseAsInteger.parse,
+    serialize: parseAsInteger.serialize,
+    defaultValue: 0,
+  },
+  pageSize: {
+    parse: parseAsInteger.parse,
+    serialize: parseAsInteger.serialize,
+    defaultValue: 10,
+  },
+  sortField: {
+    parse: parseAsString.parse,
+    serialize: parseAsString.serialize,
+    defaultValue: '',
+  },
+  sortOrder: {
+    parse: parseAsString.parse,
+    serialize: parseAsString.serialize,
+    defaultValue: 'asc',
+  },
+};
+
+// Export the inferred type for convenience
+export type DataTableRouterState = {
+  search: string;
+  filters: FilterValue[];
+  page: number;
+  pageSize: number;
+  sortField: string;
+  sortOrder: string;
+};
diff --git a/packages/components/src/remix-hook-form/data-table-router-toolbar.tsx b/packages/components/src/remix-hook-form/data-table-router-toolbar.tsx
new file mode 100644
index 00000000..ec6f964d
--- /dev/null
+++ b/packages/components/src/remix-hook-form/data-table-router-toolbar.tsx
@@ -0,0 +1,151 @@
+import { Cross2Icon } from '@radix-ui/react-icons';
+import type { Table } from '@tanstack/react-table';
+import { type ChangeEvent, useCallback } from 'react';
+import { useRemixFormContext } from 'remix-hook-form';
+
+import { Button } from '../ui/button';
+import { DataTableFacetedFilter } from '../ui/data-table/data-table-faceted-filter';
+import { DataTableViewOptions } from '../ui/data-table/data-table-view-options';
+import type { DataTableRouterState, FilterValue } from './data-table-router-parsers';
+import { TextField } from './text-field';
+
+export interface DataTableFilterOption {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+export interface DataTableFilterableColumn<TData> {
+  id: keyof TData | string;
+  title: string;
+  options: DataTableFilterOption[];
+}
+
+export interface DataTableSearchableColumn<TData> {
+  id: keyof TData | string;
+  title: string;
+}
+
+export interface DataTableRouterToolbarProps<TData> {
+  table: Table<TData>;
+  filterableColumns?: DataTableFilterableColumn<TData>[];
+  searchableColumns?: DataTableSearchableColumn<TData>[];
+  setUrlState: (state: Partial<DataTableRouterState>) => void;
+  defaultStateValues: DataTableRouterState;
+}
+
+export function DataTableRouterToolbar<TData>({
+  table,
+  filterableColumns = [],
+  searchableColumns = [],
+  setUrlState,
+  defaultStateValues,
+}: DataTableRouterToolbarProps<TData>) {
+  const { watch } = useRemixFormContext();
+  const watchedFilters = (watch('filters') || []) as FilterValue[];
+  const watchedSearch = watch('search') || '';
+
+  const handleSearchChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setUrlState({ search: event.target.value || '', page: 0 });
+    },
+    [setUrlState],
+  );
+
+  const handleFilterChange = useCallback(
+    (columnId: string, value: string[]) => {
+      const currentFilters = [...watchedFilters];
+      const existingFilterIndex = currentFilters.findIndex((filter: FilterValue) => filter.id === columnId);
+      let newFilters: FilterValue[];
+
+      if (value.length === 0 && existingFilterIndex !== -1) {
+        newFilters = currentFilters.filter((_, i) => i !== existingFilterIndex);
+      } else if (value.length === 0) {
+        newFilters = currentFilters;
+      } else if (existingFilterIndex !== -1) {
+        newFilters = [...currentFilters];
+        newFilters[existingFilterIndex] = { id: columnId, value };
+      } else {
+        newFilters = [...currentFilters, { id: columnId, value }];
+      }
+      setUrlState({ filters: newFilters, page: 0 });
+    },
+    [setUrlState, watchedFilters],
+  );
+
+  const handleReset = useCallback(() => {
+    setUrlState({
+      ...defaultStateValues,
+      search: '',
+      filters: [],
+    });
+  }, [setUrlState, defaultStateValues]);
+
+  const hasFiltersOrSearch = watchedFilters.length > 0 || watchedSearch.length > 0;
+
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+      {/* Search */}
+      {searchableColumns.length > 0 && (
+        <div className="flex flex-1 items-center space-x-2">
+          <div className="relative flex-1">
+            <TextField
+              name="search"
+              placeholder={`Search ${searchableColumns.map((column) => column.title).join(', ')}...`}
+              value={watchedSearch}
+              onChange={handleSearchChange}
+              className="w-full"
+              suffix={
+                watchedSearch ? (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 -mr-2"
+                    onClick={() => setUrlState({ search: '', page: 0 })}
+                  >
+                    <Cross2Icon className="h-4 w-4" />
+                    <span className="sr-only">Clear search</span>
+                  </Button>
+                ) : null
+              }
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="flex items-center space-x-2">
+        {filterableColumns.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {filterableColumns.map((column) => {
+              // Find the current filter value for this column
+              const currentFilter = watchedFilters.find((filter: FilterValue) => filter.id === column.id);
+              const selectedValues = (currentFilter?.value as string[]) || [];
+
+              return (
+                <DataTableFacetedFilter
+                  key={String(column.id)}
+                  title={column.title}
+                  options={column.options}
+                  selectedValues={selectedValues}
+                  onValuesChange={(values) => handleFilterChange(String(column.id), values)}
+                />
+              );
+            })}
+          </div>
+        )}
+
+        {/* Reset Button */}
+        {hasFiltersOrSearch && (
+          <Button variant="ghost" onClick={handleReset} className="h-8 px-2 lg:px-3">
+            Reset
+            <Cross2Icon className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+
+        {/* View Options */}
+        <DataTableViewOptions columns={table.getAllColumns()} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/src/remix-hook-form/form.tsx b/packages/components/src/remix-hook-form/form.tsx
index 914f0e4a..4d7d50a2 100644
--- a/packages/components/src/remix-hook-form/form.tsx
+++ b/packages/components/src/remix-hook-form/form.tsx
@@ -1,11 +1,16 @@
-// 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';
+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'> {
+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;
@@ -19,7 +24,9 @@ export const useFormField = () => {
   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.');
+    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;
@@ -39,7 +46,7 @@ export const FormLabel = React.forwardRef<HTMLLabelElement, React.ComponentProps
 );
 FormLabel.displayName = 'FormLabel';
 
-export const FormControl = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof BaseFormControl>>(
+export const FormControl = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof BaseFormControl>>(
   (props, ref) => {
     const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
     return (
@@ -56,20 +63,20 @@ export const FormControl = React.forwardRef<HTMLDivElement, React.ComponentProps
 );
 FormControl.displayName = 'FormControl';
 
-export const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<typeof BaseFormDescription>
->((props, ref) => {
+export const FormDescription = (props: React.ComponentPropsWithoutRef<typeof BaseFormDescription>) => {
   const { formDescriptionId } = useFormField();
-  return <BaseFormDescription ref={ref} formDescriptionId={formDescriptionId} {...props} />;
-});
+  return <BaseFormDescription formDescriptionId={formDescriptionId} {...props} />;
+};
 FormDescription.displayName = 'FormDescription';
 
-export const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<typeof BaseFormMessage>
->((props, ref) => {
+export const FormMessage = (props: React.ComponentPropsWithoutRef<typeof BaseFormMessage>) => {
   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
+  return (
+    <BaseFormMessage
+      formMessageId={formMessageId}
+      error={error?.message || (error ? String(error) : undefined)}
+      {...props}
+    />
+  );
+};
+FormMessage.displayName = 'FormMessage';
diff --git a/packages/components/src/remix-hook-form/index.ts b/packages/components/src/remix-hook-form/index.ts
index efe42826..1256860d 100644
--- a/packages/components/src/remix-hook-form/index.ts
+++ b/packages/components/src/remix-hook-form/index.ts
@@ -1,9 +1,14 @@
-export * from './text-field';
-export * from './form';
 export * from './checkbox';
+export * from './form';
 export * from './date-picker';
 export * from './dropdown-menu-select';
-export * from './otp-input';
+export * from './text-field';
 export * from './radio-group';
+export * from './radio-group-item';
 export * from './switch';
 export * from './textarea';
+export * from './otp-input';
+export * from './data-table-router-form';
+export * from './data-table-router-parsers';
+export * from './data-table-router-toolbar';
+export * from './use-data-table-url-state';
diff --git a/packages/components/src/remix-hook-form/radio-group-item.tsx b/packages/components/src/remix-hook-form/radio-group-item.tsx
new file mode 100644
index 00000000..e6a4f46f
--- /dev/null
+++ b/packages/components/src/remix-hook-form/radio-group-item.tsx
@@ -0,0 +1,20 @@
+import { Label } from '../ui/label';
+import {
+  RadioGroupItemField,
+  type RadioGroupItemFieldComponents,
+  type RadioGroupItemFieldProps,
+} from '../ui/radio-group-item-field';
+
+export type RadioGroupItemProps = RadioGroupItemFieldProps;
+
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  // Ensure we preserve any custom components passed in while providing defaults
+  const components: Partial<RadioGroupItemFieldComponents> = {
+    Label,
+    ...props.components,
+  };
+
+  return <RadioGroupItemField {...props} components={components} />;
+}
+
+RadioGroupItem.displayName = 'RadioGroupItem';
diff --git a/packages/components/src/remix-hook-form/radio-group.tsx b/packages/components/src/remix-hook-form/radio-group.tsx
index 757b5c8d..6d90dc5f 100644
--- a/packages/components/src/remix-hook-form/radio-group.tsx
+++ b/packages/components/src/remix-hook-form/radio-group.tsx
@@ -5,11 +5,24 @@ import {
   type RadioGroupFieldProps as BaseRadioGroupFieldProps,
   type RadioGroupFieldComponents,
 } from '../ui/radio-group-field';
+import { RadioGroupItem } from './radio-group-item';
 
-export type RadioGroupFieldProps = Omit<BaseRadioGroupFieldProps, 'control'>;
+export type RadioOption = {
+  value: string;
+  label: string;
+  id?: string;
+  disabled?: boolean;
+};
+
+export type RadioGroupFieldProps = Omit<BaseRadioGroupFieldProps, 'control'> & {
+  options?: RadioOption[];
+  itemClassName?: string;
+  labelClassName?: string;
+};
 
 export function RadioGroup(props: RadioGroupFieldProps) {
   const { control } = useRemixFormContext();
+  const { options, itemClassName, labelClassName, children, ...restProps } = props;
 
   const components: Partial<RadioGroupFieldComponents> = {
     FormControl,
@@ -19,5 +32,21 @@ export function RadioGroup(props: RadioGroupFieldProps) {
     ...props.components,
   };
 
-  return <BaseRadioGroupField control={control} {...props} components={components} />;
+  return (
+    <BaseRadioGroupField control={control} {...restProps} components={components}>
+      {options
+        ? options.map((option) => (
+            <RadioGroupItem
+              key={option.value}
+              value={option.value}
+              id={option.id || option.value}
+              disabled={option.disabled}
+              label={option.label}
+              labelClassName={labelClassName}
+              wrapperClassName={itemClassName}
+            />
+          ))
+        : children}
+    </BaseRadioGroupField>
+  );
 }
diff --git a/packages/components/src/remix-hook-form/text-field.tsx b/packages/components/src/remix-hook-form/text-field.tsx
index 8db979bb..45ded662 100644
--- a/packages/components/src/remix-hook-form/text-field.tsx
+++ b/packages/components/src/remix-hook-form/text-field.tsx
@@ -1,7 +1,8 @@
-import { useRemixFormContext } from 'remix-hook-form';
-import { TextField as BaseTextField, type TextFieldProps as BaseTextFieldProps } from '../ui/text-field';
+import { TextField as BaseTextField, type TextInputProps as BaseTextFieldProps } from '../ui/text-field';
 import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
+import { useRemixFormContext } from 'remix-hook-form';
+
 export type TextFieldProps = Omit<BaseTextFieldProps, 'control'>;
 
 export function TextField(props: TextFieldProps) {
diff --git a/packages/components/src/remix-hook-form/use-data-table-url-state.ts b/packages/components/src/remix-hook-form/use-data-table-url-state.ts
new file mode 100644
index 00000000..56d3562b
--- /dev/null
+++ b/packages/components/src/remix-hook-form/use-data-table-url-state.ts
@@ -0,0 +1,89 @@
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { type DataTableRouterState, dataTableRouterParsers } from './data-table-router-parsers';
+
+/**
+ * Custom hook for managing URL state in data tables
+ * 
+ * This hook provides a clean interface for working with URL search parameters
+ * in data table components, replacing the functionality previously provided by nuqs.
+ * 
+ * @returns An object containing the current URL state and a function to update it
+ */
+export function useDataTableUrlState() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  
+  // Parse URL search parameters using our custom parsers
+  const urlState: DataTableRouterState = {
+    search: dataTableRouterParsers.search.parse(searchParams.get('search')),
+    filters: dataTableRouterParsers.filters.parse(searchParams.get('filters')),
+    page: dataTableRouterParsers.page.parse(searchParams.get('page')),
+    pageSize: dataTableRouterParsers.pageSize.parse(searchParams.get('pageSize')),
+    sortField: dataTableRouterParsers.sortField.parse(searchParams.get('sortField')),
+    sortOrder: dataTableRouterParsers.sortOrder.parse(searchParams.get('sortOrder')),
+  };
+
+  // Function to update URL search parameters
+  const setUrlState = useCallback(
+    (newState: Partial<DataTableRouterState>) => {
+      const updatedState = { ...urlState, ...newState };
+      const newParams = new URLSearchParams();
+
+      // Only add parameters that are not default values
+      if (updatedState.search !== dataTableRouterParsers.search.defaultValue) {
+        const serialized = dataTableRouterParsers.search.serialize(updatedState.search);
+        if (serialized !== null) newParams.set('search', serialized);
+      }
+
+      if (updatedState.filters.length > 0) {
+        const serialized = dataTableRouterParsers.filters.serialize(updatedState.filters);
+        if (serialized !== null) newParams.set('filters', serialized);
+      }
+
+      if (updatedState.page !== dataTableRouterParsers.page.defaultValue) {
+        const serialized = dataTableRouterParsers.page.serialize(updatedState.page);
+        if (serialized !== null) newParams.set('page', serialized);
+      }
+
+      if (updatedState.pageSize !== dataTableRouterParsers.pageSize.defaultValue) {
+        const serialized = dataTableRouterParsers.pageSize.serialize(updatedState.pageSize);
+        if (serialized !== null) newParams.set('pageSize', serialized);
+      }
+
+      if (updatedState.sortField !== dataTableRouterParsers.sortField.defaultValue) {
+        const serialized = dataTableRouterParsers.sortField.serialize(updatedState.sortField);
+        if (serialized !== null) newParams.set('sortField', serialized);
+      }
+
+      if (updatedState.sortOrder !== dataTableRouterParsers.sortOrder.defaultValue) {
+        const serialized = dataTableRouterParsers.sortOrder.serialize(updatedState.sortOrder);
+        if (serialized !== null) newParams.set('sortOrder', serialized);
+      }
+
+      // Update the URL with the new search parameters
+      setSearchParams(newParams, { replace: true });
+    },
+    [urlState, setSearchParams]
+  );
+
+  // Return the current URL state and the function to update it
+  return { urlState, setUrlState };
+}
+
+/**
+ * Get the default state values for a data table
+ * 
+ * @param defaultStateValues Optional custom default values to override the standard ones
+ * @returns A DataTableRouterState object with default values
+ */
+export function getDefaultDataTableState(defaultStateValues?: Partial<DataTableRouterState>): DataTableRouterState {
+  return {
+    search: dataTableRouterParsers.search.defaultValue,
+    filters: dataTableRouterParsers.filters.defaultValue,
+    page: dataTableRouterParsers.page.defaultValue,
+    pageSize: dataTableRouterParsers.pageSize.defaultValue,
+    sortField: dataTableRouterParsers.sortField.defaultValue,
+    sortOrder: dataTableRouterParsers.sortOrder.defaultValue,
+    ...defaultStateValues,
+  };
+}
diff --git a/packages/components/src/ui/badge.tsx b/packages/components/src/ui/badge.tsx
new file mode 100644
index 00000000..1542a6b5
--- /dev/null
+++ b/packages/components/src/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from './utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
\ No newline at end of file
diff --git a/packages/components/src/ui/command.tsx b/packages/components/src/ui/command.tsx
new file mode 100644
index 00000000..80686eae
--- /dev/null
+++ b/packages/components/src/ui/command.tsx
@@ -0,0 +1,108 @@
+import { Dialog, DialogContent, type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import type * as React from 'react';
+
+import { cn } from './utils';
+
+const Command = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => (
+  <CommandPrimitive
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
+    {...props}
+  />
+);
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      className={cn(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+);
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>) => (
+  <CommandPrimitive.List className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)} {...props} />
+);
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = (props: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>) => (
+  <CommandPrimitive.Empty className="py-6 text-center text-sm" {...props} />
+);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>) => (
+  <CommandPrimitive.Group
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+);
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>) => (
+  <CommandPrimitive.Separator className={cn('-mx-1 h-px bg-border', className)} {...props} />
+);
+
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>) => (
+  <CommandPrimitive.Item
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+);
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/packages/components/src/ui/data-table/data-table-column-header.tsx b/packages/components/src/ui/data-table/data-table-column-header.tsx
new file mode 100644
index 00000000..dd951a44
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table-column-header.tsx
@@ -0,0 +1,81 @@
+import type { Column } from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ArrowUpDown, EyeOff } from 'lucide-react';
+import { useSearchParams } from 'react-router-dom';
+
+import { Button } from '../button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu';
+
+interface DataTableColumnHeaderProps<TData, TValue> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({ column, title }: DataTableColumnHeaderProps<TData, TValue>) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sort = searchParams.get('sortField');
+  const order = searchParams.get('sortOrder') || 'asc';
+  const isSorted = sort === column.id;
+
+  const handleSort = () => {
+    const newParams = new URLSearchParams(searchParams);
+    
+    if (isSorted) {
+      if (order === 'asc') {
+        newParams.set('sortOrder', 'desc');
+        column.toggleSorting(true);
+      } else {
+        newParams.delete('sortField');
+        newParams.set('sortOrder', 'asc');
+        column.toggleSorting(false);
+      }
+    } else {
+      newParams.set('sortField', column.id);
+      newParams.set('sortOrder', 'asc');
+      column.toggleSorting(false);
+    }
+    
+    setSearchParams(newParams, { replace: true });
+  };
+
+  if (!column.getCanSort()) {
+    return <div className="text-left">{title}</div>;
+  }
+
+  return (
+    <div className="flex items-center space-x-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="-ml-3 h-10 data-[state=open]:bg-accent">
+            <span>{title}</span>
+            {isSorted ? (
+              order === 'desc' ? (
+                <ArrowDown className="ml-2 h-4 w-4" />
+              ) : (
+                <ArrowUp className="ml-2 h-4 w-4" />
+              )
+            ) : (
+              <ArrowUpDown className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={handleSort}>
+            <ArrowUpDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Sort
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/packages/components/src/ui/data-table/data-table-faceted-filter.tsx b/packages/components/src/ui/data-table/data-table-faceted-filter.tsx
new file mode 100644
index 00000000..7428b6eb
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table-faceted-filter.tsx
@@ -0,0 +1,151 @@
+import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
+import type { Column } from '@tanstack/react-table';
+import type * as React from 'react';
+import { useEffect, useState } from 'react';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '../command';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Separator } from '../separator';
+import { cn } from '../utils';
+
+interface DataTableFacetedFilterProps<TData> {
+  column?: Column<TData, unknown>;
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  selectedValues?: string[];
+  onValuesChange?: (values: string[]) => void;
+}
+
+export function DataTableFacetedFilter<TData>({
+  column,
+  title,
+  options,
+  selectedValues = [],
+  onValuesChange,
+}: DataTableFacetedFilterProps<TData>) {
+  const facets = column?.getFacetedUniqueValues();
+  const [selected, setSelected] = useState<Set<string>>(new Set(selectedValues));
+
+  // Sync with external changes
+  useEffect(() => {
+    setSelected(new Set(selectedValues || (column?.getFilterValue() as string[])));
+  }, [selectedValues, column]);
+
+  const handleValueChange = (value: string) => {
+    setSelected((current) => {
+      const next = new Set(current);
+      if (next.has(value)) {
+        next.delete(value);
+      } else {
+        next.add(value);
+      }
+      const filterValues = Array.from(next);
+      
+      if (onValuesChange) {
+        onValuesChange(filterValues);
+      } else if (column) {
+        column.setFilterValue(filterValues.length ? filterValues : undefined);
+      }
+      
+      return next;
+    });
+  };
+
+  const handleClear = () => {
+    setSelected(new Set());
+    if (onValuesChange) {
+      onValuesChange([]);
+    } else if (column) {
+      column.setFilterValue(undefined);
+    }
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-10 border-dashed">
+          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          {title}
+          {selected.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                {selected.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selected.size > 2 ? (
+                  <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                    {selected.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selected.has(option.value))
+                    .map((option) => (
+                      <Badge variant="secondary" key={option.value} className="rounded-sm px-1 font-normal">
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selected.has(option.value);
+                return (
+                  <CommandItem key={option.value} onSelect={() => handleValueChange(option.value)}>
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible',
+                      )}
+                    >
+                      <CheckIcon className={cn('h-4 w-4')} />
+                    </div>
+                    {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selected.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem onSelect={handleClear} className="justify-center text-center">
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/packages/components/src/ui/data-table/data-table-hooks.ts b/packages/components/src/ui/data-table/data-table-hooks.ts
new file mode 100644
index 00000000..c7661f90
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table-hooks.ts
@@ -0,0 +1,121 @@
+import { type ComponentType, useCallback, useEffect, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { debounce } from '../utils/debounce';
+import { type DataTableFilterParams, createFilterSchema } from './data-table-schema';
+
+/**
+ * Custom hook for managing data table filter state in the URL
+ */
+export function useDataTableUrlState<TData>({
+  filterableColumns = [],
+  searchableColumns = [],
+  defaultSort,
+  debounceMs = 300,
+}: {
+  filterableColumns?: {
+    id: keyof TData;
+    title: string;
+    options: {
+      label: string;
+      value: string;
+      icon?: ComponentType<{ className?: string }>;
+    }[];
+  }[];
+  searchableColumns?: {
+    id: keyof TData;
+    title: string;
+  }[];
+  defaultSort?: {
+    id: string;
+    desc: boolean;
+  };
+  debounceMs?: number;
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Create a schema for the filter parameters based on the column configuration
+  const filterSchema = useMemo(() => {
+    return createFilterSchema<TData>(filterableColumns, searchableColumns);
+  }, [filterableColumns, searchableColumns]);
+
+  // Parse the current URL search params using the schema
+  const parseSearchParams = useCallback(() => {
+    const params: Record<string, string | string[]> = {};
+
+    // Extract all search params
+    for (const [key, value] of searchParams.entries()) {
+      // Handle array values (like filter arrays)
+      if (params[key]) {
+        if (Array.isArray(params[key])) {
+          (params[key] as string[]).push(value);
+        } else {
+          params[key] = [params[key] as string, value];
+        }
+      } else {
+        params[key] = value;
+      }
+    }
+
+    // Parse with the schema, using safe parse to handle validation errors
+    const result = filterSchema.safeParse(params);
+
+    if (result.success) {
+      return result.data;
+    }
+
+    // If validation fails, return defaults from the schema
+    return filterSchema.parse({}) as DataTableFilterParams;
+  }, [searchParams, filterSchema]);
+
+  // Get the current filter state from URL
+  const filterState = useMemo(() => {
+    return parseSearchParams();
+  }, [parseSearchParams]);
+
+  // Create a debounced version of setSearchParams
+  const debouncedSetSearchParams = useMemo(() => {
+    return debounce((newParams: Record<string, string | string[] | number | undefined>) => {
+      // Remove undefined or null values
+      const cleanParams = Object.fromEntries(
+        Object.entries(newParams)
+          .filter(([_, value]) => value != null && value !== '')
+          .map(([key, value]) => [key, Array.isArray(value) ? value : String(value)]),
+      );
+
+      setSearchParams(cleanParams);
+    }, debounceMs);
+  }, [setSearchParams, debounceMs]);
+
+  // Update URL search params
+  const updateFilterState = useCallback(
+    (updates: Partial<DataTableFilterParams>) => {
+      const currentState = parseSearchParams();
+      const newState = { ...currentState, ...updates } as Record<string, string | string[] | number | undefined>;
+
+      // Remove null/undefined values and empty strings
+      Object.keys(newState).forEach((key) => {
+        if (newState[key] === null || newState[key] === undefined || newState[key] === '') {
+          delete newState[key];
+        }
+      });
+
+      debouncedSetSearchParams(newState);
+    },
+    [parseSearchParams, debouncedSetSearchParams],
+  );
+
+  // Initialize with default sort if provided and not already in URL
+  useEffect(() => {
+    if (defaultSort && !searchParams.has('sortField')) {
+      updateFilterState({
+        sortField: defaultSort.id,
+        sortOrder: defaultSort.desc ? 'desc' : 'asc',
+      });
+    }
+  }, [defaultSort, searchParams, updateFilterState]);
+
+  return {
+    filterState,
+    updateFilterState,
+  };
+}
diff --git a/packages/components/src/ui/data-table/data-table-pagination.tsx b/packages/components/src/ui/data-table/data-table-pagination.tsx
new file mode 100644
index 00000000..396b1833
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table-pagination.tsx
@@ -0,0 +1,90 @@
+import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from '@radix-ui/react-icons';
+import { useSearchParams } from 'react-router-dom';
+import { Button } from '../button';
+import { Select } from '../select';
+
+interface DataTablePaginationProps {
+  pageCount: number;
+  onPaginationChange?: (pageIndex: number, pageSize: number) => void;
+}
+
+export function DataTablePagination({ pageCount, onPaginationChange }: DataTablePaginationProps) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = parseInt(searchParams.get('page') || '0', 10);
+  const pageSize = parseInt(searchParams.get('pageSize') || '10', 10);
+
+  const updateParams = (newPage: number, newPageSize: number) => {
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set('page', newPage.toString());
+    newParams.set('pageSize', newPageSize.toString());
+    setSearchParams(newParams, { replace: true });
+    onPaginationChange?.(newPage, newPageSize);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between px-2 py-2">
+      <div className="flex-1 text-sm text-muted-foreground">
+        {pageSize} rows per page
+      </div>
+      <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 lg:gap-8">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium whitespace-nowrap">Rows per page</p>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={(value) => {
+              updateParams(page, Number.parseInt(value));
+            }}
+            options={[
+              { value: '10', label: '10' },
+              { value: '20', label: '20' },
+              { value: '30', label: '30' },
+              { value: '40', label: '40' },
+              { value: '50', label: '50' },
+            ]}
+          />
+        </div>
+        <div className="flex w-full sm:w-auto justify-center text-sm font-medium">
+          Page {page + 1} of {pageCount}
+        </div>
+        <div className="flex items-center justify-center gap-2">
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => updateParams(0, pageSize)}
+            disabled={page === 0}
+          >
+            <span className="sr-only">Go to first page</span>
+            <DoubleArrowLeftIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => updateParams(page - 1, pageSize)}
+            disabled={page === 0}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeftIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => updateParams(page + 1, pageSize)}
+            disabled={page === pageCount - 1}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRightIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => updateParams(pageCount - 1, pageSize)}
+            disabled={page === pageCount - 1}
+          >
+            <span className="sr-only">Go to last page</span>
+            <DoubleArrowRightIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/src/ui/data-table/data-table-schema.ts b/packages/components/src/ui/data-table/data-table-schema.ts
new file mode 100644
index 00000000..afa7da73
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table-schema.ts
@@ -0,0 +1,69 @@
+import { z } from 'zod';
+
+/**
+ * Schema for data table filter parameters
+ */
+export const dataTableFilterSchema = z
+  .object({
+    // Pagination
+    page: z.coerce.number().int().min(0).default(0),
+    pageSize: z.coerce.number().int().min(1).default(10),
+
+    // Sorting
+    sortField: z.string().optional(),
+    sortOrder: z.enum(['asc', 'desc']).default('asc'),
+
+    // Search
+    dataTableSearch: z.string().optional(),
+  })
+  .passthrough(); // Allow additional properties
+
+/**
+ * Type for data table filter parameters
+ */
+export type DataTableFilterParams = z.infer<typeof dataTableFilterSchema> & {
+  [key: string]: string | string[] | number | undefined;
+};
+
+/**
+ * Create a schema for a specific filter configuration
+ */
+export function createFilterSchema<TData>(
+  filterableColumns: {
+    id: keyof TData;
+    options: {
+      value: string;
+    }[];
+  }[] = [],
+  searchableColumns: {
+    id: keyof TData;
+  }[] = [],
+) {
+  // Create a shape object for the extended schema
+  const extendedShape: Record<string, z.ZodType<string | string[] | undefined>> = {};
+
+  // Add filter fields for each filterable column
+  filterableColumns.forEach((column) => {
+    const columnId = String(column.id);
+    const allowedValues = column.options.map((option) => option.value);
+
+    // Add the field to the shape
+    extendedShape[columnId] = z.array(z.enum(allowedValues as [string, ...string[]])).optional();
+  });
+
+  // Add search fields for each searchable column
+  searchableColumns.forEach((column) => {
+    const columnId = String(column.id);
+
+    // Add the search field to the shape
+    extendedShape[`search_${columnId}`] = z.string().optional();
+  });
+
+  // Merge the base schema with the extended shape
+  return z
+    .object({
+      ...dataTableFilterSchema.shape,
+      ...extendedShape,
+    })
+    .passthrough();
+}
diff --git a/packages/components/src/ui/data-table/data-table-toolbar.tsx b/packages/components/src/ui/data-table/data-table-toolbar.tsx
new file mode 100644
index 00000000..0a74863f
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table-toolbar.tsx
@@ -0,0 +1,92 @@
+import { Cross2Icon } from '@radix-ui/react-icons';
+import type { Table } from '@tanstack/react-table';
+import { useSearchParams } from 'react-router-dom';
+import type * as React from 'react';
+
+import { Button } from '../button';
+import { TextInput } from '../text-input';
+import { DataTableFacetedFilter } from './data-table-faceted-filter';
+import { DataTableViewOptions } from './data-table-view-options';
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  filterableColumns?: {
+    id: keyof TData;
+    title: string;
+    options: {
+      label: string;
+      value: string;
+      icon?: React.ComponentType<{ className?: string }>;
+    }[];
+  }[];
+  searchableColumns?: {
+    id: keyof TData;
+    title: string;
+  }[];
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  filterableColumns = [],
+  searchableColumns = [],
+}: DataTableToolbarProps<TData>) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const globalFilter = searchParams.get('search') || '';
+
+  const resetFilters = () => {
+    const newParams = new URLSearchParams(searchParams);
+    newParams.delete('search');
+    setSearchParams(newParams, { replace: true });
+    table.resetColumnFilters();
+  };
+
+  const updateSearch = (value: string) => {
+    const newParams = new URLSearchParams(searchParams);
+    if (value) {
+      newParams.set('search', value);
+    } else {
+      newParams.delete('search');
+    }
+    setSearchParams(newParams, { replace: true });
+    
+    searchableColumns.forEach((column) => {
+      table.getColumn(column.id as string)?.setFilterValue(value);
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 items-center space-x-2">
+        {searchableColumns.length > 0 && (
+          <TextInput
+            placeholder="Search..."
+            value={globalFilter}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              updateSearch(event.target.value);
+            }}
+            className="h-10 w-[150px] lg:w-[250px]"
+          />
+        )}
+        {filterableColumns.length > 0 &&
+          filterableColumns.map((column) => {
+            const tableColumn = table.getColumn(column.id as string);
+            return tableColumn ? (
+              <DataTableFacetedFilter
+                key={column.id as string}
+                column={tableColumn}
+                title={column.title}
+                options={column.options}
+              />
+            ) : null;
+          })}
+        {globalFilter && (
+          <Button variant="ghost" onClick={resetFilters} className="h-8 px-2 lg:px-3">
+            Reset
+            <Cross2Icon className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+      <DataTableViewOptions columns={table.getAllColumns()} />
+    </div>
+  );
+}
diff --git a/packages/components/src/ui/data-table/data-table-view-options.tsx b/packages/components/src/ui/data-table/data-table-view-options.tsx
new file mode 100644
index 00000000..253afadf
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table-view-options.tsx
@@ -0,0 +1,46 @@
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+import { MixerHorizontalIcon } from '@radix-ui/react-icons';
+import type { Column } from '@tanstack/react-table';
+import { Button } from '../button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '../dropdown-menu';
+
+interface DataTableViewOptionsProps<TData> {
+  columns: Column<TData, unknown>[];
+}
+
+export function DataTableViewOptions<TData>({ columns }: DataTableViewOptionsProps<TData>) {
+  const hideableColumns = columns.filter((column) => column.getCanHide());
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="ml-auto hidden h-10 lg:flex">
+          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {hideableColumns.map((column) => {
+          return (
+            <DropdownMenuCheckboxItem
+              key={column.id}
+              className="capitalize"
+              checked={column.getIsVisible()}
+              onCheckedChange={(value) => column.toggleVisibility(!!value)}
+            >
+              {column.id}
+            </DropdownMenuCheckboxItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/packages/components/src/ui/data-table/data-table.tsx b/packages/components/src/ui/data-table/data-table.tsx
new file mode 100644
index 00000000..d474d986
--- /dev/null
+++ b/packages/components/src/ui/data-table/data-table.tsx
@@ -0,0 +1,59 @@
+import { type Table as TableType, flexRender } from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+import { DataTablePagination } from './data-table-pagination';
+
+interface DataTableProps<TData> {
+  table: TableType<TData>;
+  columns: number;
+  pagination?: boolean;
+  onPaginationChange?: (pageIndex: number, pageSize: number) => void;
+  pageCount?: number;
+}
+
+export function DataTable<TData>({
+  table,
+  columns,
+  pagination,
+  onPaginationChange,
+  pageCount = 1,
+}: DataTableProps<TData>) {
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} colSpan={header.colSpan}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {pagination && <DataTablePagination pageCount={pageCount} onPaginationChange={onPaginationChange} />}
+    </div>
+  );
+}
diff --git a/packages/components/src/ui/data-table/index.ts b/packages/components/src/ui/data-table/index.ts
new file mode 100644
index 00000000..2076174e
--- /dev/null
+++ b/packages/components/src/ui/data-table/index.ts
@@ -0,0 +1,10 @@
+export * from './data-table';
+export * from './data-table-column-header';
+export * from './data-table-faceted-filter';
+export * from './data-table-pagination';
+export * from './data-table-toolbar';
+export * from './data-table-view-options';
+export * from '../../remix-hook-form/data-table-router-form';
+export * from '../../remix-hook-form/data-table-router-toolbar';
+export * from './data-table-schema';
+export * from './data-table-hooks';
diff --git a/packages/components/src/ui/dropdown-menu-select-field.tsx b/packages/components/src/ui/dropdown-menu-select-field.tsx
index 07246cbe..8ca4fb28 100644
--- a/packages/components/src/ui/dropdown-menu-select-field.tsx
+++ b/packages/components/src/ui/dropdown-menu-select-field.tsx
@@ -1,9 +1,15 @@
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import type * as React from 'react';
+import { createContext, useContext, useState } from 'react';
 import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 import { Button } from './button';
 import { DropdownMenuContent } from './dropdown-menu';
+import {
+  DropdownMenuCheckboxItem as BaseDropdownMenuCheckboxItem,
+  DropdownMenuItem as BaseDropdownMenuItem,
+  DropdownMenuRadioItem as BaseDropdownMenuRadioItem,
+} from './dropdown-menu';
 import {
   type FieldComponents,
   FormControl,
@@ -44,11 +50,13 @@ export function DropdownMenuSelectField<
   components,
   ...props
 }: DropdownMenuSelectProps<TFieldValues, TName>) {
+  const [open, setOpen] = useState(false);
+
   return (
     <FormField
       control={control}
       name={name}
-      render={({ field, fieldState }) => (
+      render={({ field, fieldState, formState }) => (
         <FormItem className={className}>
           {label && (
             <FormLabel Component={components?.FormLabel} className={labelClassName}>
@@ -56,13 +64,21 @@ export function DropdownMenuSelectField<
             </FormLabel>
           )}
           <FormControl>
-            <DropdownMenuPrimitive.Root {...field} {...props} data-slot="dropdown-menu-select-root">
-              <DropdownMenuPrimitive.Trigger asChild>
-                <Button className={dropdownClassName} data-slot="dropdown-select-trigger">
-                  {field.value ? field.value : 'Select an option'}
-                </Button>
-              </DropdownMenuPrimitive.Trigger>
-              <DropdownMenuContent data-slot="dropdown-select-content">{children}</DropdownMenuContent>
+            <DropdownMenuPrimitive.Root
+              {...field}
+              open={open}
+              onOpenChange={setOpen}
+              {...props}
+              data-slot="dropdown-menu-select-root"
+            >
+              <DropdownMenuSelectContext.Provider value={{ onValueChange: field.onChange, value: field.value }}>
+                <DropdownMenuPrimitive.Trigger asChild>
+                  <Button className={dropdownClassName} data-slot="dropdown-select-trigger">
+                    {field.value ? field.value : 'Select an option'}
+                  </Button>
+                </DropdownMenuPrimitive.Trigger>
+                <DropdownMenuContent data-slot="dropdown-select-content">{children}</DropdownMenuContent>
+              </DropdownMenuSelectContext.Provider>
             </DropdownMenuPrimitive.Root>
           </FormControl>
           {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
@@ -74,3 +90,66 @@ export function DropdownMenuSelectField<
 }
 
 DropdownMenuSelectField.displayName = 'DropdownMenuSelect';
+
+// Context to wire menu items to form field
+interface DropdownMenuSelectContextValue<T> {
+  onValueChange: (value: T) => void;
+  value: T;
+}
+const DropdownMenuSelectContext = createContext<DropdownMenuSelectContextValue<unknown> | null>(null);
+
+/** Hook to access select context in item wrappers */
+export function useDropdownMenuSelectContext<T = unknown>() {
+  const ctx = useContext(DropdownMenuSelectContext);
+  if (!ctx) {
+    throw new Error('useDropdownMenuSelectContext must be used within DropdownMenuSelectField');
+  }
+  return ctx as { onValueChange: (value: T) => void; value: T };
+}
+
+/** Single-select menu item */
+export function DropdownMenuSelectItem({
+  value,
+  children,
+  ...props
+}: { value: string; children: React.ReactNode } & React.ComponentProps<typeof BaseDropdownMenuItem>) {
+  const { onValueChange } = useDropdownMenuSelectContext<string>();
+  return (
+    <BaseDropdownMenuItem {...props} onSelect={() => onValueChange(value)}>
+      {children}
+    </BaseDropdownMenuItem>
+  );
+}
+
+/** Multi-select checkbox menu item */
+export function DropdownMenuSelectCheckboxItem({
+  value,
+  children,
+  ...props
+}: { value: string; children: React.ReactNode } & React.ComponentProps<typeof BaseDropdownMenuCheckboxItem>) {
+  const { onValueChange, value: selected } = useDropdownMenuSelectContext<string[]>();
+  const isChecked = Array.isArray(selected) && selected.includes(value);
+  const handleChange = () => {
+    const newValue = isChecked ? selected.filter((v) => v !== value) : [...(selected || []), value];
+    onValueChange(newValue);
+  };
+  return (
+    <BaseDropdownMenuCheckboxItem {...props} checked={isChecked} onCheckedChange={handleChange}>
+      {children}
+    </BaseDropdownMenuCheckboxItem>
+  );
+}
+
+/** Radio-select menu item */
+export function DropdownMenuSelectRadioItem({
+  value: itemValue,
+  children,
+  ...props
+}: { value: string; children: React.ReactNode } & React.ComponentProps<typeof BaseDropdownMenuRadioItem>) {
+  const { onValueChange } = useDropdownMenuSelectContext<string>();
+  return (
+    <BaseDropdownMenuRadioItem value={itemValue} {...props} onSelect={() => onValueChange(itemValue)}>
+      {children}
+    </BaseDropdownMenuRadioItem>
+  );
+}
diff --git a/packages/components/src/ui/form.tsx b/packages/components/src/ui/form.tsx
index e203fbda..6d1f4ae9 100644
--- a/packages/components/src/ui/form.tsx
+++ b/packages/components/src/ui/form.tsx
@@ -3,6 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 import { Controller, type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
 import { Label } from './label';
+import type { InputProps } from './text-input';
 import { cn } from './utils';
 
 export interface FieldComponents {
@@ -10,6 +11,7 @@ export interface FieldComponents {
   FormDescription: React.ComponentType<FormDescriptionProps>;
   FormLabel: React.ComponentType<FormLabelProps>;
   FormMessage: React.ComponentType<FormMessageProps>;
+  Input?: React.ComponentType<InputProps>;
 }
 
 export type FormFieldContextValue<
diff --git a/packages/components/src/ui/index.ts b/packages/components/src/ui/index.ts
index 567fd5e1..2b5ecaa9 100644
--- a/packages/components/src/ui/index.ts
+++ b/packages/components/src/ui/index.ts
@@ -18,3 +18,9 @@ export * from './text-input';
 export * from './textarea-field';
 export * from './textarea';
 export * from './utils';
+export * from './table';
+export * from './data-table';
+export * from './badge';
+export * from './command';
+export * from './select';
+export * from './separator';
diff --git a/packages/components/src/ui/radio-group-item-field.tsx b/packages/components/src/ui/radio-group-item-field.tsx
new file mode 100644
index 00000000..9c0717ad
--- /dev/null
+++ b/packages/components/src/ui/radio-group-item-field.tsx
@@ -0,0 +1,64 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type * as React from 'react';
+import { Label } from './label';
+import { cn } from './utils';
+
+export interface RadioGroupItemFieldComponents {
+  RadioGroupItem?: React.ComponentType<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>>;
+  RadioGroupIndicator?: React.ComponentType<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Indicator>>;
+  Label?: React.ComponentType<React.ComponentPropsWithoutRef<typeof Label>>;
+}
+
+export interface RadioGroupItemFieldProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  label?: React.ReactNode;
+  labelClassName?: string;
+  wrapperClassName?: string;
+  components?: Partial<RadioGroupItemFieldComponents>;
+}
+
+const RadioGroupItemField = ({
+  label,
+  labelClassName,
+  wrapperClassName,
+  components,
+  className,
+  children,
+  ...props
+}: RadioGroupItemFieldProps) => {
+  // Extract custom components with fallbacks
+  const RadioGroupItemComponent = components?.RadioGroupItem || RadioGroupPrimitive.Item;
+  const RadioGroupIndicatorComponent = components?.RadioGroupIndicator || RadioGroupPrimitive.Indicator;
+  const LabelComponent = components?.Label || Label;
+
+  return (
+    <div className={cn('flex items-center space-x-2', wrapperClassName)}>
+      <RadioGroupItemComponent
+        className={cn(
+          'h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <RadioGroupIndicatorComponent className="flex items-center justify-center">
+          <div className="h-2 w-2 rounded-full bg-current" />
+        </RadioGroupIndicatorComponent>
+      </RadioGroupItemComponent>
+      {label && (
+        <LabelComponent
+          htmlFor={props.id}
+          className={cn(
+            'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+            labelClassName,
+          )}
+        >
+          {label}
+        </LabelComponent>
+      )}
+      {children}
+    </div>
+  );
+};
+
+RadioGroupItemField.displayName = 'RadioGroupItemField';
+
+export { RadioGroupItemField };
diff --git a/packages/components/src/ui/select.tsx b/packages/components/src/ui/select.tsx
new file mode 100644
index 00000000..8abf40ee
--- /dev/null
+++ b/packages/components/src/ui/select.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+
+import { cn } from './utils';
+import { Button } from './button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './popover';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+interface SelectProps {
+  options: SelectOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Select({
+  options,
+  value,
+  onValueChange,
+  placeholder = 'Select an option',
+  disabled = false,
+  className,
+}: SelectProps) {
+  const [open, setOpen] = React.useState(false);
+  
+  const selectedOption = options.find(option => option.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-[200px] justify-between", className)}
+          disabled={disabled}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={placeholder} />
+          <CommandEmpty>No option found.</CommandEmpty>
+          <CommandGroup>
+            <CommandList>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  onSelect={() => {
+                    onValueChange?.(option.value);
+                    setOpen(false);
+                  }}
+                  className="flex items-center"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandList>
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
\ No newline at end of file
diff --git a/packages/components/src/ui/separator.tsx b/packages/components/src/ui/separator.tsx
new file mode 100644
index 00000000..cb34d63e
--- /dev/null
+++ b/packages/components/src/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from './utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
\ No newline at end of file
diff --git a/packages/components/src/ui/table.tsx b/packages/components/src/ui/table.tsx
new file mode 100644
index 00000000..0c5c8fab
--- /dev/null
+++ b/packages/components/src/ui/table.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+);
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />
+  )
+);
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
+  )
+);
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
\ No newline at end of file
diff --git a/packages/components/src/ui/text-field.tsx b/packages/components/src/ui/text-field.tsx
index 1483a73b..437b9dd5 100644
--- a/packages/components/src/ui/text-field.tsx
+++ b/packages/components/src/ui/text-field.tsx
@@ -51,7 +51,7 @@ export const FieldSuffix = ({
 };
 
 // Create a specific interface for the input props that includes className explicitly
-interface TextInputProps extends Omit<InputProps, 'prefix' | 'suffix'> {
+export interface TextInputProps extends Omit<InputProps, 'prefix' | 'suffix'> {
   control?: Control<FieldValues>;
   name: FieldPath<FieldValues>;
   label?: string;
diff --git a/packages/components/src/ui/utils/debounce.ts b/packages/components/src/ui/utils/debounce.ts
new file mode 100644
index 00000000..815e3dec
--- /dev/null
+++ b/packages/components/src/ui/utils/debounce.ts
@@ -0,0 +1,27 @@
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after the specified wait time has elapsed since the last time it was invoked.
+ * 
+ * @param func The function to debounce
+ * @param wait The number of milliseconds to delay
+ * @returns A debounced version of the provided function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  
+  return function(...args: Parameters<T>): void {
+    const later = () => {
+      timeout = null;
+      func(...args);
+    };
+    
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    
+    timeout = setTimeout(later, wait);
+  };
+}
\ No newline at end of file
diff --git a/turbo.json b/turbo.json
index 5b5dc8d6..f265008e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -5,7 +5,7 @@
   "tasks": {
     "build": {
       "dependsOn": ["^build"],
-      "outputs": ["dist/**", ".next/**", "!.next/cache/**"]
+      "outputs": ["dist/**", "storybook-static/**"]
     },
     "//#format-and-lint": {},
     "//#format-and-lint:fix": {
@@ -18,11 +18,18 @@
       "cache": false,
       "persistent": true
     },
+    "serve": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": ["build"]
+    },
     "test": {
+      "dependsOn": ["build"],
       "cache": true
     },
     "build-storybook": {
-      "cache": true
+      "cache": true,
+      "outputs": ["storybook-static/**"]
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index f5ffb62e..c16c963a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1759,14 +1759,17 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
     "@typescript-eslint/parser": "npm:^6.21.0"
     autoprefixer: "npm:^10.4.20"
+    http-server: "npm:^14.1.1"
     react: "npm:^19.0.0"
     react-router: "npm:^7.0.0"
     react-router-dom: "npm:^7.0.0"
+    start-server-and-test: "npm:^2.0.11"
     storybook: "npm:^8.6.7"
     tailwindcss: "npm:^4.0.0"
     typescript: "npm:^5.7.2"
     vite: "npm:^6.2.2"
     vite-tsconfig-paths: "npm:^5.1.4"
+    wait-on: "npm:^8.0.3"
   languageName: unknown
   linkType: soft
 
@@ -1785,11 +1788,13 @@ __metadata:
     "@radix-ui/react-popover": "npm:^1.1.4"
     "@radix-ui/react-radio-group": "npm:^1.2.2"
     "@radix-ui/react-scroll-area": "npm:^1.2.2"
+    "@radix-ui/react-separator": "npm:^1.1.2"
     "@radix-ui/react-slot": "npm:^1.1.2"
     "@radix-ui/react-switch": "npm:^1.1.2"
     "@radix-ui/react-tooltip": "npm:^1.1.6"
     "@react-router/dev": "npm:^7.0.0"
     "@react-router/node": "npm:^7.0.0"
+    "@tanstack/react-table": "npm:^8.21.2"
     "@types/glob": "npm:^8.1.0"
     "@types/react": "npm:^19.0.0"
     "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
@@ -1798,6 +1803,7 @@ __metadata:
     autoprefixer: "npm:^10.4.20"
     class-variance-authority: "npm:^0.7.1"
     clsx: "npm:^2.1.1"
+    cmdk: "npm:^1.1.1"
     date-fns: "npm:^4.1.0"
     glob: "npm:^11.0.0"
     input-otp: "npm:^1.4.1"
@@ -1808,7 +1814,7 @@ __metadata:
     react-hook-form: "npm:^7.53.1"
     react-router: "npm:^7.0.0"
     react-router-dom: "npm:^7.0.0"
-    remix-hook-form: "npm:6.1.3"
+    remix-hook-form: "npm:7.0.0"
     sonner: "npm:^1.7.1"
     tailwind-merge: "npm:^2.5.5"
     tailwindcss: "npm:^4.0.0"
@@ -1820,7 +1826,7 @@ __metadata:
     zod: "npm:^3.24.1"
   peerDependencies:
     react: ^19.0.0
-    remix-hook-form: 6.1.3
+    remix-hook-form: 7.0.0
   languageName: unknown
   linkType: soft
 
@@ -2145,7 +2151,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.1.1":
+"@radix-ui/react-compose-refs@npm:1.1.1, @radix-ui/react-compose-refs@npm:^1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-compose-refs@npm:1.1.1"
   peerDependencies:
@@ -2203,6 +2209,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dialog@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@radix-ui/react-dialog@npm:1.1.6"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.5"
+    "@radix-ui/react-focus-guards": "npm:1.1.1"
+    "@radix-ui/react-focus-scope": "npm:1.1.2"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-portal": "npm:1.1.4"
+    "@radix-ui/react-presence": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.0.2"
+    "@radix-ui/react-slot": "npm:1.1.2"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    aria-hidden: "npm:^1.2.4"
+    react-remove-scroll: "npm:^2.6.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/98e425549573c5d6fb0fee94ecd40427a8b8897bb2d9bb2a44fe64e484754376ff23b64fcf64e061d42fc774b9627a28cb5b1bb5652e567908dac9a8d8618705
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-direction@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-direction@npm:1.1.0"
@@ -2239,6 +2277,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dismissable-layer@npm:1.1.5":
+  version: 1.1.5
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.1.5"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.1"
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.2"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-escape-keydown": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/05c5adfcd42a736c456f50bdca25bf7f6b25eef7328e4c05de535fea128328666433a89d68cb1445e039c188d7f1397df6a4a02e2da0970762f2a80fd29b48ea
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dropdown-menu@npm:^2.1.4":
   version: 2.1.4
   resolution: "@radix-ui/react-dropdown-menu@npm:2.1.4"
@@ -2298,6 +2359,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-scope@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-focus-scope@npm:1.1.2"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.2"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/7b93866a9980bc938fc3fcfacfc49467c13144931c9b7a3b5423c0c3817685dc421499d73f58335f6c3c1c0f4fea9c9b7c16aa06a1d30571620787086082bea0
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-icons@npm:^1.3.2":
   version: 1.3.2
   resolution: "@radix-ui/react-icons@npm:1.3.2"
@@ -2307,7 +2389,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-id@npm:1.1.0":
+"@radix-ui/react-id@npm:1.1.0, @radix-ui/react-id@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-id@npm:1.1.0"
   dependencies:
@@ -2458,6 +2540,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-portal@npm:1.1.4":
+  version: 1.1.4
+  resolution: "@radix-ui/react-portal@npm:1.1.4"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/e4038eb2f20be10d9754d099d00620f429711919d20c4c630946d9c4941f1c83ef1a3f4110c221c70486e65bc565ebba4ada22a0e7e2d179c039f2a014300793
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-presence@npm:1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-presence@npm:1.1.2"
@@ -2497,6 +2599,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-primitive@npm:2.0.2, @radix-ui/react-primitive@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@radix-ui/react-primitive@npm:2.0.2"
+  dependencies:
+    "@radix-ui/react-slot": "npm:1.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/1af7a33a86f8bd2467f2300b1bb6ca9af67cae3950953ba543d2a625c17f341dff05d19056ece7b03e5ced8b9f8de99c74f806710ce0da6b9a000f2af063fffe
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-radio-group@npm:^1.2.2":
   version: 1.2.2
   resolution: "@radix-ui/react-radio-group@npm:1.2.2"
@@ -2579,6 +2700,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-separator@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-separator@npm:1.1.2"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/9efffd4319ab25210702cbacd5a3fe15f22ab9e29afe407b778112056e6a2e1e43847f1ad5f5b73bff5d604722a4fdabd66816216e7ad8f627f7b4c20a19174e
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-slot@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-slot@npm:1.1.1"
@@ -2594,7 +2734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.1.2":
+"@radix-ui/react-slot@npm:1.1.2, @radix-ui/react-slot@npm:^1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-slot@npm:1.1.2"
   dependencies:
@@ -3961,6 +4101,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:^8.21.2":
+  version: 8.21.2
+  resolution: "@tanstack/react-table@npm:8.21.2"
+  dependencies:
+    "@tanstack/table-core": "npm:8.21.2"
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10c0/192392c7d945bf50a21a0904fdce07e4abb74bc6187bcd32ae843031d48e851a10899e0218443d742ee01c30ca1ff890a8677a5878b8904561ebc23479adfdf1
+  languageName: node
+  linkType: hard
+
+"@tanstack/table-core@npm:8.21.2":
+  version: 8.21.2
+  resolution: "@tanstack/table-core@npm:8.21.2"
+  checksum: 10c0/836326c6aef7e0b9b4566f9b2ade5ea73b90ce94f2b0cc35a3b3e1f44a9b3512d5507e4818c509824443b3d0488f2026df54e7a9f8f0cdccae6040347e6ff079
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:10.4.0":
   version: 10.4.0
   resolution: "@testing-library/dom@npm:10.4.0"
@@ -4721,7 +4880,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arg@npm:^5.0.1":
+"arg@npm:^5.0.1, arg@npm:^5.0.2":
   version: 5.0.2
   resolution: "arg@npm:5.0.2"
   checksum: 10c0/ccaf86f4e05d342af6666c569f844bec426595c567d32a8289715087825c2ca7edd8a3d204e4d2fb2aa4602e09a57d0c13ea8c9eea75aac3dbb4af5514e6800e
@@ -4737,7 +4896,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-hidden@npm:^1.1.1":
+"aria-hidden@npm:^1.1.1, aria-hidden@npm:^1.2.4":
   version: 1.2.4
   resolution: "aria-hidden@npm:1.2.4"
   dependencies:
@@ -4804,6 +4963,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"async@npm:^3.2.6":
+  version: 3.2.6
+  resolution: "async@npm:3.2.6"
+  checksum: 10c0/36484bb15ceddf07078688d95e27076379cc2f87b10c03b6dd8a83e89475a3c8df5848859dd06a4c95af1e4c16fc973de0171a77f18ea00be899aca2a4f85e70
+  languageName: node
+  linkType: hard
+
 "asynckit@npm:^0.4.0":
   version: 0.4.0
   resolution: "asynckit@npm:0.4.0"
@@ -4849,6 +5015,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.8.2":
+  version: 1.8.4
+  resolution: "axios@npm:1.8.4"
+  dependencies:
+    follow-redirects: "npm:^1.15.6"
+    form-data: "npm:^4.0.0"
+    proxy-from-env: "npm:^1.1.0"
+  checksum: 10c0/450993c2ba975ffccaf0d480b68839a3b2435a5469a71fa2fb0b8a55cdb2c2ae47e609360b9c1e2b2534b73dfd69e2733a1cf9f8215bee0bcd729b72f801b0ce
+  languageName: node
+  linkType: hard
+
 "babel-dead-code-elimination@npm:^1.0.6":
   version: 1.0.9
   resolution: "babel-dead-code-elimination@npm:1.0.9"
@@ -4947,6 +5124,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"basic-auth@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "basic-auth@npm:2.0.1"
+  dependencies:
+    safe-buffer: "npm:5.1.2"
+  checksum: 10c0/05f56db3a0fc31c89c86b605231e32ee143fb6ae38dc60616bc0970ae6a0f034172def99e69d3aed0e2c9e7cac84e2d63bc51a0b5ff6ab5fc8808cc8b29923c1
+  languageName: node
+  linkType: hard
+
 "better-opn@npm:^3.0.2":
   version: 3.0.2
   resolution: "better-opn@npm:3.0.2"
@@ -4965,6 +5151,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bluebird@npm:3.7.2":
+  version: 3.7.2
+  resolution: "bluebird@npm:3.7.2"
+  checksum: 10c0/680de03adc54ff925eaa6c7bb9a47a0690e8b5de60f4792604aae8ed618c65e6b63a7893b57ca924beaf53eee69c5af4f8314148c08124c550fe1df1add897d2
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -5163,7 +5356,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^4.0.0, chalk@npm:^4.1.0":
+"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -5208,6 +5401,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"check-more-types@npm:2.24.0":
+  version: 2.24.0
+  resolution: "check-more-types@npm:2.24.0"
+  checksum: 10c0/93fda2c32eb5f6cd1161a84a2f4107c0e00b40a851748516791dd9a0992b91bdf504e3bf6bf7673ce603ae620042e11ed4084d16d6d92b36818abc9c2e725520
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^4.0.0":
   version: 4.0.3
   resolution: "chokidar@npm:4.0.3"
@@ -5283,6 +5483,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cmdk@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "cmdk@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:^1.1.1"
+    "@radix-ui/react-dialog": "npm:^1.1.6"
+    "@radix-ui/react-id": "npm:^1.1.0"
+    "@radix-ui/react-primitive": "npm:^2.0.2"
+  peerDependencies:
+    react: ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^18 || ^19 || ^19.0.0-rc
+  checksum: 10c0/5605ac4396ec9bc65c82f954da19dd89a0636a54026df72780e2470da1381f9d57434a80a53f2d57eaa4e759660a3ebba9232b74258dc09970576591eae03116
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -5401,6 +5616,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"corser@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "corser@npm:2.0.1"
+  checksum: 10c0/1f319a752a560342dd22d936e5a4c158bfcbc332524ef5b05a7277236dad8b0b2868fd5cf818559f29954ec4d777d82e797fccd76601fcfe431610e4143c8acc
+  languageName: node
+  linkType: hard
+
 "create-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "create-jest@npm:29.7.0"
@@ -5467,7 +5689,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.4, debug@npm:^4.4.0":
+"debug@npm:4, debug@npm:4.4.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.4, debug@npm:^4.3.6, debug@npm:^4.4.0":
   version: 4.4.0
   resolution: "debug@npm:4.4.0"
   dependencies:
@@ -5720,6 +5942,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"duplexer@npm:~0.1.1":
+  version: 0.1.2
+  resolution: "duplexer@npm:0.1.2"
+  checksum: 10c0/c57bcd4bdf7e623abab2df43a7b5b23d18152154529d166c1e0da6bee341d84c432d157d7e97b32fecb1bf3a8b8857dd85ed81a915789f550637ed25b8e64fc2
+  languageName: node
+  linkType: hard
+
 "eastasianwidth@npm:^0.2.0":
   version: 0.2.0
   resolution: "eastasianwidth@npm:0.2.0"
@@ -6127,7 +6356,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^5.0.0":
+"event-stream@npm:=3.3.4":
+  version: 3.3.4
+  resolution: "event-stream@npm:3.3.4"
+  dependencies:
+    duplexer: "npm:~0.1.1"
+    from: "npm:~0"
+    map-stream: "npm:~0.1.0"
+    pause-stream: "npm:0.0.11"
+    split: "npm:0.3"
+    stream-combiner: "npm:~0.0.4"
+    through: "npm:~2.3.1"
+  checksum: 10c0/c3ec4e1efc27ab3e73a98923f0a2fa9a19051b87068fea2f3d53d2e4e8c5cfdadf8c8a115b17f3d90b16a46432d396bad91b6e8d0cceb3e449be717a03b75209
+  languageName: node
+  linkType: hard
+
+"eventemitter3@npm:^4.0.0":
+  version: 4.0.7
+  resolution: "eventemitter3@npm:4.0.7"
+  checksum: 10c0/5f6d97cbcbac47be798e6355e3a7639a84ee1f7d9b199a07017f1d2f1e2fe236004d14fa5dfaeba661f94ea57805385e326236a6debbc7145c8877fbc0297c6b
+  languageName: node
+  linkType: hard
+
+"execa@npm:5.1.1, execa@npm:^5.0.0":
   version: 5.1.1
   resolution: "execa@npm:5.1.1"
   dependencies:
@@ -6336,7 +6587,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.15.6":
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.6":
   version: 1.15.9
   resolution: "follow-redirects@npm:1.15.9"
   peerDependenciesMeta:
@@ -6403,6 +6654,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"from@npm:~0":
+  version: 0.1.7
+  resolution: "from@npm:0.1.7"
+  checksum: 10c0/3aab5aea8fe8e1f12a5dee7f390d46a93431ce691b6222dcd5701c5d34378e51ca59b44967da1105a0f90fcdf5d7629d963d51e7ccd79827d19693bdcfb688d4
+  languageName: node
+  linkType: hard
+
 "fromentries@npm:^1.2.0":
   version: 1.3.2
   resolution: "fromentries@npm:1.3.2"
@@ -6789,6 +7047,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-encoding-sniffer@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "html-encoding-sniffer@npm:3.0.0"
+  dependencies:
+    whatwg-encoding: "npm:^2.0.0"
+  checksum: 10c0/b17b3b0fb5d061d8eb15121c3b0b536376c3e295ecaf09ba48dd69c6b6c957839db124fe1e2b3f11329753a4ee01aa7dedf63b7677999e86da17fbbdd82c5386
+  languageName: node
+  linkType: hard
+
 "html-escaper@npm:^2.0.0":
   version: 2.0.2
   resolution: "html-escaper@npm:2.0.2"
@@ -6827,6 +7094,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http-proxy@npm:^1.18.1":
+  version: 1.18.1
+  resolution: "http-proxy@npm:1.18.1"
+  dependencies:
+    eventemitter3: "npm:^4.0.0"
+    follow-redirects: "npm:^1.0.0"
+    requires-port: "npm:^1.0.0"
+  checksum: 10c0/148dfa700a03fb421e383aaaf88ac1d94521dfc34072f6c59770528c65250983c2e4ec996f2f03aa9f3fe46cd1270a593126068319311e3e8d9e610a37533e94
+  languageName: node
+  linkType: hard
+
+"http-server@npm:^14.1.1":
+  version: 14.1.1
+  resolution: "http-server@npm:14.1.1"
+  dependencies:
+    basic-auth: "npm:^2.0.1"
+    chalk: "npm:^4.1.2"
+    corser: "npm:^2.0.1"
+    he: "npm:^1.2.0"
+    html-encoding-sniffer: "npm:^3.0.0"
+    http-proxy: "npm:^1.18.1"
+    mime: "npm:^1.6.0"
+    minimist: "npm:^1.2.6"
+    opener: "npm:^1.5.1"
+    portfinder: "npm:^1.0.28"
+    secure-compare: "npm:3.0.1"
+    union: "npm:~0.5.0"
+    url-join: "npm:^4.0.1"
+  bin:
+    http-server: bin/http-server
+  checksum: 10c0/c5770ddd722dd520ce0af25efee6bfb7c6300ff4e934636d4eec83fa995739e64de2e699e89e7a795b3a1894bcc37bec226617c1023600aacd7871fd8d6ffe6d
+  languageName: node
+  linkType: hard
+
 "https-proxy-agent@npm:^7.0.1":
   version: 7.0.6
   resolution: "https-proxy-agent@npm:7.0.6"
@@ -6851,6 +7152,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
+  version: 0.6.3
+  resolution: "iconv-lite@npm:0.6.3"
+  dependencies:
+    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
+  checksum: 10c0/98102bc66b33fcf5ac044099d1257ba0b7ad5e3ccd3221f34dd508ab4070edff183276221684e1e0555b145fce0850c9f7d2b60a9fcac50fbb4ea0d6e845a3b1
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:^0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -6860,15 +7170,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:^0.6.2":
-  version: 0.6.3
-  resolution: "iconv-lite@npm:0.6.3"
-  dependencies:
-    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
-  checksum: 10c0/98102bc66b33fcf5ac044099d1257ba0b7ad5e3ccd3221f34dd508ab4070edff183276221684e1e0555b145fce0850c9f7d2b60a9fcac50fbb4ea0d6e845a3b1
-  languageName: node
-  linkType: hard
-
 "ignore@npm:^5.2.0, ignore@npm:^5.2.4":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
@@ -7903,7 +8204,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"joi@npm:^17.11.0":
+"joi@npm:^17.11.0, joi@npm:^17.13.3":
   version: 17.13.3
   resolution: "joi@npm:17.13.3"
   dependencies:
@@ -8043,6 +8344,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lazy-ass@npm:1.6.0":
+  version: 1.6.0
+  resolution: "lazy-ass@npm:1.6.0"
+  checksum: 10c0/4af6cb9a333fbc811268c745f9173fba0f99ecb817cc9c0fae5dbf986b797b730ff525504128f6623b91aba32b02124553a34b0d14de3762b637b74d7233f3bd
+  languageName: node
+  linkType: hard
+
 "leven@npm:^3.1.0":
   version: 3.1.0
   resolution: "leven@npm:3.1.0"
@@ -8351,6 +8659,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"map-stream@npm:~0.1.0":
+  version: 0.1.0
+  resolution: "map-stream@npm:0.1.0"
+  checksum: 10c0/7dd6debe511c1b55d9da75e1efa65a28b1252a2d8357938d2e49b412713c478efbaefb0cdf0ee0533540c3bf733e8f9f71e1a15aa0fe74bf71b64e75bf1576bd
+  languageName: node
+  linkType: hard
+
 "math-intrinsics@npm:^1.0.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
@@ -8407,6 +8722,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "mime@npm:1.6.0"
+  bin:
+    mime: cli.js
+  checksum: 10c0/b92cd0adc44888c7135a185bfd0dddc42c32606401c72896a842ae15da71eb88858f17669af41e498b463cd7eb998f7b48939a25b08374c7924a9c8a6f8a81b0
+  languageName: node
+  linkType: hard
+
 "mimic-fn@npm:^2.1.0":
   version: 2.1.0
   resolution: "mimic-fn@npm:2.1.0"
@@ -8876,6 +9200,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"opener@npm:^1.5.1":
+  version: 1.5.2
+  resolution: "opener@npm:1.5.2"
+  bin:
+    opener: bin/opener-bin.js
+  checksum: 10c0/dd56256ab0cf796585617bc28e06e058adf09211781e70b264c76a1dbe16e90f868c974e5bf5309c93469157c7d14b89c35dc53fe7293b0e40b4d2f92073bc79
+  languageName: node
+  linkType: hard
+
 "os-homedir@npm:^1.0.1":
   version: 1.0.2
   resolution: "os-homedir@npm:1.0.2"
@@ -9093,6 +9426,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pause-stream@npm:0.0.11":
+  version: 0.0.11
+  resolution: "pause-stream@npm:0.0.11"
+  dependencies:
+    through: "npm:~2.3"
+  checksum: 10c0/86f12c64cdaaa8e45ebaca4e39a478e1442db8b4beabc280b545bfaf79c0e2f33c51efb554aace5c069cc441c7b924ba484837b345eaa4ba6fc940d62f826802
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -9181,6 +9523,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"portfinder@npm:^1.0.28":
+  version: 1.0.35
+  resolution: "portfinder@npm:1.0.35"
+  dependencies:
+    async: "npm:^3.2.6"
+    debug: "npm:^4.3.6"
+  checksum: 10c0/bdc3653bf7f8e6f83464812fba8cb26abdb1a7d3d4977199f6edd857a1697c829d5ac4342b626590619efbbddc9916a1847145812d32bb0d2457ee6e895f9082
+  languageName: node
+  linkType: hard
+
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -9312,6 +9664,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ps-tree@npm:1.2.0":
+  version: 1.2.0
+  resolution: "ps-tree@npm:1.2.0"
+  dependencies:
+    event-stream: "npm:=3.3.4"
+  bin:
+    ps-tree: ./bin/ps-tree.js
+  checksum: 10c0/9d1c159e0890db5aa05f84d125193c2190a6c4ecd457596fd25e7611f8f747292a846459dcc0244e27d45529d4cea6d1010c3a2a087fad02624d12fdb7d97c22
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^2.1.0":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -9326,6 +9689,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qs@npm:^6.4.0":
+  version: 6.14.0
+  resolution: "qs@npm:6.14.0"
+  dependencies:
+    side-channel: "npm:^1.1.0"
+  checksum: 10c0/8ea5d91bf34f440598ee389d4a7d95820e3b837d3fd9f433871f7924801becaa0cd3b3b4628d49a7784d06a8aea9bc4554d2b6d8d584e2d221dc06238a42909c
+  languageName: node
+  linkType: hard
+
 "queue-microtask@npm:^1.2.2":
   version: 1.2.3
   resolution: "queue-microtask@npm:1.2.3"
@@ -9446,6 +9818,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll@npm:^2.6.3":
+  version: 2.6.3
+  resolution: "react-remove-scroll@npm:2.6.3"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.7"
+    react-style-singleton: "npm:^2.2.3"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.3"
+    use-sidecar: "npm:^1.1.3"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/068e9704ff26816fffc4c8903e2c6c8df7291ee08615d7c1ab0cf8751f7080e2c5a5d78ef5d908b11b9cfc189f176d312e44cb02ea291ca0466d8283b479b438
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^7.0.0":
   version: 7.4.0
   resolution: "react-router-dom@npm:7.4.0"
@@ -9476,7 +9867,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-style-singleton@npm:^2.2.1, react-style-singleton@npm:^2.2.2":
+"react-style-singleton@npm:^2.2.1, react-style-singleton@npm:^2.2.2, react-style-singleton@npm:^2.2.3":
   version: 2.2.3
   resolution: "react-style-singleton@npm:2.2.3"
   dependencies:
@@ -9580,15 +9971,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remix-hook-form@npm:6.1.3":
-  version: 6.1.3
-  resolution: "remix-hook-form@npm:6.1.3"
+"remix-hook-form@npm:7.0.0":
+  version: 7.0.0
+  resolution: "remix-hook-form@npm:7.0.0"
   peerDependencies:
     react: ^18.2.0 || ^19.0.0
     react-dom: ^18.2.0 || ^19.0.0
-    react-hook-form: ^7.51.0
-    react-router: ">=7.0.0"
-  checksum: 10c0/4950e179e1145c65f58020bfb4bcb1dbf8ce7720f911b3c35bc5dbc6a386fdf037b94e52083fb03879c5ae37cb62a2a0ad6fedd61ec5f8ad2d147b7a3ebee903
+    react-hook-form: ^7.55.0
+    react-router: ">=7.5.0"
+  checksum: 10c0/31d20817ac3e73729b8159689d395cdcb4bd1aed45fe67e43cb310da1eb5dac27c08b7c6e7e9ad85fb5b4c08a9049d5c6b6a913d739a77352c590db47c57560b
   languageName: node
   linkType: hard
 
@@ -9613,6 +10004,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"requires-port@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "requires-port@npm:1.0.0"
+  checksum: 10c0/b2bfdd09db16c082c4326e573a82c0771daaf7b53b9ce8ad60ea46aa6e30aaf475fe9b164800b89f93b748d2c234d8abff945d2551ba47bf5698e04cd7713267
+  languageName: node
+  linkType: hard
+
 "resolve-cwd@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-cwd@npm:3.0.0"
@@ -9870,6 +10268,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rxjs@npm:^7.8.2":
+  version: 7.8.2
+  resolution: "rxjs@npm:7.8.2"
+  dependencies:
+    tslib: "npm:^2.1.0"
+  checksum: 10c0/1fcd33d2066ada98ba8f21fcbbcaee9f0b271de1d38dc7f4e256bfbc6ffcdde68c8bfb69093de7eeb46f24b1fb820620bf0223706cff26b4ab99a7ff7b2e2c45
+  languageName: node
+  linkType: hard
+
+"safe-buffer@npm:5.1.2":
+  version: 5.1.2
+  resolution: "safe-buffer@npm:5.1.2"
+  checksum: 10c0/780ba6b5d99cc9a40f7b951d47152297d0e260f0df01472a1b99d4889679a4b94a13d644f7dbc4f022572f09ae9005fa2fbb93bbbd83643316f365a3e9a45b21
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
@@ -9902,6 +10316,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"secure-compare@npm:3.0.1":
+  version: 3.0.1
+  resolution: "secure-compare@npm:3.0.1"
+  checksum: 10c0/af3102f3f555d917c8ffff7a5f6f00f70195708f4faf82d48794485c9f3cb365cee0dd4da6b4e53e8964f172970bce6069b6101ba3ce8c309bff54f460d1f650
+  languageName: node
+  linkType: hard
+
 "semver@npm:^6.0.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
@@ -10212,6 +10633,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"split@npm:0.3":
+  version: 0.3.3
+  resolution: "split@npm:0.3.3"
+  dependencies:
+    through: "npm:2"
+  checksum: 10c0/88c09b1b4de84953bf5d6c153123a1fbb20addfea9381f70d27b4eb6b2bfbadf25d313f8f5d3fd727d5679b97bfe54da04766b91010f131635bf49e51d5db3fc
+  languageName: node
+  linkType: hard
+
 "sprintf-js@npm:^1.1.3":
   version: 1.1.3
   resolution: "sprintf-js@npm:1.1.3"
@@ -10244,6 +10674,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"start-server-and-test@npm:^2.0.11":
+  version: 2.0.11
+  resolution: "start-server-and-test@npm:2.0.11"
+  dependencies:
+    arg: "npm:^5.0.2"
+    bluebird: "npm:3.7.2"
+    check-more-types: "npm:2.24.0"
+    debug: "npm:4.4.0"
+    execa: "npm:5.1.1"
+    lazy-ass: "npm:1.6.0"
+    ps-tree: "npm:1.2.0"
+    wait-on: "npm:8.0.3"
+  bin:
+    server-test: src/bin/start.js
+    start-server-and-test: src/bin/start.js
+    start-test: src/bin/start.js
+  checksum: 10c0/d85ada5f31f43503134e3d190a9deeae01fcbd4489226610a40527f6dd23ebb0081305aa1880dfeadd93c56a167b5bbae86ec1e538209502e5f848516744ccab
+  languageName: node
+  linkType: hard
+
 "stop-iteration-iterator@npm:^1.0.0":
   version: 1.1.0
   resolution: "stop-iteration-iterator@npm:1.1.0"
@@ -10272,6 +10722,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream-combiner@npm:~0.0.4":
+  version: 0.0.4
+  resolution: "stream-combiner@npm:0.0.4"
+  dependencies:
+    duplexer: "npm:~0.1.1"
+  checksum: 10c0/8075a94c0eb0f20450a8236cb99d4ce3ea6e6a4b36d8baa7440b1a08cde6ffd227debadffaecd80993bd334282875d0e927ab5b88484625e01970dd251004ff5
+  languageName: node
+  linkType: hard
+
 "stream-slice@npm:^0.1.2":
   version: 0.1.2
   resolution: "stream-slice@npm:0.1.2"
@@ -10497,6 +10956,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"through@npm:2, through@npm:~2.3, through@npm:~2.3.1":
+  version: 2.3.8
+  resolution: "through@npm:2.3.8"
+  checksum: 10c0/4b09f3774099de0d4df26d95c5821a62faee32c7e96fb1f4ebd54a2d7c11c57fe88b0a0d49cf375de5fee5ae6bf4eb56dbbf29d07366864e2ee805349970d3cc
+  languageName: node
+  linkType: hard
+
 "tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3":
   version: 1.3.3
   resolution: "tiny-invariant@npm:1.3.3"
@@ -10776,6 +11242,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"union@npm:~0.5.0":
+  version: 0.5.0
+  resolution: "union@npm:0.5.0"
+  dependencies:
+    qs: "npm:^6.4.0"
+  checksum: 10c0/9ac158d99991063180e56f408f5991e808fa07594713439c098116da09215c154672ee8c832e16a6b39b037609c08bcaff8ff07c1e3e46c3cc622897972af2aa
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^4.0.0":
   version: 4.0.0
   resolution: "unique-filename@npm:4.0.0"
@@ -10841,6 +11316,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"url-join@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "url-join@npm:4.0.1"
+  checksum: 10c0/ac65e2c7c562d7b49b68edddcf55385d3e922bc1dd5d90419ea40b53b6de1607d1e45ceb71efb9d60da02c681d13c6cb3a1aa8b13fc0c989dfc219df97ee992d
+  languageName: node
+  linkType: hard
+
 "use-callback-ref@npm:^1.3.3":
   version: 1.3.3
   resolution: "use-callback-ref@npm:1.3.3"
@@ -10856,7 +11338,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sidecar@npm:^1.1.2":
+"use-sidecar@npm:^1.1.2, use-sidecar@npm:^1.1.3":
   version: 1.1.3
   resolution: "use-sidecar@npm:1.1.3"
   dependencies:
@@ -11106,6 +11588,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wait-on@npm:8.0.3, wait-on@npm:^8.0.3":
+  version: 8.0.3
+  resolution: "wait-on@npm:8.0.3"
+  dependencies:
+    axios: "npm:^1.8.2"
+    joi: "npm:^17.13.3"
+    lodash: "npm:^4.17.21"
+    minimist: "npm:^1.2.8"
+    rxjs: "npm:^7.8.2"
+  bin:
+    wait-on: bin/wait-on
+  checksum: 10c0/7f14086c3bb6fc055207ab591d2faefc045f718aa7c959353a54af05cf08c53c25d9af80d4d5f6934a169cc0d97ebd1dcf024b13583d09b9a935c36bd745bd7b
+  languageName: node
+  linkType: hard
+
 "wait-on@npm:^7.0.0":
   version: 7.2.0
   resolution: "wait-on@npm:7.2.0"
@@ -11150,6 +11647,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-encoding@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "whatwg-encoding@npm:2.0.0"
+  dependencies:
+    iconv-lite: "npm:0.6.3"
+  checksum: 10c0/91b90a49f312dc751496fd23a7e68981e62f33afe938b97281ad766235c4872fc4e66319f925c5e9001502b3040dd25a33b02a9c693b73a4cbbfdc4ad10c3e3e
+  languageName: node
+  linkType: hard
+
 "which-boxed-primitive@npm:^1.0.2":
   version: 1.1.1
   resolution: "which-boxed-primitive@npm:1.1.1"