diff --git a/package.json b/package.json
index 234702c..27c99cd 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "turbo build",
-    "dev": "turbo dev",
+    "showcases:dev": "turbo --filter showcases dev",
     "test": "turbo test --filter='./packages/*'",
     "test:e2e": "playwright test --config=tests/playwright.config.ts",
     "test:e2e:ui": "playwright test --ui --config=tests/playwright.config.ts",
diff --git a/packages/core/src/defaults/register-default-renderers.ts b/packages/core/src/defaults/register-default-renderers.ts
new file mode 100644
index 0000000..567d82e
--- /dev/null
+++ b/packages/core/src/defaults/register-default-renderers.ts
@@ -0,0 +1,54 @@
+import { ComponentSpec, ComponentType, RuntimeAdapter } from "../runtime/types";
+
+/**
+ * Renderer function - wraps component rendering with additional logic
+ */
+export type RendererFn = (
+    componentSpec: ComponentSpec,
+    props: Record<string, any>,
+    runtime: RuntimeAdapter,
+    children?: any[]
+) => any;
+
+/**
+ * Default renderers - pass props as is
+ */
+export const defaultRenderers: Record<ComponentType, RendererFn> = {
+    field: (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    'field-wrapper': (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    'container': (spec, props, runtime, children) => {
+        return runtime.create(spec, { ...props, children });
+    },
+    content: (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    addon: (spec, props, runtime) => {
+        return runtime.create(spec, props);
+    },
+    'menu-item': (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    'menu-container': (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+
+}
\ No newline at end of file
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 2d5fbed..b0147f3 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -11,8 +11,10 @@ export * from './runtime/types';
 export * from './forms/types';
 
 // Registry system
-export * from './registry/component-registry';
-export * from './registry/renderer-registry';
+export * from './registries/component-registry';
+export * from './registries/renderer-registry';
+
+export * from './defaults/register-default-renderers'
 
 // Orchestrator
 export * from './orchestrator/renderer-orchestrator';
@@ -34,7 +36,6 @@ export * from './provider';
 
 // Utils
 export * from './utils/jexl-config';
-export * from './utils/sanitize-props';
 
 // Validation
 export * from './validation';
diff --git a/packages/core/src/orchestrator/renderer-orchestrator.ts b/packages/core/src/orchestrator/renderer-orchestrator.ts
index c3ae2a8..2b92954 100644
--- a/packages/core/src/orchestrator/renderer-orchestrator.ts
+++ b/packages/core/src/orchestrator/renderer-orchestrator.ts
@@ -8,8 +8,8 @@
 import type { RuntimeAdapter, ComponentSpec, DebugContextValue } from '../runtime/types';
 import type { FormAdapter } from '../forms/types';
 import type { MiddlewareFn, MiddlewareContext } from '../middleware/types';
-import { getComponentSpec } from '../registry/component-registry';
-import { getRendererForType } from '../registry/renderer-registry';
+import { getComponentSpec } from '../registries/component-registry';
+import { getRendererForType } from '../registries/renderer-registry';
 import { applyMiddlewares } from '../middleware/types';
 import { processValue } from '../expressions/template-processor';
 import { createDefaultResolver } from '../expressions/variable-resolver';
@@ -200,6 +200,16 @@ export function createRendererOrchestrator(
     // Parse schema (now using processed schema)
     const { 'x-component-props': componentProps = {} } = processedSchema;
 
+    // const componentSpec = getComponentSpec(componentKey, components, undefined, debug?.isEnabled);
+
+    // if(!componentSpec) {
+    //   if (debug?.isEnabled) {
+    //     console.warn(`Component not found: ${componentKey}`);
+    //   }
+    //   // Return error element (framework adapter will handle)
+    //   return null;
+    // }
+
     // Resolve component and renderer
     // Use processedSchema for x-component resolution (in case x-component has templates)
     // components already has provider components merged in the factory
diff --git a/packages/core/src/provider/provider.test.ts b/packages/core/src/provider/provider.test.ts
index 6f13e1b..5fab48c 100644
--- a/packages/core/src/provider/provider.test.ts
+++ b/packages/core/src/provider/provider.test.ts
@@ -6,7 +6,7 @@ import { describe, it, expect } from 'vitest';
 import { mergeProviderConfigs, resolveProviderConfig } from './provider';
 import type { ProviderConfig } from './types';
 import type { FormSchema } from '../schema/schema-types';
-import { createComponentSpec } from '../registry/component-registry';
+import { createComponentSpec } from '../registries/component-registry';
 
 describe('Provider Utilities', () => {
   describe('mergeProviderConfigs', () => {
diff --git a/packages/core/src/provider/provider.ts b/packages/core/src/provider/provider.ts
index 87f737c..9364a39 100644
--- a/packages/core/src/provider/provider.ts
+++ b/packages/core/src/provider/provider.ts
@@ -6,7 +6,7 @@
 
 import type { ProviderConfig } from './types';
 import { defaultDebugConfig } from './types';
-import { getRendererRegistry } from '../registry/renderer-registry';
+import { getRendererRegistry } from '../registries/renderer-registry';
 
 /**
  * Merge two provider configurations hierarchically
diff --git a/packages/core/src/provider/types.ts b/packages/core/src/provider/types.ts
index 17b46d7..e622b5d 100644
--- a/packages/core/src/provider/types.ts
+++ b/packages/core/src/provider/types.ts
@@ -7,7 +7,7 @@
 import type { ComponentSpec, ComponentType, DebugConfig } from '../runtime/types';
 import type { FormSchema } from '../schema/schema-types';
 import type { MiddlewareFn } from '../middleware/types';
-import type { RendererFn } from '../registry/renderer-registry';
+import { RendererFn } from '../defaults/register-default-renderers';
 
 /**
  * Provider configuration
diff --git a/packages/core/src/registry/component-registry.ts b/packages/core/src/registries/component-registry.ts
similarity index 84%
rename from packages/core/src/registry/component-registry.ts
rename to packages/core/src/registries/component-registry.ts
index 01aae8b..79e1501 100644
--- a/packages/core/src/registry/component-registry.ts
+++ b/packages/core/src/registries/component-registry.ts
@@ -14,7 +14,6 @@ export const defaultTypeProps: Record<ComponentType, Record<string, any>> = {
   field: { fullWidth: true },
   'field-wrapper': {},
   'container': {},
-  'FormContainer': {},
   content: {},
   addon: {},
   'menu-item': {},
@@ -54,21 +53,6 @@ export function getFactoryDefaultComponents(): Record<string, ComponentSpec> {
   return factoryDefaultComponents;
 }
 
-/**
- * Registry overrides (global registrations)
- */
-const registryOverrides = new Map<string, Partial<ComponentSpec>>();
-
-/**
- * Register a component override globally
- */
-export function registerComponent(name: string, config: Partial<ComponentSpec>): void {
-  registryOverrides.set(name, {
-    ...registryOverrides.get(name),
-    ...config,
-  });
-}
-
 /**
  * Get unified component registry
  * 
@@ -101,16 +85,6 @@ export function getComponentRegistry(
     });
   }
 
-  // Apply registry overrides
-  for (const [name, override] of Array.from(registryOverrides.entries())) {
-    const existing = merged[name];
-    merged[name] = {
-      ...existing,
-      ...override,
-      id: override.id || existing?.id || name,
-    } as ComponentSpec;
-  }
-
   return merged;
 }
 
diff --git a/packages/core/src/registries/renderer-registry.ts b/packages/core/src/registries/renderer-registry.ts
new file mode 100644
index 0000000..aaf254d
--- /dev/null
+++ b/packages/core/src/registries/renderer-registry.ts
@@ -0,0 +1,79 @@
+/**
+ * Renderer Registry
+ * 
+ * Framework-agnostic renderer registration system.
+ * Renderers are functions that wrap components with additional rendering logic.
+ */
+
+import { defaultRenderers, RendererFn } from '../defaults/register-default-renderers';
+import type { ComponentType } from '../runtime/types';
+
+
+/**
+ * Get unified renderer registry with hierarchical merging
+ * 
+ * Priority order: local > global > default
+ */
+export function getRendererRegistry(
+  globalRenderers?: Partial<Record<ComponentType, RendererFn>>,
+  localRenderers?: Partial<Record<ComponentType, RendererFn>>
+): Record<ComponentType, RendererFn> {
+  // Start with built-in renderers
+  let merged = { ...defaultRenderers };
+
+  // Apply global renderers (from provider)
+  if (globalRenderers) {
+    Object.keys(globalRenderers).forEach(type => {
+      const renderer = globalRenderers[type as ComponentType];
+      if (renderer) {
+        merged[type as ComponentType] = renderer;
+      }
+    });
+  }
+
+  // Apply local renderers (maximum priority)
+  if (localRenderers) {
+    Object.keys(localRenderers).forEach(type => {
+      const renderer = localRenderers[type as ComponentType];
+      if (renderer) {
+        merged[type as ComponentType] = renderer;
+      }
+    });
+  }
+
+  return merged;
+}
+
+/**
+ * Get effective renderer for a component type
+ * Includes debug logging
+ */
+export function getRendererForType(
+  type: ComponentType,
+  globalRenderers?: Partial<Record<ComponentType, RendererFn>>,
+  localRenderers?: Partial<Record<ComponentType, RendererFn>>,
+  debugEnabled?: boolean
+): RendererFn {
+  // Local renderers have maximum priority
+  if (localRenderers?.[type]) {
+    if (debugEnabled) {
+      console.log(`Renderer resolved from local: ${type}`);
+    }
+    return localRenderers[type]!;
+  }
+
+  // Global renderers second priority
+  if (globalRenderers?.[type]) {
+    if (debugEnabled) {
+      console.log(`Renderer resolved from global: ${type}`);
+    }
+    return globalRenderers[type]!;
+  }
+
+  // Default renderer last
+  if (debugEnabled) {
+    console.log(`Renderer resolved from default: ${type}`);
+  }
+  return defaultRenderers[type];
+}
+
diff --git a/packages/core/src/registry/renderer-registry.ts b/packages/core/src/registry/renderer-registry.ts
deleted file mode 100644
index 5526302..0000000
--- a/packages/core/src/registry/renderer-registry.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * Renderer Registry
- * 
- * Framework-agnostic renderer registration system.
- * Renderers are functions that wrap components with additional rendering logic.
- */
-
-import type { ComponentType, ComponentSpec, RuntimeAdapter } from '../runtime/types';
-import { sanitizePropsForDOM } from '../utils/sanitize-props';
-
-/**
- * Renderer function - wraps component rendering with additional logic
- */
-export type RendererFn = (
-  componentSpec: ComponentSpec,
-  props: Record<string, any>,
-  runtime: RuntimeAdapter,
-  children?: any[]
-) => any;
-
-/**
- * Default renderers - sanitize props before passing to components
- */
-export const defaultTypeRenderers: Record<ComponentType, RendererFn> = {
-  field: (spec, props, runtime, children) => {
-    const sanitized = sanitizePropsForDOM(props);
-    const propsWithChildren = children && children.length > 0 
-      ? { ...sanitized, children }
-      : sanitized;
-    return runtime.create(spec, propsWithChildren);
-  },
-  'field-wrapper': (spec, props, runtime, children) => {
-    const sanitized = sanitizePropsForDOM(props);
-    const propsWithChildren = children && children.length > 0 
-      ? { ...sanitized, children }
-      : sanitized;
-    return runtime.create(spec, propsWithChildren);
-  },
-  'container': (spec, props, runtime, children) => {
-    const xComponentProps = props['x-component-props'] || {};
-    const mergedProps = { ...props, ...xComponentProps };
-    const sanitized = sanitizePropsForDOM(mergedProps);
-    const propsWithChildren = children && children.length > 0 
-      ? { ...sanitized, children }
-      : sanitized;
-    return runtime.create(spec, propsWithChildren);
-  },
-  'FormContainer': (spec, props, runtime, children) => {
-    const { onSubmit, externalContext } = props;
-    const sanitized = sanitizePropsForDOM(props);
-    const propsWithChildren = {
-      ...sanitized,
-      onSubmit,
-      externalContext,
-      ...(children && children.length > 0 ? { children } : {}),
-    };
-    return runtime.create(spec, propsWithChildren);
-  },
-  content: (spec, props, runtime, children) => {
-    const sanitized = sanitizePropsForDOM(props);
-    const propsWithChildren = children && children.length > 0 
-      ? { ...sanitized, children }
-      : sanitized;
-    return runtime.create(spec, propsWithChildren);
-  },
-  addon: (spec, props, runtime) => {
-    const sanitized = sanitizePropsForDOM(props);
-    return runtime.create(spec, sanitized);
-  },
-  'menu-item': (spec, props, runtime, children) => {
-    const sanitized = sanitizePropsForDOM(props);
-    const propsWithChildren = children && children.length > 0 
-      ? { ...sanitized, children }
-      : sanitized;
-    return runtime.create(spec, propsWithChildren);
-  },
-  'menu-container': (spec, props, runtime, children) => {
-    const sanitized = sanitizePropsForDOM(props);
-    const propsWithChildren = children && children.length > 0 
-      ? { ...sanitized, children }
-      : sanitized;
-    return runtime.create(spec, propsWithChildren);
-  },
-};
-
-/**
- * Renderer registry overrides
- */
-const rendererRegistryOverrides = new Map<ComponentType, RendererFn>();
-
-/**
- * Register a renderer override globally
- */
-export function registerRenderer(type: ComponentType, renderer: RendererFn): void {
-  rendererRegistryOverrides.set(type, renderer);
-}
-
-/**
- * Get renderer by type with registry overrides
- */
-export function getRendererByType(type: ComponentType): RendererFn {
-  return rendererRegistryOverrides.get(type) || defaultTypeRenderers[type];
-}
-
-/**
- * Get unified renderer registry with hierarchical merging
- * 
- * Priority order: local > global > registry overrides > default
- */
-export function getRendererRegistry(
-  globalRenderers?: Partial<Record<ComponentType, RendererFn>>,
-  localRenderers?: Partial<Record<ComponentType, RendererFn>>
-): Record<ComponentType, RendererFn> {
-  // Start with built-in renderers
-  let merged = { ...defaultTypeRenderers };
-  
-  // Apply registry overrides (global registrations)
-  rendererRegistryOverrides.forEach((renderer, type) => {
-    merged[type] = renderer;
-  });
-  
-  // Apply global renderers (from provider)
-  if (globalRenderers) {
-    Object.keys(globalRenderers).forEach(type => {
-      const renderer = globalRenderers[type as ComponentType];
-      if (renderer) {
-        merged[type as ComponentType] = renderer;
-      }
-    });
-  }
-  
-  // Apply local renderers (maximum priority)
-  if (localRenderers) {
-    Object.keys(localRenderers).forEach(type => {
-      const renderer = localRenderers[type as ComponentType];
-      if (renderer) {
-        merged[type as ComponentType] = renderer;
-      }
-    });
-  }
-  
-  return merged;
-}
-
-/**
- * Get effective renderer for a component type
- * Includes debug logging
- */
-export function getRendererForType(
-  type: ComponentType,
-  globalRenderers?: Partial<Record<ComponentType, RendererFn>>,
-  localRenderers?: Partial<Record<ComponentType, RendererFn>>,
-  debugEnabled?: boolean
-): RendererFn {
-  // Local renderers have maximum priority
-  if (localRenderers?.[type]) {
-    if (debugEnabled) {
-      console.log(`Renderer resolved from local: ${type}`);
-    }
-    return localRenderers[type]!;
-  }
-
-  // Global renderers second priority
-  if (globalRenderers?.[type]) {
-    if (debugEnabled) {
-      console.log(`Renderer resolved from global: ${type}`);
-    }
-    return globalRenderers[type]!;
-  }
-
-  // Registry overrides third priority
-  if (rendererRegistryOverrides.has(type)) {
-    if (debugEnabled) {
-      console.log(`Renderer resolved from registry override: ${type}`);
-    }
-    return rendererRegistryOverrides.get(type)!;
-  }
-
-  // Default renderer last
-  if (debugEnabled) {
-    console.log(`Renderer resolved from default: ${type}`);
-  }
-  return defaultTypeRenderers[type];
-}
-
diff --git a/packages/core/src/runtime/types.ts b/packages/core/src/runtime/types.ts
index f0f9b35..19b8a46 100644
--- a/packages/core/src/runtime/types.ts
+++ b/packages/core/src/runtime/types.ts
@@ -104,7 +104,6 @@ export type ComponentType =
   | 'field' 
   | 'field-wrapper' 
   | 'container' 
-  | 'FormContainer' 
   | 'content' 
   | 'addon' 
   | 'menu-item' 
diff --git a/packages/core/src/utils/sanitize-props.ts b/packages/core/src/utils/sanitize-props.ts
deleted file mode 100644
index 75d49af..0000000
--- a/packages/core/src/utils/sanitize-props.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Props Sanitization
- * 
- * Removes internal Schepta props before passing to DOM components.
- */
-
-/**
- * List of internal props that should NOT be passed to the DOM
- * These are Schepta-specific metadata props
- */
-const INTERNAL_PROPS = [
-  'name',
-  'x-ui',
-  'x-component-props',
-  'x-rules',
-  'x-reactions',
-  'x-slots',
-  'externalContext',
-  'onSubmit',
-  'formAdapter',
-  'debug',
-] as const;
-
-/**
- * Remove internal Schepta props before passing to DOM components
- * 
- * This prevents props like x-ui, externalContext from appearing
- * as [object Object] attributes in the rendered HTML.
- * 
- * @param props - Props to sanitize
- * @returns Props with internal Schepta props removed
- * 
- * @example
- * ```typescript
- * const props = { name: 'field', 'x-ui': { order: 1 }, externalContext: {...} };
- * const sanitized = sanitizePropsForDOM(props);
- * // sanitized = { name: 'field' }
- * ```
- */
-export function sanitizePropsForDOM(props: Record<string, any>): Record<string, any> {
-  const sanitized = { ...props };
-  
-  for (const key of INTERNAL_PROPS) {
-    delete sanitized[key];
-  }
-  
-  return sanitized;
-}
-
-/**
- * List of internal prop keys (exported for testing/extension)
- */
-export const SCHEPTA_INTERNAL_PROPS = INTERNAL_PROPS;
-
diff --git a/packages/factories/react/src/components/DefaultFormField.tsx b/packages/factories/react/src/components/DefaultFormField.tsx
index 8e44d38..0a56577 100644
--- a/packages/factories/react/src/components/DefaultFormField.tsx
+++ b/packages/factories/react/src/components/DefaultFormField.tsx
@@ -4,7 +4,7 @@
  * Wrapper (grid cell) for a single form field. Can be overridden via createComponentSpec.
  */
 
-import React from 'react';
+import React from "react";
 
 /**
  * Props passed to the FormField component.
@@ -14,8 +14,10 @@ export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Form field children (typically the rendered input) */
   children?: React.ReactNode;
   /** Test ID for the form field */
-  'data-test-id'?: string;
+  "data-test-id"?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -30,10 +32,15 @@ export type FormFieldComponentType = React.ComponentType<FormFieldProps>;
 export const DefaultFormField: React.FC<FormFieldProps> = ({
   children,
   externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...props
 }) => {
   return (
-    <div {...props}>
+    <div
+      {...xComponentProps}
+      {...props}
+    >
       {children}
     </div>
   );
diff --git a/packages/factories/react/src/components/DefaultFormSectionContainer.tsx b/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
index 579148d..a4330d9 100644
--- a/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
@@ -17,6 +17,8 @@ export interface FormSectionContainerProps
   /** Test ID for the form section container */
   'data-test-id'?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  'x-ui'?: Record<string, any>;
 }
 
 /**
@@ -32,6 +34,8 @@ export type FormSectionContainerComponentType =
 export const DefaultFormSectionContainer: React.FC<FormSectionContainerProps> = ({
   children,
   externalContext,
+  'x-ui': xUi,
+  "x-component-props": xComponentProps,
   ...props
 }) => {
   return (
diff --git a/packages/factories/react/src/components/DefaultFormSectionGroup.tsx b/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
index c35dcef..0ebc8bb 100644
--- a/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
@@ -16,6 +16,7 @@ export interface FormSectionGroupProps
   children?: React.ReactNode;
   /** Test ID for the form section group */
   'data-test-id'?: string;
+  'x-component-props'?: Record<string, any>;
   externalContext?: Record<string, any>;
   [key: string]: any;
 }
@@ -33,6 +34,7 @@ export type FormSectionGroupComponentType =
 export const DefaultFormSectionGroup: React.FC<FormSectionGroupProps> = ({
   children,
   externalContext,
+  'x-component-props': xComponentProps,
   ...props
 }) => {
   return (
diff --git a/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx b/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
index 30f6f88..8944ce1 100644
--- a/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
@@ -17,6 +17,8 @@ export interface FormSectionGroupContainerProps
   /** Test ID for the form section group container */
   'data-test-id'?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
diff --git a/packages/factories/react/src/components/DefaultFormSectionTitle.tsx b/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
index 7d3f9e8..8386263 100644
--- a/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
@@ -19,6 +19,8 @@ export interface FormSectionTitleProps
   /** Test ID for the form section title */
   'data-test-id'?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -35,10 +37,12 @@ export const DefaultFormSectionTitle: React.FC<FormSectionTitleProps> = ({
   'x-content': content,
   children,
   externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...props
 }) => {
   return (
-    <h2 style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...props}>
+    <h2 style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...xComponentProps} {...props}>
       {content ?? children}
     </h2>
   );
diff --git a/packages/factories/react/src/components/DefaultInputAutocomplete.tsx b/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
index 6a1f24a..4b5b0ab 100644
--- a/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
+++ b/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
@@ -30,6 +30,8 @@ export interface InputAutocompleteProps
   /** List of options for autocomplete (value used for both value and label if label omitted) */
   options?: InputAutocompleteOption[] | string[];
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -67,7 +69,7 @@ function normalizeOptions(
 export const DefaultInputAutocomplete = React.forwardRef<
   HTMLInputElement,
   InputAutocompleteProps
->(({ label, name, value, onChange, placeholder, options = [], externalContext, ...rest }, ref) => {
+>(({ label, name, value, onChange, placeholder, options = [], externalContext, "x-component-props": xComponentProps, "x-ui": xUi, ...rest }, ref) => {
   const listId = `${name}-datalist`;
   const normalizedOptions = normalizeOptions(options);
 
@@ -87,6 +89,7 @@ export const DefaultInputAutocomplete = React.forwardRef<
         placeholder={placeholder}
         onChange={(e) => onChange?.(e.target.value)}
         style={inputStyle}
+        {...xComponentProps}
         {...rest}
       />
       <datalist id={listId}>
diff --git a/packages/factories/react/src/components/DefaultInputCheckbox.tsx b/packages/factories/react/src/components/DefaultInputCheckbox.tsx
index b902aff..2b726a8 100644
--- a/packages/factories/react/src/components/DefaultInputCheckbox.tsx
+++ b/packages/factories/react/src/components/DefaultInputCheckbox.tsx
@@ -22,6 +22,9 @@ export interface InputCheckboxProps
   onChange?: (value: boolean) => void;
   label?: string;
   children?: React.ReactNode;
+  externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -42,7 +45,7 @@ const labelStyle: React.CSSProperties = {
  * Default checkbox input component.
  */
 export const DefaultInputCheckbox = React.forwardRef<HTMLInputElement, InputCheckboxProps>(
-  ({ label, name, value, onChange, children, ...rest }, ref) => {
+  ({ label, name, value, onChange, children, externalContext, "x-component-props": xComponentProps, "x-ui": xUi, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         <label style={labelStyle}>
@@ -52,6 +55,7 @@ export const DefaultInputCheckbox = React.forwardRef<HTMLInputElement, InputChec
             name={name}
             checked={value ?? false}
             onChange={(e) => onChange?.(e.target.checked)}
+            {...xComponentProps}
             {...rest}
           />
           {label}
diff --git a/packages/factories/react/src/components/DefaultInputDate.tsx b/packages/factories/react/src/components/DefaultInputDate.tsx
index bd87d34..5ecd1d8 100644
--- a/packages/factories/react/src/components/DefaultInputDate.tsx
+++ b/packages/factories/react/src/components/DefaultInputDate.tsx
@@ -22,6 +22,8 @@ export interface InputDateProps
   /** Test ID for the input date */
   'data-test-id'?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -49,7 +51,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default date input component.
  */
 export const DefaultInputDate = React.forwardRef<HTMLInputElement, InputDateProps>(
-  ({ label, name, value, onChange, externalContext, ...rest }, ref) => {
+  ({ label, name, value, onChange, externalContext, "x-component-props": xComponentProps, "x-ui": xUi, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -65,6 +67,7 @@ export const DefaultInputDate = React.forwardRef<HTMLInputElement, InputDateProp
           value={value ?? ''}
           onChange={(e) => onChange?.(e.target.value)}
           style={inputStyle}
+          {...xComponentProps}
           {...rest}
         />
       </div>
diff --git a/packages/factories/react/src/components/DefaultInputNumber.tsx b/packages/factories/react/src/components/DefaultInputNumber.tsx
index ef88fab..9e46c9b 100644
--- a/packages/factories/react/src/components/DefaultInputNumber.tsx
+++ b/packages/factories/react/src/components/DefaultInputNumber.tsx
@@ -25,6 +25,8 @@ export interface InputNumberProps
   max?: number;
   step?: number | string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -52,7 +54,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default number input component.
  */
 export const DefaultInputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
-  ({ label, name, value, onChange, placeholder, min, max, step, externalContext, ...rest }, ref) => {
+  ({ label, name, value, onChange, placeholder, min, max, step, externalContext, "x-component-props": xComponentProps, "x-ui": xUi, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -74,6 +76,7 @@ export const DefaultInputNumber = React.forwardRef<HTMLInputElement, InputNumber
             onChange?.(e.target.value ? Number(e.target.value) : '')
           }
           style={inputStyle}
+          {...xComponentProps}
           {...rest}
         />
       </div>
diff --git a/packages/factories/react/src/components/DefaultInputPhone.tsx b/packages/factories/react/src/components/DefaultInputPhone.tsx
index 3132b4f..9d8cdf3 100644
--- a/packages/factories/react/src/components/DefaultInputPhone.tsx
+++ b/packages/factories/react/src/components/DefaultInputPhone.tsx
@@ -23,6 +23,8 @@ export interface InputPhoneProps
   onChange?: (value: string) => void;
   label?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -50,7 +52,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default phone input component (uses type="tel").
  */
 export const DefaultInputPhone = React.forwardRef<HTMLInputElement, InputPhoneProps>(
-  ({ label, name, value, onChange, placeholder, externalContext, ...rest }, ref) => {
+  ({ label, name, value, onChange, placeholder, externalContext, "x-component-props": xComponentProps, "x-ui": xUi, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -67,6 +69,7 @@ export const DefaultInputPhone = React.forwardRef<HTMLInputElement, InputPhonePr
           placeholder={placeholder}
           onChange={(e) => onChange?.(e.target.value)}
           style={inputStyle}
+          {...xComponentProps}
           {...rest}
         />
       </div>
diff --git a/packages/factories/react/src/components/DefaultInputSelect.tsx b/packages/factories/react/src/components/DefaultInputSelect.tsx
index c59cdc7..35f5e58 100644
--- a/packages/factories/react/src/components/DefaultInputSelect.tsx
+++ b/packages/factories/react/src/components/DefaultInputSelect.tsx
@@ -30,6 +30,8 @@ export interface InputSelectProps
   options?: InputSelectOption[];
   children?: React.ReactNode;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -67,6 +69,8 @@ export const DefaultInputSelect = React.forwardRef<HTMLSelectElement, InputSelec
       placeholder = 'Select...',
       children,
       externalContext,
+      "x-component-props": xComponentProps,
+      "x-ui": xUi,
       ...rest
     },
     ref
@@ -85,6 +89,7 @@ export const DefaultInputSelect = React.forwardRef<HTMLSelectElement, InputSelec
           value={value ?? ''}
           onChange={(e) => onChange?.(e.target.value)}
           style={inputStyle}
+          {...xComponentProps}
           {...rest}
         >
           <option value="">{placeholder}</option>
diff --git a/packages/factories/react/src/components/DefaultInputText.tsx b/packages/factories/react/src/components/DefaultInputText.tsx
index 17a70a4..9ace79b 100644
--- a/packages/factories/react/src/components/DefaultInputText.tsx
+++ b/packages/factories/react/src/components/DefaultInputText.tsx
@@ -22,6 +22,8 @@ export interface InputTextProps
   /** Test ID for the input text */
   'data-test-id'?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -49,7 +51,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default text input component.
  */
 export const DefaultInputText = React.forwardRef<HTMLInputElement, InputTextProps>(
-  ({ label, name, value, onChange, placeholder, externalContext, ...rest }, ref) => {
+  ({ label, name, value, onChange, placeholder, externalContext, "x-component-props": xComponentProps, "x-ui": xUi, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -65,6 +67,7 @@ export const DefaultInputText = React.forwardRef<HTMLInputElement, InputTextProp
           placeholder={placeholder}
           onChange={(e) => onChange?.(e.target.value)}
           style={inputStyle}
+          {...xComponentProps}
           {...rest}
         />
       </div>
diff --git a/packages/factories/react/src/components/DefaultInputTextarea.tsx b/packages/factories/react/src/components/DefaultInputTextarea.tsx
index 81b61bc..ecc685c 100644
--- a/packages/factories/react/src/components/DefaultInputTextarea.tsx
+++ b/packages/factories/react/src/components/DefaultInputTextarea.tsx
@@ -23,6 +23,8 @@ export interface InputTextareaProps
   /** Test ID for the input textarea */
   'data-test-id'?: string;
   externalContext?: Record<string, any>;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -53,7 +55,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
 export const DefaultInputTextarea = React.forwardRef<
   HTMLTextAreaElement,
   InputTextareaProps
->(({ label, name, value, onChange, placeholder, rows = 4, externalContext, ...rest }, ref) => {
+>(({ label, name, value, onChange, placeholder, rows = 4, externalContext, "x-component-props": xComponentProps, "x-ui": xUi, ...rest }, ref) => {
   return (
     <div style={wrapperStyle}>
       {label && (
@@ -70,6 +72,7 @@ export const DefaultInputTextarea = React.forwardRef<
         rows={rows}
         onChange={(e) => onChange?.(e.target.value)}
         style={inputStyle}
+        {...xComponentProps}
         {...rest}
       />
     </div>
diff --git a/packages/factories/react/src/components/DefaultSubmitButton.tsx b/packages/factories/react/src/components/DefaultSubmitButton.tsx
index 28263e7..53a68cb 100644
--- a/packages/factories/react/src/components/DefaultSubmitButton.tsx
+++ b/packages/factories/react/src/components/DefaultSubmitButton.tsx
@@ -39,6 +39,8 @@ export interface SubmitButtonProps {
   externalContext?: Record<string, any>;
   /** Optional children */
   children?: React.ReactNode;
+  "x-component-props"?: Record<string, any>;
+  "x-ui"?: Record<string, any>;
 }
 
 /**
@@ -51,7 +53,7 @@ export type SubmitButtonComponentType = React.ComponentType<SubmitButtonProps>;
  * Default submit button component
  * Can be overridden via components prop or ScheptaProvider
  */
-export const DefaultSubmitButton: React.FC<SubmitButtonProps> = ({ onSubmit }) => {
+export const DefaultSubmitButton: React.FC<SubmitButtonProps> = ({ onSubmit, "x-component-props": xComponentProps, "x-ui": xUi }) => {
   return (
     <div style={{ marginTop: '24px', textAlign: 'right' }}>
       <button
@@ -67,6 +69,7 @@ export const DefaultSubmitButton: React.FC<SubmitButtonProps> = ({ onSubmit }) =
           fontSize: '16px',
           fontWeight: '500',
         }}
+        {...xComponentProps}
       >
         Submit
       </button>
diff --git a/packages/factories/react/src/form-factory.tsx b/packages/factories/react/src/form-factory.tsx
index ae2a4ba..a285d94 100644
--- a/packages/factories/react/src/form-factory.tsx
+++ b/packages/factories/react/src/form-factory.tsx
@@ -47,7 +47,7 @@ import {
 setFactoryDefaultComponents({
   FormContainer: createComponentSpec({
     id: 'FormContainer',
-    type: 'FormContainer',
+    type: 'container',
     factory: () => DefaultFormContainer,
   }),
   SubmitButton: createComponentSpec({
diff --git a/packages/factories/react/src/renderers/field-renderer.ts b/packages/factories/react/src/renderers/field-renderer.ts
index 545bf65..44c6956 100644
--- a/packages/factories/react/src/renderers/field-renderer.ts
+++ b/packages/factories/react/src/renderers/field-renderer.ts
@@ -7,7 +7,6 @@
 
 import React from 'react';
 import type { ComponentSpec, RendererFn, RuntimeAdapter } from '@schepta/core';
-import { sanitizePropsForDOM } from '@schepta/core';
 import { DefaultFieldWrapper, type FieldWrapperType } from '../components/DefaultFieldWrapper';
 
 /**
@@ -81,12 +80,11 @@ export function createFieldRenderer(options: FieldRendererOptions = {}): Rendere
     const mergedProps = { ...props, ...xComponentProps };
     
     // Sanitize props to remove internal Schepta metadata before passing to DOM
-    const sanitizedProps = sanitizePropsForDOM(mergedProps);
     
     const propsWithChildren =
       children && children.length > 0
-        ? { ...sanitizedProps, children }
-        : sanitizedProps;
+        ? { ...mergedProps, children }
+        : mergedProps;
 
     return runtime.create(spec, propsWithChildren);
   };
diff --git a/packages/factories/vanilla/src/form-factory.ts b/packages/factories/vanilla/src/form-factory.ts
index 7ee64d4..cb25f95 100644
--- a/packages/factories/vanilla/src/form-factory.ts
+++ b/packages/factories/vanilla/src/form-factory.ts
@@ -22,7 +22,7 @@ import {
 setFactoryDefaultComponents({
   FormContainer: createComponentSpec({
     id: 'FormContainer',
-    type: 'FormContainer',
+    type: 'container',
     factory: () => createDefaultFormContainer,
   }),
   SubmitButton: createComponentSpec({
diff --git a/packages/factories/vue/src/form-factory.ts b/packages/factories/vue/src/form-factory.ts
index d20c266..b3e7007 100644
--- a/packages/factories/vue/src/form-factory.ts
+++ b/packages/factories/vue/src/form-factory.ts
@@ -21,7 +21,7 @@ import { DefaultFormContainer, DefaultSubmitButton } from './components';
 setFactoryDefaultComponents({
   FormContainer: createComponentSpec({
     id: 'FormContainer',
-    type: 'FormContainer',
+    type: 'container',
     factory: () => DefaultFormContainer,
   }),
   SubmitButton: createComponentSpec({
diff --git a/showcases/src/basic-ui/components/Forms/FormWithFormik.tsx b/showcases/src/basic-ui/components/Forms/FormWithFormik.tsx
index 988b2c1..068a5ad 100644
--- a/showcases/src/basic-ui/components/Forms/FormWithFormik.tsx
+++ b/showcases/src/basic-ui/components/Forms/FormWithFormik.tsx
@@ -38,7 +38,7 @@ export const FormWithFormik: React.FC<FormWithFormikProps> = ({ schema }) => {
     // Register Formik FormContainer with validation - this provides the Formik context
     FormContainer: createComponentSpec({
       id: 'FormContainer',
-      type: 'FormContainer',
+      type: 'container',
       factory: () => FormikFormContainer,
     }),
   }), []);
diff --git a/showcases/src/basic-ui/components/Forms/FormWithRHF.tsx b/showcases/src/basic-ui/components/Forms/FormWithRHF.tsx
index 8732fd0..e4fb91f 100644
--- a/showcases/src/basic-ui/components/Forms/FormWithRHF.tsx
+++ b/showcases/src/basic-ui/components/Forms/FormWithRHF.tsx
@@ -36,7 +36,7 @@ export const FormWithRHF: React.FC<FormWithRHFProps> = ({ schema }) => {
     // Register RHF FormContainer with validation - this provides the FormProvider context
     FormContainer: createComponentSpec({
       id: 'FormContainer',
-      type: 'FormContainer',
+      type: 'container',
       factory: () => RHFFormContainer,
     }),
   }), []);
diff --git a/showcases/src/basic-ui/components/Inputs/InputText.tsx b/showcases/src/basic-ui/components/Inputs/InputText.tsx
index 0ab0676..30d047b 100644
--- a/showcases/src/basic-ui/components/Inputs/InputText.tsx
+++ b/showcases/src/basic-ui/components/Inputs/InputText.tsx
@@ -1,7 +1,8 @@
 import type { InputTextProps } from '@schepta/factory-react';
 import React from "react";
 
-export const InputText: React.FC<InputTextProps> = ({ label, name, value, onChange, placeholder, externalContext, ...rest }) => {
+export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
+  ({ label, name, value, onChange, placeholder, externalContext, ...rest }, ref) => {
   return (
     <div style={{ marginBottom: "16px" }}>
       {label && (
@@ -13,6 +14,7 @@ export const InputText: React.FC<InputTextProps> = ({ label, name, value, onChan
         </label>
       )}
       <input
+        ref={ref}
         id={name}
         name={name}
         data-test-id={name}
@@ -29,4 +31,4 @@ export const InputText: React.FC<InputTextProps> = ({ label, name, value, onChan
       />
     </div>
   );
-};
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/showcases/src/basic-ui/components/rhf/RHFFormContainer.tsx b/showcases/src/basic-ui/components/rhf/RHFFormContainer.tsx
index b538ea0..818f301 100644
--- a/showcases/src/basic-ui/components/rhf/RHFFormContainer.tsx
+++ b/showcases/src/basic-ui/components/rhf/RHFFormContainer.tsx
@@ -30,7 +30,7 @@ import { useSchepta } from '@schepta/adapter-react';
  * const components = {
  *   FormContainer: createComponentSpec({
  *     id: 'FormContainer',
- *     type: 'FormContainer',
+ *     type: 'container',
  *     factory: () => createRHFFormContainer(jsonSchema, initialValues),
  *   }),
  * };
@@ -40,6 +40,7 @@ import { useSchepta } from '@schepta/adapter-react';
 export const RHFFormContainer: React.FC<FormContainerProps> = ({
   children,
   onSubmit,
+  externalContext,
   ...props
 }) => {
   const { schema } = useSchepta();
diff --git a/showcases/src/chakra-ui/components/ComponentRegistry.tsx b/showcases/src/chakra-ui/components/ComponentRegistry.tsx
index 1e4f845..81faf46 100644
--- a/showcases/src/chakra-ui/components/ComponentRegistry.tsx
+++ b/showcases/src/chakra-ui/components/ComponentRegistry.tsx
@@ -16,7 +16,7 @@ import { FormSectionGroup } from "./Containers/FormSectionGroup";
 export const components = {
   'FormContainer': createComponentSpec({
     id: "FormContainer",
-    type: "FormContainer",
+    type: "container",
     factory: (props, runtime) => FormContainer,
   }),
   InputText: createComponentSpec({
diff --git a/showcases/src/chakra-ui/components/Containers/FormField.tsx b/showcases/src/chakra-ui/components/Containers/FormField.tsx
index 5c8ab32..3d698d1 100644
--- a/showcases/src/chakra-ui/components/Containers/FormField.tsx
+++ b/showcases/src/chakra-ui/components/Containers/FormField.tsx
@@ -2,6 +2,20 @@ import React from "react";
 import { Box, BoxProps } from "@chakra-ui/react";
 import type { FormFieldProps } from "@schepta/factory-react";
 
-export const FormField: React.FC<FormFieldProps & BoxProps> = ({ children, ...props }) => {
-    return <Box data-test-id="FormField" {...props}>{children}</Box>;
-  };
\ No newline at end of file
+export const FormField: React.FC<FormFieldProps & BoxProps> = ({
+  children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
+  ...props
+}) => {
+  return (
+    <Box
+      data-test-id="FormField"
+      {...xComponentProps}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/showcases/src/chakra-ui/components/Containers/FormSectionContainer.tsx b/showcases/src/chakra-ui/components/Containers/FormSectionContainer.tsx
index ba93b16..d2ac822 100644
--- a/showcases/src/chakra-ui/components/Containers/FormSectionContainer.tsx
+++ b/showcases/src/chakra-ui/components/Containers/FormSectionContainer.tsx
@@ -2,6 +2,21 @@ import React from "react";
 import { Box, BoxProps } from "@chakra-ui/react";
 import type { FormSectionContainerProps } from "@schepta/factory-react";
 
-export const FormSectionContainer: React.FC<FormSectionContainerProps & BoxProps> = ({ children, ...props }) => {
-    return <Box mb={6} {...props}>{children}</Box>;
-  };
\ No newline at end of file
+export const FormSectionContainer: React.FC<
+  FormSectionContainerProps & BoxProps
+> = ({
+  children,
+  externalContext,
+  "x-ui": xUi,
+  "x-component-props": xComponentProps,
+  ...props
+}) => {
+  return (
+    <Box
+      mb={6}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/showcases/src/chakra-ui/components/Containers/FormSectionGroup.tsx b/showcases/src/chakra-ui/components/Containers/FormSectionGroup.tsx
index 6b88f48..71b581a 100644
--- a/showcases/src/chakra-ui/components/Containers/FormSectionGroup.tsx
+++ b/showcases/src/chakra-ui/components/Containers/FormSectionGroup.tsx
@@ -2,10 +2,22 @@ import React from "react";
 import { Grid, GridProps } from "@chakra-ui/react";
 import type { FormSectionGroupProps } from "@schepta/factory-react";
 
-export const FormSectionGroup: React.FC<FormSectionGroupProps & GridProps> = ({ children, ...props }) => {
-    return (
-      <Grid data-test-id="FormSectionGroup" templateColumns={`repeat(auto-fit, minmax(200px, 1fr))`} gap={4} {...props}>
-        {children}
-      </Grid>
-    );
-  };
\ No newline at end of file
+export const FormSectionGroup: React.FC<FormSectionGroupProps & GridProps> = ({
+  children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
+  ...props
+}) => {
+  return (
+    <Grid
+      data-test-id="FormSectionGroup"
+      templateColumns={`repeat(auto-fit, minmax(200px, 1fr))`}
+      gap={4}
+      {...xComponentProps}
+      {...props}
+    >
+      {children}
+    </Grid>
+  );
+};
diff --git a/showcases/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx b/showcases/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx
index bdd8957..0c62ea8 100644
--- a/showcases/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx
+++ b/showcases/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx
@@ -2,6 +2,22 @@ import React from "react";
 import { Box, BoxProps } from "@chakra-ui/react";
 import type { FormSectionGroupContainerProps } from "@schepta/factory-react";
 
-export const FormSectionGroupContainer: React.FC<FormSectionGroupContainerProps & BoxProps> = ({ children, ...props }) => {
-    return <Box data-test-id="FormSectionGroupContainer" {...props}>{children}</Box>;
-  };
\ No newline at end of file
+export const FormSectionGroupContainer: React.FC<
+  FormSectionGroupContainerProps & BoxProps
+> = ({
+  children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
+  ...props
+}) => {
+  return (
+    <Box
+      data-test-id="FormSectionGroupContainer"
+      {...xComponentProps}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/showcases/src/chakra-ui/components/Containers/FormSectionTitle.tsx b/showcases/src/chakra-ui/components/Containers/FormSectionTitle.tsx
index 7ed8d77..7c78a90 100644
--- a/showcases/src/chakra-ui/components/Containers/FormSectionTitle.tsx
+++ b/showcases/src/chakra-ui/components/Containers/FormSectionTitle.tsx
@@ -2,10 +2,24 @@ import React from "react";
 import { Heading, HeadingProps } from "@chakra-ui/react";
 import type { FormSectionTitleProps } from "@schepta/factory-react";
 
-export const FormSectionTitle: React.FC<FormSectionTitleProps & HeadingProps> = ({ 'x-content': content, children, ...props }) => {
-    return (
-      <Heading size="md" mb={4} {...props}>
-        {content || children}
-      </Heading>
-    );
-  };
\ No newline at end of file
+export const FormSectionTitle: React.FC<
+  FormSectionTitleProps & HeadingProps
+> = ({
+  "x-content": content,
+  children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
+  ...props
+}) => {
+  return (
+    <Heading
+      size="md"
+      mb={4}
+      {...xComponentProps}
+      {...props}
+    >
+      {content || children}
+    </Heading>
+  );
+};
diff --git a/showcases/src/chakra-ui/components/Inputs/InputCheckbox.tsx b/showcases/src/chakra-ui/components/Inputs/InputCheckbox.tsx
index 8fec913..bbd75ba 100644
--- a/showcases/src/chakra-ui/components/Inputs/InputCheckbox.tsx
+++ b/showcases/src/chakra-ui/components/Inputs/InputCheckbox.tsx
@@ -7,6 +7,9 @@ export const InputCheckbox: React.FC<InputCheckboxProps & CheckboxProps> = ({
   name,
   value,
   onChange,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -15,6 +18,7 @@ export const InputCheckbox: React.FC<InputCheckboxProps & CheckboxProps> = ({
       isChecked={value || false}
       onChange={(e) => onChange?.(e.target.checked)}
       data-test-id={name}
+      {...xComponentProps}
       {...rest}
     >
       {label}
diff --git a/showcases/src/chakra-ui/components/Inputs/InputDate.tsx b/showcases/src/chakra-ui/components/Inputs/InputDate.tsx
index 161c2b1..0bf7d85 100644
--- a/showcases/src/chakra-ui/components/Inputs/InputDate.tsx
+++ b/showcases/src/chakra-ui/components/Inputs/InputDate.tsx
@@ -7,6 +7,9 @@ export const InputDate: React.FC<InputDateProps & InputProps> = ({
   name,
   value,
   onChange,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -18,6 +21,7 @@ export const InputDate: React.FC<InputDateProps & InputProps> = ({
         value={value || ""}
         onChange={(e) => onChange?.(e.target.value)}
         data-test-id={name}
+        {...xComponentProps}
         {...rest}
       />
     </FormControl>
diff --git a/showcases/src/chakra-ui/components/Inputs/InputNumber.tsx b/showcases/src/chakra-ui/components/Inputs/InputNumber.tsx
index 37218df..25f7e5a 100644
--- a/showcases/src/chakra-ui/components/Inputs/InputNumber.tsx
+++ b/showcases/src/chakra-ui/components/Inputs/InputNumber.tsx
@@ -11,6 +11,9 @@ export const InputNumber: React.FC<InputNumberProps & InputProps> = ({
   min,
   max,
   step,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -28,6 +31,7 @@ export const InputNumber: React.FC<InputNumberProps & InputProps> = ({
         max={max}
         step={step}
         data-test-id={name}
+        {...xComponentProps}
         {...rest}
       />
     </FormControl>
diff --git a/showcases/src/chakra-ui/components/Inputs/InputPhone.tsx b/showcases/src/chakra-ui/components/Inputs/InputPhone.tsx
index 5727bb9..482929c 100644
--- a/showcases/src/chakra-ui/components/Inputs/InputPhone.tsx
+++ b/showcases/src/chakra-ui/components/Inputs/InputPhone.tsx
@@ -12,6 +12,9 @@ export const InputPhone: React.FC<InputPhoneProps & InputProps> = ({
   min,
   max,
   step,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -24,6 +27,7 @@ export const InputPhone: React.FC<InputPhoneProps & InputProps> = ({
       min={min}
       max={max}
       step={step}
+      {...xComponentProps}
       {...rest}
     />
   );
diff --git a/showcases/src/chakra-ui/components/Inputs/InputSelect.tsx b/showcases/src/chakra-ui/components/Inputs/InputSelect.tsx
index 11c78c9..d515d57 100644
--- a/showcases/src/chakra-ui/components/Inputs/InputSelect.tsx
+++ b/showcases/src/chakra-ui/components/Inputs/InputSelect.tsx
@@ -9,6 +9,9 @@ export const InputSelect: React.FC<InputSelectProps & SelectProps> = ({
   onChange,
   options = [],
   placeholder = "Select...",
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -20,6 +23,7 @@ export const InputSelect: React.FC<InputSelectProps & SelectProps> = ({
         onChange={(e) => onChange?.(e.target.value)}
         data-test-id={name}
         placeholder={placeholder}
+        {...xComponentProps}
         {...rest}
       >
         {options.map((opt: any) => (
diff --git a/showcases/src/chakra-ui/components/Inputs/InputText.tsx b/showcases/src/chakra-ui/components/Inputs/InputText.tsx
index bca6bf3..bad5004 100644
--- a/showcases/src/chakra-ui/components/Inputs/InputText.tsx
+++ b/showcases/src/chakra-ui/components/Inputs/InputText.tsx
@@ -8,6 +8,9 @@ export const InputText: React.FC<InputTextProps & InputProps> = ({
   value,
   onChange,
   placeholder,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -19,6 +22,7 @@ export const InputText: React.FC<InputTextProps & InputProps> = ({
         placeholder={placeholder}
         onChange={(e) => onChange?.(e.target.value)}
         data-test-id={name}
+        {...xComponentProps}
         {...rest}
       />
     </FormControl>
diff --git a/showcases/src/chakra-ui/components/Inputs/InputTextarea.tsx b/showcases/src/chakra-ui/components/Inputs/InputTextarea.tsx
index def935e..9454042 100644
--- a/showcases/src/chakra-ui/components/Inputs/InputTextarea.tsx
+++ b/showcases/src/chakra-ui/components/Inputs/InputTextarea.tsx
@@ -14,6 +14,9 @@ export const InputTextarea: React.FC<InputTextareaProps & TextareaProps> = ({
   onChange,
   placeholder,
   rows = 4,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -26,6 +29,7 @@ export const InputTextarea: React.FC<InputTextareaProps & TextareaProps> = ({
         rows={rows}
         onChange={(e) => onChange?.(e.target.value)}
         data-test-id={name}
+        {...xComponentProps}
         {...rest}
       />
     </FormControl>
diff --git a/showcases/src/material-ui/components/ComponentRegistry.tsx b/showcases/src/material-ui/components/ComponentRegistry.tsx
index 1e4f845..81faf46 100644
--- a/showcases/src/material-ui/components/ComponentRegistry.tsx
+++ b/showcases/src/material-ui/components/ComponentRegistry.tsx
@@ -16,7 +16,7 @@ import { FormSectionGroup } from "./Containers/FormSectionGroup";
 export const components = {
   'FormContainer': createComponentSpec({
     id: "FormContainer",
-    type: "FormContainer",
+    type: "container",
     factory: (props, runtime) => FormContainer,
   }),
   InputText: createComponentSpec({
diff --git a/showcases/src/material-ui/components/Containers/FormContainer.tsx b/showcases/src/material-ui/components/Containers/FormContainer.tsx
index 3b09160..34cc9cd 100644
--- a/showcases/src/material-ui/components/Containers/FormContainer.tsx
+++ b/showcases/src/material-ui/components/Containers/FormContainer.tsx
@@ -7,6 +7,8 @@ import { useScheptaFormAdapter } from "@schepta/factory-react";
 export const FormContainer: React.FC<FormContainerProps & BoxProps> = ({ 
   children, 
   onSubmit, 
+  externalContext,
+  ...props
 }) => {
   const adapter = useScheptaFormAdapter();
 
@@ -20,6 +22,7 @@ export const FormContainer: React.FC<FormContainerProps & BoxProps> = ({
       component="form"
       data-test-id="FormContainer"
       onSubmit={handleFormSubmit}
+      {...props}
     >
       {children}
       {onSubmit && <SubmitButton onSubmit={onSubmit} />}
diff --git a/showcases/src/material-ui/components/Containers/FormField.tsx b/showcases/src/material-ui/components/Containers/FormField.tsx
index 9230059..ff5b124 100644
--- a/showcases/src/material-ui/components/Containers/FormField.tsx
+++ b/showcases/src/material-ui/components/Containers/FormField.tsx
@@ -2,6 +2,20 @@ import React from "react";
 import { Box, BoxProps } from "@mui/material";
 import type { FormFieldProps } from "@schepta/factory-react";
 
-export const FormField: React.FC<FormFieldProps & BoxProps> = ({ children, ...props }) => {
-  return <Box data-test-id="FormField" {...props}>{children}</Box>;
+export const FormField: React.FC<FormFieldProps & BoxProps> = ({
+  children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
+  ...props
+}) => {
+  return (
+    <Box
+      data-test-id="FormField"
+      {...xComponentProps}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
 };
diff --git a/showcases/src/material-ui/components/Containers/FormSectionContainer.tsx b/showcases/src/material-ui/components/Containers/FormSectionContainer.tsx
index 0dfc9f3..2f5dc72 100644
--- a/showcases/src/material-ui/components/Containers/FormSectionContainer.tsx
+++ b/showcases/src/material-ui/components/Containers/FormSectionContainer.tsx
@@ -2,10 +2,19 @@ import React from "react";
 import { Box, BoxProps } from "@mui/material";
 import type { FormSectionContainerProps } from "@schepta/factory-react";
 
-export const FormSectionContainer: React.FC<FormSectionContainerProps & BoxProps> = ({ children, ...props }) => {
+export const FormSectionContainer: React.FC<
+  FormSectionContainerProps & BoxProps
+> = ({
+  children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
+  ...props
+}) => {
   return (
     <Box
       sx={{ mb: 3 }}
+      {...xComponentProps}
       {...props}
     >
       {children}
diff --git a/showcases/src/material-ui/components/Containers/FormSectionGroup.tsx b/showcases/src/material-ui/components/Containers/FormSectionGroup.tsx
index 4096daa..e4bf4b8 100644
--- a/showcases/src/material-ui/components/Containers/FormSectionGroup.tsx
+++ b/showcases/src/material-ui/components/Containers/FormSectionGroup.tsx
@@ -4,15 +4,18 @@ import type { FormSectionGroupProps } from "@schepta/factory-react";
 
 export const FormSectionGroup: React.FC<FormSectionGroupProps & BoxProps> = ({
   children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...props
 }) => {
 
   return (
     <Box
-      data-test-id="FormSectionGroup"
       display="grid"
       gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))"
       gap={4}
+      {...xComponentProps}
       {...props}
     >
       {children}
diff --git a/showcases/src/material-ui/components/Containers/FormSectionGroupContainer.tsx b/showcases/src/material-ui/components/Containers/FormSectionGroupContainer.tsx
index dc9b7ce..01d7e4b 100644
--- a/showcases/src/material-ui/components/Containers/FormSectionGroupContainer.tsx
+++ b/showcases/src/material-ui/components/Containers/FormSectionGroupContainer.tsx
@@ -2,6 +2,21 @@ import React from "react";
 import { Box, BoxProps } from "@mui/material";
 import type { FormSectionGroupContainerProps } from "@schepta/factory-react";
 
-export const FormSectionGroupContainer: React.FC<FormSectionGroupContainerProps & BoxProps> = ({ children, ...props }) => {
-  return <Box data-test-id="FormSectionGroupContainer" {...props}>{children}</Box>;
+export const FormSectionGroupContainer: React.FC<
+  FormSectionGroupContainerProps & BoxProps
+> = ({
+  children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
+  ...props
+}) => {
+  return (
+    <Box
+      {...xComponentProps}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
 };
diff --git a/showcases/src/material-ui/components/Containers/FormSectionTitle.tsx b/showcases/src/material-ui/components/Containers/FormSectionTitle.tsx
index 5e868e3..c24864f 100644
--- a/showcases/src/material-ui/components/Containers/FormSectionTitle.tsx
+++ b/showcases/src/material-ui/components/Containers/FormSectionTitle.tsx
@@ -5,12 +5,16 @@ import type { FormSectionTitleProps } from "@schepta/factory-react";
 export const FormSectionTitle: React.FC<FormSectionTitleProps & TypographyProps> = ({
   "x-content": content,
   children,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...props
 }) => {
   return (
     <Typography
       variant="h5"
       sx={{ mb: 2 }}
+      {...xComponentProps}
       {...props}
     >
       {content || children}
diff --git a/showcases/src/material-ui/components/Inputs/InputCheckbox.tsx b/showcases/src/material-ui/components/Inputs/InputCheckbox.tsx
index 3954818..d1570c4 100644
--- a/showcases/src/material-ui/components/Inputs/InputCheckbox.tsx
+++ b/showcases/src/material-ui/components/Inputs/InputCheckbox.tsx
@@ -8,6 +8,9 @@ export const InputCheckbox: React.FC<InputCheckboxProps & CheckboxProps> = ({
   name,
   value,
   onChange,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -18,6 +21,7 @@ export const InputCheckbox: React.FC<InputCheckboxProps & CheckboxProps> = ({
           checked={value || false}
           onChange={(e) => onChange?.(e.target.checked)}
           data-test-id={name}
+          {...xComponentProps}
           {...rest}
         />
       }
diff --git a/showcases/src/material-ui/components/Inputs/InputDate.tsx b/showcases/src/material-ui/components/Inputs/InputDate.tsx
index 0c2783c..9bf2ecc 100644
--- a/showcases/src/material-ui/components/Inputs/InputDate.tsx
+++ b/showcases/src/material-ui/components/Inputs/InputDate.tsx
@@ -7,6 +7,9 @@ export const InputDate: React.FC<InputDateProps & TextFieldProps> = ({
   name,
   value,
   onChange,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -20,6 +23,7 @@ export const InputDate: React.FC<InputDateProps & TextFieldProps> = ({
       InputLabelProps={{ shrink: true }}
       data-test-id={name}
       margin="normal"
+      {...xComponentProps}
       {...rest}
     />
   );
diff --git a/showcases/src/material-ui/components/Inputs/InputNumber.tsx b/showcases/src/material-ui/components/Inputs/InputNumber.tsx
index 6de86f5..bb089d0 100644
--- a/showcases/src/material-ui/components/Inputs/InputNumber.tsx
+++ b/showcases/src/material-ui/components/Inputs/InputNumber.tsx
@@ -11,6 +11,9 @@ export const InputNumber: React.FC<InputNumberProps & TextFieldProps> = ({
   min,
   max,
   step,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -27,6 +30,7 @@ export const InputNumber: React.FC<InputNumberProps & TextFieldProps> = ({
         inputProps={{ min, max, step }}
         data-test-id={name}
         margin="normal"
+        {...xComponentProps}
         {...rest}
       />
     );
diff --git a/showcases/src/material-ui/components/Inputs/InputPhone.tsx b/showcases/src/material-ui/components/Inputs/InputPhone.tsx
index 97d9ea8..082a69f 100644
--- a/showcases/src/material-ui/components/Inputs/InputPhone.tsx
+++ b/showcases/src/material-ui/components/Inputs/InputPhone.tsx
@@ -11,6 +11,9 @@ export const InputPhone: React.FC<InputPhoneProps & TextFieldProps> = ({
   min,
   max,
   step,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -21,6 +24,7 @@ export const InputPhone: React.FC<InputPhoneProps & TextFieldProps> = ({
       onChange={onChange}
       placeholder={placeholder}
       inputProps={{ min, max, step }}
+      {...xComponentProps}
       {...rest}
     />
   );
diff --git a/showcases/src/material-ui/components/Inputs/InputSelect.tsx b/showcases/src/material-ui/components/Inputs/InputSelect.tsx
index f28af81..6883451 100644
--- a/showcases/src/material-ui/components/Inputs/InputSelect.tsx
+++ b/showcases/src/material-ui/components/Inputs/InputSelect.tsx
@@ -10,6 +10,9 @@ export const InputSelect: React.FC<InputSelectProps & TextFieldProps> = ({
   onChange,
   options = [],
   placeholder = 'Select...',
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -22,6 +25,7 @@ export const InputSelect: React.FC<InputSelectProps & TextFieldProps> = ({
         onChange={(e) => onChange?.(e.target.value)}
         data-test-id={name}
         margin="normal"
+        {...xComponentProps}
         {...rest}
       >
         <MenuItem value="">{placeholder}</MenuItem>
diff --git a/showcases/src/material-ui/components/Inputs/InputText.tsx b/showcases/src/material-ui/components/Inputs/InputText.tsx
index 50a613c..25dadce 100644
--- a/showcases/src/material-ui/components/Inputs/InputText.tsx
+++ b/showcases/src/material-ui/components/Inputs/InputText.tsx
@@ -8,6 +8,9 @@ export const InputText: React.FC<InputTextProps & TextFieldProps> = ({
   value,
   onChange,
   placeholder,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -20,6 +23,7 @@ export const InputText: React.FC<InputTextProps & TextFieldProps> = ({
         onChange={(e) => onChange?.(e.target.value)}
         data-test-id={name}
         margin="normal"
+        {...xComponentProps}
         {...rest}
       />
     );
diff --git a/showcases/src/material-ui/components/Inputs/InputTextarea.tsx b/showcases/src/material-ui/components/Inputs/InputTextarea.tsx
index 58f57f7..cc907c8 100644
--- a/showcases/src/material-ui/components/Inputs/InputTextarea.tsx
+++ b/showcases/src/material-ui/components/Inputs/InputTextarea.tsx
@@ -9,6 +9,9 @@ export const InputTextarea: React.FC<InputTextareaProps & TextFieldProps> = ({
   onChange,
   placeholder,
   rows = 4,
+  externalContext,
+  "x-component-props": xComponentProps,
+  "x-ui": xUi,
   ...rest
 }) => {
   return (
@@ -23,6 +26,7 @@ export const InputTextarea: React.FC<InputTextareaProps & TextFieldProps> = ({
       onChange={(e) => onChange?.(e.target.value)}
       data-test-id={name}
       margin="normal"
+      {...xComponentProps}
       {...rest}
     />
   );