diff --git a/packages/docs/src/components/MotionEntity.tsx b/packages/docs/src/components/MotionEntity.tsx
index 818ea74b..fdb1ba24 100644
--- a/packages/docs/src/components/MotionEntity.tsx
+++ b/packages/docs/src/components/MotionEntity.tsx
@@ -79,9 +79,9 @@ export const MotionEntity: FC<MotionEntityProps> = ({ children, animate: animate
     return (
         <Entity ref={entityRef}
             {...props}
-            position={position.array.get() as number[]}
-            rotation={rotation.array.get() as number[]}
-            scale={scale.array.get() as number[]}
+            position={position.array.get() as [number, number, number]}
+            rotation={rotation.array.get() as [number, number, number, number?]}
+            scale={scale.array.get() as [number, number, number]}
         >
             {children}
         </Entity>
diff --git a/packages/lib/src/Application.tsx b/packages/lib/src/Application.tsx
index 61ec7d5e..c37aa240 100644
--- a/packages/lib/src/Application.tsx
+++ b/packages/lib/src/Application.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   FILLMODE_NONE,
   FILLMODE_FILL_WINDOW,
@@ -9,62 +9,26 @@ import {
   TouchDevice,
   Entity as PcEntity,
   RESOLUTION_FIXED,
+  type GraphicsDevice,
 } from 'playcanvas';
 import { AppContext, ParentContext } from './hooks';
 import { PointerEventsContext } from './contexts/pointer-events-context';
 import { usePicker } from './utils/picker';
 import { PhysicsProvider } from './contexts/physics-context';
-
-interface GraphicsOptions {
-  /** Boolean that indicates if the canvas contains an alpha buffer. */
-  alpha?: boolean, //true,
-  /** Boolean that indicates that the drawing buffer is requested to have a depth buffer of at least 16 bits. */
-  depth?: boolean, //true
-  /** Boolean that indicates that the drawing buffer is requested to have a stencil buffer of at least 8 bits. */
-  stencil?: boolean, //true
-  /** Boolean that indicates whether or not to perform anti-aliasing if possible. */
-  antialias?: boolean, //true
-  /** Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. */
-  premultipliedAlpha?: boolean, //true
-  /** If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author. */
-  preserveDrawingBuffer?: boolean, //false
-  /** A hint to the user agent indicating what configuration of GPU is suitable for the WebGL context. */
-  powerPreference?: 'default' | 'high-performance' | 'low-power' // 'default'
-  /** Boolean that indicates if a context will be created if the system performance is low or if no hardware GPU is available. */
-  failIfMajorPerformanceCaveat?: boolean,//false
-  /** Boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop. */
-  desynchronized?: boolean,//false
-  /** BBoolean that hints to the user agent to use a compatible graphics adapter for an immersive XR device. */
-  xrCompatible?: boolean,//false
-}
-
-interface ApplicationProps extends PropsWithChildren<unknown> {
-  /** The class name to attach to the canvas component */
-  className?: string,
-  /** A style object added to the canvas component */
-  style?: Record<string, unknown>
-  /** Controls how the canvas fills the window and resizes when the window changes. */
-  fillMode?: typeof FILLMODE_NONE | typeof FILLMODE_FILL_WINDOW | typeof FILLMODE_KEEP_ASPECT
-  /** Change the resolution of the canvas, and set the way it behaves when the window is resized. */
-  resolutionMode?: typeof RESOLUTION_AUTO | typeof RESOLUTION_FIXED
-  /** Clamps per-frame delta time to an upper bound. Useful since returning from a tab deactivation can generate huge values for dt, which can adversely affect game state. */
-  maxDeltaTime?: number
-  /** Scales the global time delta. */
-  timeScale?: number,
-  /** Whether to use the PlayCanvas Physics system. */
-  usePhysics?: boolean,
-  /** Graphics Settings */
-  graphicsDeviceOptions?: GraphicsOptions
-}
-
-
-interface ApplicationWithoutCanvasProps extends ApplicationProps {
-  /** A ref to a html canvas element */
-  canvasRef: React.RefObject<HTMLCanvasElement>;
-}
+import { validateAndSanitizeProps, createComponentDefinition, Schema, getNullApplication } from './utils/validation';
+import { PublicProps } from './utils/types-utils';
 
 /**
- * The **Application** component is the root node of the PlayCanvas React api. It creates a canvas element
+ * The **Application** component is the root node of the PlayCanvas React API. It creates a canvas element
+ * and initializes a PlayCanvas application instance.
+ * 
+ * @param {ApplicationProps} props - The props to pass to the application component.
+ * @returns {React.ReactNode} - The application component.
+ * 
+ * @example
+ * <Application>
+ *  <Entity />
+ * </Application>
  */
 export const Application: React.FC<ApplicationProps> = ({ 
   children, 
@@ -90,18 +54,42 @@ export const Application: React.FC<ApplicationProps> = ({
 
 /**
  * An alternative Application component that does not create a canvas element. 
- * This allows you to create a canvas independently from Playcanvas and pass this in as a ref.
+ * This allows you to create a canvas independently from PlayCanvas and pass it in as a ref.
+ * 
+ * @param {ApplicationWithoutCanvasProps} props - The props to pass to the application component.
+ * @returns {React.ReactNode} The application component.
+ * 
+ * @example
+ * const canvasRef = useRef<HTMLCanvasElement>(null);
+ * 
+ * return (
+ *   <>
+ *     <canvas ref={canvasRef} />
+ *     <ApplicationWithoutCanvas canvasRef={canvasRef}>
+ *       <Entity />
+ *     </ApplicationWithoutCanvas>
+ *   </>
+ * );
  */
-export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = ({
-  children,
-  canvasRef,
-  fillMode = FILLMODE_NONE,
-  resolutionMode = RESOLUTION_AUTO,
-  maxDeltaTime = 0.1,
-  timeScale = 1,
-  usePhysics = false,
-  ...otherProps
-}) => {
+export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = (props) => {
+  
+  const { children, ...propsToValidate } = props;
+
+  const validatedProps = validateAndSanitizeProps<ApplicationWithoutCanvasProps>(
+    propsToValidate, 
+    componentDefinition
+  );
+
+  const {
+    canvasRef,
+    fillMode = FILLMODE_NONE,
+    resolutionMode = RESOLUTION_AUTO,
+    maxDeltaTime = 0.1,
+    timeScale = 1,
+    usePhysics = false,
+    ...otherProps
+  } = validatedProps;
+
   const graphicsDeviceOptions = {
     alpha: true,
     depth: true,
@@ -152,7 +140,7 @@ export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = ({
     if (!app) return;
     app.maxDeltaTime = maxDeltaTime;
     app.timeScale = timeScale;
-  }, [app])
+  }, [app, maxDeltaTime, timeScale])
 
   if (!app) return null;
 
@@ -167,4 +155,67 @@ export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = ({
       </AppContext.Provider>
     </PhysicsProvider>
   );
-};
\ No newline at end of file
+};
+
+type GraphicsOptions = Partial<PublicProps<GraphicsDevice>>
+
+interface ApplicationProps extends Partial<PublicProps<PlayCanvasApplication>> {
+  /** The class name to attach to the canvas component */
+  className?: string,
+  /** A style object added to the canvas component */
+  style?: Record<string, unknown>
+  /** Controls how the canvas fills the window and resizes when the window changes. */
+  fillMode?: typeof FILLMODE_NONE | typeof FILLMODE_FILL_WINDOW | typeof FILLMODE_KEEP_ASPECT
+  /** Change the resolution of the canvas, and set the way it behaves when the window is resized. */
+  resolutionMode?: typeof RESOLUTION_AUTO | typeof RESOLUTION_FIXED
+  // /** Clamps per-frame delta time to an upper bound. Useful since returning from a tab deactivation can generate huge values for dt, which can adversely affect game state. */
+  maxDeltaTime?: number
+  // /** Scales the global time delta. */
+  timeScale?: number,
+  /** Whether to use the PlayCanvas Physics system. */
+  usePhysics?: boolean,
+  /** Graphics Settings */
+  graphicsDeviceOptions?: GraphicsOptions,
+  /** The children of the application */
+  children?: React.ReactNode,
+}
+
+
+interface ApplicationWithoutCanvasProps extends ApplicationProps {
+  /** A ref to a html canvas element */
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+}
+
+const componentDefinition = createComponentDefinition(
+  "Application",
+  () => getNullApplication(),
+  (app) => app.destroy()
+)
+
+componentDefinition.schema = {
+  ...componentDefinition.schema,
+  canvasRef: {
+    validate: (value: unknown) => {
+      return value !== null && 
+             typeof value === 'object' && 
+             'current' in value;
+    },
+    errorMsg: (value: unknown) => `canvasRef must be a React ref object. Received: ${value}`,
+    default: null
+  },
+  usePhysics: {
+    validate: (value: unknown) => typeof value === 'boolean',
+    errorMsg: (value: unknown) => `usePhysics must be a boolean. Received: ${value}`,
+    default: false
+  },
+  fillMode: {
+    validate: (value: unknown) => typeof value === 'string' && [FILLMODE_NONE, FILLMODE_FILL_WINDOW, FILLMODE_KEEP_ASPECT].includes(value),
+    errorMsg: () => `"fillMode" must be one of: ${FILLMODE_NONE}, ${FILLMODE_FILL_WINDOW}, ${FILLMODE_KEEP_ASPECT}`,
+    default: FILLMODE_NONE
+  },
+  resolutionMode: {
+    validate: (value: unknown) => typeof value === 'string' && [RESOLUTION_AUTO, RESOLUTION_FIXED].includes(value),
+    errorMsg: () => `"resolutionMode" must be one of: ${RESOLUTION_AUTO}, ${RESOLUTION_FIXED}`,
+    default: RESOLUTION_AUTO
+  }
+} as Schema<ApplicationProps>
\ No newline at end of file
diff --git a/packages/lib/src/Container.tsx b/packages/lib/src/Container.tsx
index 5902683a..cf750a21 100644
--- a/packages/lib/src/Container.tsx
+++ b/packages/lib/src/Container.tsx
@@ -44,7 +44,7 @@ export const Container: FC<ContainerProps> = ({ asset, children, ...props }) =>
 
     if(!asset?.resource) return null;
 
-    return <Entity ref={entityRef} {...props}>
+    return <Entity ref={entityRef} {...props} >
         { children }
     </Entity>;
 };
diff --git a/packages/lib/src/Entity.tsx b/packages/lib/src/Entity.tsx
index 2d858cab..4b0373b0 100644
--- a/packages/lib/src/Entity.tsx
+++ b/packages/lib/src/Entity.tsx
@@ -5,39 +5,63 @@ import { ReactNode, forwardRef, useImperativeHandle, useLayoutEffect, useMemo }
 import { useParent, ParentContext, useApp } from './hooks';
 import { SyntheticMouseEvent, SyntheticPointerEvent } from './utils/synthetic-event';
 import { usePointerEventsContext } from './contexts/pointer-events-context';
+import { PublicProps } from './utils/types-utils';
+import { validateAndSanitizeProps, createComponentDefinition, ComponentDefinition, Schema } from './utils/validation';
+
+/**
+ * The Entity component is the fundamental building block of a PlayCanvas scene.
+ * It represents a node in the scene graph and can have components attached to it.
+ *
+ * @example
+ * // Basic usage
+ * <Entity name="myEntity" position={[0, 1, 0]}>
+ *   <Render type="box" />
+ * </Entity>
+ * 
+ * @example
+ * // With pointer events
+ * <Entity 
+ *   position={[0, 1, 0]}
+ *   onPointerDown={(e) => console.log('Clicked!')}
+ *   onClick={(e) => console.log('Mouse clicked!')}
+ * >
+ *   <Render type="sphere" />
+ * </Entity>
+ * 
+ * @param {EntityProps} props - Component props
+ */
+export const Entity = forwardRef<PcEntity, EntityProps> (function Entity(
+  props,
+  ref
+) : React.ReactElement | null {
 
-type PointerEventCallback = (event: SyntheticPointerEvent) => void;
-type MouseEventCallback = (event: SyntheticMouseEvent) => void;
-
-interface EntityProps {
-  name?: string;
-  position?: number[];
-  scale?: number[];
-  rotation?: number[];
-  onPointerUp?: PointerEventCallback;
-  onPointerDown?: PointerEventCallback;
-  onPointerOver?: PointerEventCallback;
-  onPointerOut?: PointerEventCallback;
-  onClick?: MouseEventCallback;
-  children?: ReactNode
-}
-
+  const { children, ...propsToValidate } = props;
+  const safeProps = validateAndSanitizeProps(
+    propsToValidate, 
+    componentDefinition as ComponentDefinition<EntityProps>
+  );
 
-export const Entity = forwardRef<PcEntity, EntityProps> (function Entity(
-  { 
+  const { 
+    /** The name of the entity */
     name = 'Untitled', 
-    children, 
+    /** The local position of the entity */
     position = [0, 0, 0], 
+    /** The local scale of the entity */
     scale = [1, 1, 1], 
+    /** The local rotation of the entity */
     rotation = [0, 0, 0],
+    /** The callback for the pointer down event */
     onPointerDown,
+    /** The callback for the pointer up event */
     onPointerUp,
+    /** The callback for the pointer over event */
     onPointerOver,
+    /** The callback for the pointer out event */
     onPointerOut,
+    /** The callback for the click event */
     onClick,
-  },
-  ref
-) : React.ReactElement | null {
+  } : EntityProps = safeProps;
+
   const parent = useParent();
   const app = useApp();
   const pointerEvents = usePointerEventsContext();
@@ -46,7 +70,7 @@ export const Entity = forwardRef<PcEntity, EntityProps> (function Entity(
   const hasPointerEvents = !!(onPointerDown || onPointerUp || onPointerOver || onPointerOut || onClick);
 
   // Create the entity only when 'app' changes
-  const entity = useMemo(() => new PcEntity(name, app), [app]) as PcEntity
+  const entity = useMemo(() => new PcEntity(undefined, app), [app]) as PcEntity
 
   useImperativeHandle(ref, () => entity);
 
@@ -99,4 +123,55 @@ export const Entity = forwardRef<PcEntity, EntityProps> (function Entity(
       {children || null}
     </ParentContext.Provider>
   </> );
-});
\ No newline at end of file
+});
+
+type PointerEventCallback = (event: SyntheticPointerEvent) => void;
+type MouseEventCallback = (event: SyntheticMouseEvent) => void;
+
+export interface EntityProps extends Partial<PublicProps<PcEntity>> {
+  name?: string;
+  position?: [number, number, number];
+  scale?: [number, number, number];
+  rotation?: [number, number, number, number?];
+  onPointerUp?: PointerEventCallback;
+  onPointerDown?: PointerEventCallback;
+  onPointerOver?: PointerEventCallback;
+  onPointerOut?: PointerEventCallback;
+  onClick?: MouseEventCallback;
+  children?: ReactNode;
+}
+
+const componentDefinition = createComponentDefinition(
+  "Entity",
+  () => new PcEntity(),
+  (entity) => entity.destroy()
+)
+
+componentDefinition.schema = {
+  ...componentDefinition.schema,
+  onPointerDown: {
+    validate: (val: unknown) => typeof val === 'function',
+    errorMsg: (val: unknown) => `Invalid value for prop "onPointerDown": "${val}". Expected a function.`,
+    default: undefined
+  }, 
+  onPointerUp: {
+    validate: (val: unknown) => typeof val === 'function',
+    errorMsg: (val: unknown) => `Invalid value for prop "onPointerUp": "${val}". Expected a function.`,
+    default: undefined
+  },
+  onPointerOver: {
+    validate: (val: unknown) => typeof val === 'function',
+    errorMsg: (val: unknown) => `Invalid value for prop "onPointerOver": "${val}". Expected a function.`,
+    default: undefined
+  },
+  onPointerOut: {
+    validate: (val: unknown) => typeof val === 'function',
+    errorMsg: (val: unknown) => `Invalid value for prop "onPointerOut": "${val}". Expected a function.`,
+    default: undefined
+  },
+  onClick: {
+    validate: (val: unknown) => typeof val === 'function',
+    errorMsg: (val: unknown) => `Invalid value for prop "onClick": "${val}". Expected a function.`,
+    default: undefined
+  }
+} as Schema<EntityProps>
\ No newline at end of file
diff --git a/packages/lib/src/components/Anim.tsx b/packages/lib/src/components/Anim.tsx
index 3eba694e..9ac9450b 100644
--- a/packages/lib/src/components/Anim.tsx
+++ b/packages/lib/src/components/Anim.tsx
@@ -3,19 +3,30 @@
 import { FC, useLayoutEffect } from "react";
 import { useComponent, useParent } from "../hooks";
 import { AnimComponent, Asset, Entity } from "playcanvas";
-
-interface AnimProps {
-    [key: string]: unknown;
-    asset : Asset
-}
+import { PublicProps } from "../utils/types-utils";
+import { WithCssColors } from "../utils/color";
+import { validateAndSanitizeProps, createComponentDefinition, ComponentDefinition, getStaticNullApplication } from "../utils/validation";
 
 /**
- * The Camera component is used to define the position and properties of a camera entity. 
+ * The Anim component allows an entity to play animations.
+ * GLB's and GLTF's often contain animations. When you attach this component to an entity,
+ * it will automatically animate them. You'll also need a Render component to display the entity.
+ * 
+ * @param {AnimProps} props - The props to pass to the animation component.
+ * @see https://api.playcanvas.com/engine/classes/AnimComponent.html
+ * 
+ * @example
+ * <Entity>
+ *   <Render type="asset" asset={asset} />
+ *   <Anim asset={asset} clip="Walk" loop />
+ * </Entity>
  */
 export const Anim: FC<AnimProps> = ({ asset, ...props }) => {
 
+    const safeProps = validateAndSanitizeProps(props as Record<string, unknown>, componentDefinition as ComponentDefinition<AnimProps>);
+
     // Create the anim component
-    useComponent("anim", props);
+    useComponent("anim", safeProps as Partial<AnimComponent>);
 
     // Get the associated Entity
     const entity : Entity = useParent();
@@ -38,4 +49,15 @@ export const Anim: FC<AnimProps> = ({ asset, ...props }) => {
     }, [asset?.id, entity.getGuid()])
 
     return null;
-}
\ No newline at end of file
+}
+
+interface AnimProps extends Partial<WithCssColors<PublicProps<AnimComponent>>> {
+    asset : Asset
+}
+
+
+const componentDefinition = createComponentDefinition(
+    "Anim",
+    () => new Entity("mock-anim", getStaticNullApplication()).addComponent('anim') as AnimComponent,
+    (component) => (component as AnimComponent).system.destroy()
+)
\ No newline at end of file
diff --git a/packages/lib/src/components/Camera.tsx b/packages/lib/src/components/Camera.tsx
index 7f6659d4..96312f9f 100644
--- a/packages/lib/src/components/Camera.tsx
+++ b/packages/lib/src/components/Camera.tsx
@@ -2,22 +2,38 @@
 
 import { FC } from "react";
 import { useComponent } from "../hooks";
-import { Color } from "playcanvas";
-import { useColors } from "../utils/color";
-
-interface CameraProps {
-    [key: string]: unknown;
-    clearColor?: Color | string
-}
+import { CameraComponent, Entity } from "playcanvas";
+import { useColors, WithCssColors } from "../utils/color";
+import { PublicProps } from "../utils/types-utils";
+import { validateAndSanitizeProps, createComponentDefinition, ComponentDefinition, getStaticNullApplication } from "../utils/validation";
 
 /**
- * The Camera component is used to define the position and properties of a camera entity. 
+ * The Camera component makes an entity behave like a camera and gives you a view into the scene.
+ * Moving the container entity will move the camera.
+ * 
+ * @param {CameraProps} props - The props to pass to the camera component.
+ * 
+ * @example
+ * <Entity>
+ *   <Camera fov={75} near={0.1} far={1000} />
+ * </Entity>
  */
 export const Camera: FC<CameraProps> = (props) => {
 
-    const colorProps = useColors(props, ['clearColor'])
+    const safeProps = validateAndSanitizeProps(props as Record<string, unknown>, componentDefinition as ComponentDefinition<CameraProps>);
+
+    const colorProps = useColors(safeProps, ['clearColor'])
 
-    useComponent("camera", { ...props, ...colorProps });
+    useComponent("camera", { ...safeProps, ...colorProps });
     return null;
 
-}
\ No newline at end of file
+}
+
+type CameraProps = Partial<WithCssColors<PublicProps<CameraComponent>>>;
+
+const componentDefinition = createComponentDefinition(
+    "Camera",
+    () => new Entity("mock-camera", getStaticNullApplication()).addComponent('camera') as CameraComponent,
+    (component) => (component as CameraComponent).system.destroy(),
+    "CameraComponent"
+)
\ No newline at end of file
diff --git a/packages/lib/src/components/Collision.tsx b/packages/lib/src/components/Collision.tsx
index 0fd55c8a..c92349f9 100644
--- a/packages/lib/src/components/Collision.tsx
+++ b/packages/lib/src/components/Collision.tsx
@@ -3,31 +3,55 @@
 import { FC, useEffect } from "react";
 import { useComponent, useParent } from "../hooks";
 import { usePhysics } from "../contexts/physics-context";
-import { warnOnce } from "../utils/warn-once";
-
-type CollisionProps = {
-    [key: string]: unknown;
-    type?: string;
-}
+import { validateAndSanitizeProps, warnOnce, createComponentDefinition, ComponentDefinition, getStaticNullApplication } from "../utils/validation";
+import { CollisionComponent, Entity } from "playcanvas";
+import { PublicProps } from "../utils/types-utils";
 
+/**
+ * The Collision component adds a collider to the entity. This enables the entity to collide with other entities.
+ * You can manually define the shape of the collider with the `type` prop, or let the component infer the shape from a `Render` component.
+ * @param {CollisionProps} props - The props to pass to the collision component.
+ * @see https://api.playcanvas.com/engine/classes/CollisionComponent.html
+ * 
+ * @example
+ * <Entity>
+ *  <Collision type="box" />
+ *  <Render /> // will infer the shape from the render component
+ * </Entity>
+ */
 export const Collision: FC<CollisionProps> = (props) => {
+
     const entity = useParent();
     const { isPhysicsEnabled, isPhysicsLoaded, physicsError } = usePhysics();
 
+    const safeProps = validateAndSanitizeProps(props, componentDefinition as ComponentDefinition<CollisionProps>);
+
     useEffect(() => {
         if (!isPhysicsEnabled) {
             warnOnce(
-                'The `<Collision>` component requires `usePhysics` to be set on the Application. ' +
-                'Please add `<Application usePhysics/>` to your root component.',
-                false // Show in both dev and prod
+                'The `<Collision>` component requires physics to be enabled.\n\n' +
+                'To fix this:\n' +
+                '1. Add `usePhysics` prop to your root Application component:\n' +
+                '   <Application usePhysics>\n' +
+                '     <Entity>\n' +
+                '       <Collision type="box" />\n' +
+                '     </Entity>\n' +
+                '   </Application>\n\n' +
+                '2. Make sure you have the required dependencies installed:\n' +
+                '   npm install sync-ammo\n\n' +
+                'For more information, see: https://playcanvas-react.vercel.app/docs/physics'
             );
         }
 
         if (physicsError) {
             warnOnce(
-                `Failed to initialize physics: ${physicsError.message}. ` +
-                "Run `npm install sync-ammo` in your project, if you haven't done so already.",
-                false // Show in both dev and prod
+                `Physics initialization failed: ${physicsError.message}\n\n` +
+                'To fix this:\n' +
+                '1. Install the required dependency:\n' +
+                '   npm install sync-ammo\n\n' +
+                '2. Make sure your bundler is configured to handle WASM files\n\n' +
+                '3. Check that your server is configured to serve .wasm files with the correct MIME type\n\n' +
+                'For more information, see: https://playcanvas-react.vercel.app/docs/physics#troubleshooting'
             );
         }
     }, [isPhysicsEnabled, physicsError]);
@@ -36,7 +60,33 @@ export const Collision: FC<CollisionProps> = (props) => {
     const type = entity.render && props.type === undefined ? entity.render.type : props.type;
 
     // Always call useComponent - it will handle component lifecycle internally
-    useComponent(isPhysicsLoaded ? "collision" : null, { ...props, type });
+    useComponent(isPhysicsLoaded ? "collision" : null, { ...safeProps, type });
 
     return null;
+}
+
+interface CollisionProps extends Partial<PublicProps<CollisionComponent>> {
+    type?: "box"
+        | "capsule"
+        | "compound"
+        | "cone"
+        | "cylinder"
+        | "mesh"
+        | "sphere"
+}
+
+const componentDefinition = createComponentDefinition(
+    "Collision",
+    () => new Entity("mock-collision", getStaticNullApplication()).addComponent('collision') as CollisionComponent,
+    (component) => (component as CollisionComponent).system.destroy(),
+    "CollisionComponent"
+)
+
+componentDefinition.schema = {
+    ...componentDefinition.schema,
+    type: {
+        validate: (value: unknown) => typeof value === 'string' && ['box', 'capsule', 'compound', 'cone', 'cylinder', 'mesh', 'sphere'].includes(value as string),
+        errorMsg: (value: unknown) => `Invalid value for prop "type": ${value}. Expected one of: "box", "capsule", "compound", "cone", "cylinder", "mesh", "sphere".`,
+        default: "box"
+    }
 }
\ No newline at end of file
diff --git a/packages/lib/src/components/GSplat.tsx b/packages/lib/src/components/GSplat.tsx
index 4a9e4f70..9a4c7fd1 100644
--- a/packages/lib/src/components/GSplat.tsx
+++ b/packages/lib/src/components/GSplat.tsx
@@ -2,15 +2,23 @@
 
 import { FC, useLayoutEffect, useRef } from "react";
 import { useParent } from "../hooks";
-import { Asset, Entity } from "playcanvas";
+import { Asset, Entity, GSplatComponent } from "playcanvas";
+import { PublicProps } from "../utils/types-utils";
+import { Schema, validateAndSanitizeProps, createComponentDefinition, ComponentDefinition, getStaticNullApplication } from "../utils/validation";
 
-interface GSplatProps {
-    vertex?: string;
-    fragment?: string;
-    asset: Asset;
-}
+/**
+ * The GSplat component allows an entity to render a Gaussian Splat.
+ * @param {GSplatProps} props - The props to pass to the GSplat component.
+ * @see https://api.playcanvas.com/engine/classes/GSplatComponent.html
+ * @example
+ * const { data: splat } = useSplat('./splat.ply')
+ * <GSplat asset={splat} />
+ */
+export const GSplat: FC<GSplatProps> = (props) => {
+
+    const safeProps = validateAndSanitizeProps(props, componentDefinition as ComponentDefinition<GSplatProps>);
 
-export const GSplat: FC<GSplatProps> = ({ vertex, fragment, asset }) => {
+    const { asset, vertex, fragment } = safeProps;
     const parent: Entity = useParent();
     const assetRef = useRef<Entity | null>(null);
 
@@ -27,4 +35,41 @@ export const GSplat: FC<GSplatProps> = ({ vertex, fragment, asset }) => {
     }, [asset]);
 
     return null;
-};
\ No newline at end of file
+};
+
+interface GSplatProps extends Partial<PublicProps<GSplatComponent>> {
+    /**
+     * The asset to use for the GSplat.
+     */
+    asset: Asset;
+    /**
+     * The vertex shader to use for the GSplat.
+     */
+    vertex?: string;
+    /**
+     * The fragment shader to use for the GSplat.
+     */
+    fragment?: string;
+}
+
+const componentDefinition = createComponentDefinition(
+    "GSplat",
+    () => new Entity("mock-gsplat", getStaticNullApplication()).addComponent('gsplat') as GSplatComponent,
+    (component) => (component as GSplatComponent).system.destroy(),
+    "GSplatComponent"
+)
+
+// include additional props
+componentDefinition.schema = {
+    ...componentDefinition.schema,
+    vertex: {
+        validate: (value: unknown) => typeof value === 'string',
+        errorMsg: (value: unknown) => `Vertex shader must be a string, received ${value}`,
+        default: null // Allows engine to handle the default shader
+    },
+    fragment: {
+        validate: (value: unknown) => typeof value === 'string',
+        errorMsg: (value: unknown) => `Fragment shader must be a string, received ${value}`,
+        default: null // Allows engine to handle the default shader
+    }
+} as Schema<GSplatProps>
\ No newline at end of file
diff --git a/packages/lib/src/components/Light.tsx b/packages/lib/src/components/Light.tsx
index 27de0098..7e2dae64 100644
--- a/packages/lib/src/components/Light.tsx
+++ b/packages/lib/src/components/Light.tsx
@@ -1,16 +1,48 @@
 import { FC } from "react";
 import { useComponent } from "../hooks";
-import { useColors } from "../utils/color";
-
-type LightProps = {
-    type: "directional" | "omni" | "spot";
-}
+import { useColors, WithCssColors } from "../utils/color";
+import { Entity, LightComponent } from "playcanvas";
+import { PublicProps } from "../utils/types-utils";
+import { validateAndSanitizeProps, createComponentDefinition, ComponentDefinition, getStaticNullApplication, Schema } from "../utils/validation";
 
+/**
+ * The Light component adds a light source to the entity. A light can be a directional, omni, or spot light.
+ * Lights can be moved and orientated with the `position` and `rotation` props of its entity.
+ * 
+ * @param {LightProps} props - The props to pass to the light component.
+ * @see https://api.playcanvas.com/engine/classes/LightComponent.html
+ * 
+ * @example
+ * <Entity rotation={[0, 10, 0]}>
+ *  <Light type="directional" />
+ * </Entity>
+ */
 export const Light: FC<LightProps> = (props) => {
 
-    const colorProps = useColors(props, ['color'])
+    const safeProps = validateAndSanitizeProps(props as Partial<LightComponent>, componentDefinition as ComponentDefinition<LightProps>);
+    const colorProps = useColors(safeProps, ['color'])
 
-    useComponent("light", { ...props, ...colorProps });
+    useComponent("light", { ...safeProps, ...colorProps });
     return null
-    
-}
\ No newline at end of file
+
+}
+
+interface LightProps extends Partial<WithCssColors<PublicProps<LightComponent>>> {
+    type: "directional" | "omni" | "spot";
+}
+
+const componentDefinition = createComponentDefinition(
+    "Light",
+    () => new Entity('mock-light', getStaticNullApplication()).addComponent('light') as LightComponent,
+    (component) => (component as LightComponent).system.destroy(),
+    "LightComponent"
+)
+
+componentDefinition.schema = {
+    ...componentDefinition.schema,
+    type: {
+        validate: (value: unknown) => typeof value === 'string' && ['directional', 'omni', 'spot'].includes(value as string),
+        errorMsg: (value: unknown) => `Invalid value for prop "type": ${value}. Expected one of: "directional", "omni", "spot".`,
+        default: "directional"
+    }
+} as Schema<LightProps>
\ No newline at end of file
diff --git a/packages/lib/src/components/Render.tsx b/packages/lib/src/components/Render.tsx
index 94b24913..ff96ac5e 100644
--- a/packages/lib/src/components/Render.tsx
+++ b/packages/lib/src/components/Render.tsx
@@ -3,34 +3,79 @@
 import { FC } from "react";
 import { useComponent } from "../hooks";
 import { Container } from "../Container";
-import { Asset } from "playcanvas";
+import { Asset, Entity, type RenderComponent as PcRenderComponent } from "playcanvas";
+import { PublicProps } from "../utils/types-utils";
+import { ComponentProps } from "../hooks/use-component";
+import { getStaticNullApplication, validateAndSanitizeProps, ComponentDefinition } from "../utils/validation";
+import { createComponentDefinition } from "../utils/validation";
 
-interface RenderProps {
-    type: string;
-    asset?: Asset;
-    children?: React.ReactNode;
-    [key: string]: unknown;
-}
-
-const RenderComponent: FC<RenderProps> = (props) => {
+const RenderComponent: FC<ComponentProps> = (props) => {
     useComponent("render", props);
     return null;
 }
 
 /**
- *  Create a render component on an entity. If the asset is a container, 
- * it will be rendered as a container. Otherwise, it will be rendered as a 
- * render component.
+ * A Render component allows an entity to render a 3D model. You can specify the type of model to render with the `type` prop,
+ * which can be a primitive shape, or a model asset.
+ * 
+ * @param {RenderProps} props - The props to pass to the render component.
+ * @see https://api.playcanvas.com/engine/classes/RenderComponent.html
+ * 
+ * @example
+ * const { data: asset } = useAsset('./statue.glb')
+ * <Entity name='Box'   >
+ *  <Render type="box" />
+ * </Entity>
+ * 
+ * @example
+ * <Entity name='asset'>
+ *  <Render type="asset" asset={asset} />
+ * </Entity>
  */
-export const Render: FC<RenderProps> = (props) => {
+export const Render: FC<RenderProps> = (props : RenderProps) => {
+
+    const safeProps = validateAndSanitizeProps(props, componentDefinition as ComponentDefinition<RenderProps>);
 
     // Render a container if the asset is a container
-    if (props.asset?.type === 'container') {
-        return <Container asset={props.asset as Asset} >
-            { props.children }
+    if (safeProps.asset?.type === 'container') {
+        return <Container asset={safeProps.asset as Asset} >
+            { safeProps.children }
         </Container>
     }
 
     // Otherwise, render the component
-    return <RenderComponent {...props} />;
-}
\ No newline at end of file
+    return <RenderComponent {...safeProps} />;
+}
+
+
+const primitiveTypes = ["asset", "box", "capsule", "cone", "cylinder", "plane", "sphere", "torus"] as const;
+type PrimitiveType = typeof primitiveTypes[number];
+
+interface RenderProps extends Omit<Partial<PublicProps<PcRenderComponent>>, 'asset'> {
+    type: PrimitiveType;
+    asset?: Asset;
+    children?: React.ReactNode;
+}
+
+const componentDefinition = createComponentDefinition(
+    "Render",
+    () => new Entity('mock-render', getStaticNullApplication()).addComponent('render') as PcRenderComponent,
+    (component) => (component as PcRenderComponent).system.destroy(),
+    "RenderComponent"   
+)
+
+componentDefinition.schema = {
+    ...componentDefinition.schema,
+    asset: {
+        validate: (value: unknown) => value instanceof Asset,
+        errorMsg: (value: unknown) => `Invalid value for prop "asset": ${value}. Expected an Asset.`,
+        default: undefined
+    },
+    type: {
+        validate: (value: unknown) => typeof value === 'string' && primitiveTypes.includes(value as PrimitiveType),
+        errorMsg: (value: unknown) => `Invalid value for prop "type": ${value}. Expected one of: "${primitiveTypes.join('", "')}".`,
+        default: "box"
+    }
+}
+
+export default Render;
diff --git a/packages/lib/src/components/RigidBody.tsx b/packages/lib/src/components/RigidBody.tsx
index ab81dba1..97f5c24f 100644
--- a/packages/lib/src/components/RigidBody.tsx
+++ b/packages/lib/src/components/RigidBody.tsx
@@ -1,45 +1,89 @@
 import { FC, useEffect } from "react";
 import { useComponent, useParent } from "../hooks";
 import { usePhysics } from "../contexts/physics-context";
-import { warnOnce } from "../utils/warn-once";
-
-type RigidBodyProps = {
-    [key: string]: unknown;
-    type?: string;
-}
+import { createComponentDefinition, getStaticNullApplication, warnOnce, ComponentDefinition, validateAndSanitizeProps } from "../utils/validation";
+import { PublicProps } from "../utils/types-utils";
+import { Entity, RigidBodyComponent } from "playcanvas";
 
+/**
+ * Adding a RigidBody component to an entity allows it to participate in the physics simulation.
+ * Rigid bodies have mass, and can be moved around by forces. Ensure `usePhysics` is set on the Application
+ * to use this component.
+ * 
+ * @param {RigidBodyProps} props - The props to pass to the rigid body component.   
+ * @see https://api.playcanvas.com/engine/classes/RigidBodyComponent.html
+ * @example
+ * <Entity>
+ *  <RigidBody type="box" />
+ * </Entity>
+ */
 export const RigidBody: FC<RigidBodyProps> = (props) => {
     const entity = useParent();
     const { isPhysicsEnabled, isPhysicsLoaded, physicsError } = usePhysics();
 
+    const safeProps = validateAndSanitizeProps(props, componentDefinition as ComponentDefinition<RigidBodyProps>);
+
     useEffect(() => {
         if (!isPhysicsEnabled) {
             warnOnce(
-                'The `<RigidBody>` component requires `usePhysics` to be set on the Application. ' +
-                'Please add `<Application usePhysics/>` to your root component.',
-                false // Show in both dev and prod
+                'The `<RigidBody>` component requires physics to be enabled.\n\n' +
+                'To fix this:\n' +
+                '1. Add `usePhysics` prop to your root Application component:\n' +
+                '   <Application usePhysics>\n' +
+                '     <Entity>\n' +
+                '       <RigidBody type="box" mass={1} />\n' +
+                '     </Entity>\n' +
+                '   </Application>\n\n' +
+                '2. Make sure you have the required dependencies installed:\n' +
+                '   npm install sync-ammo\n\n' +
+                'For more information, see: https://playcanvas-react.vercel.app/docs/physics'
             );
         }
 
         if (physicsError) {
             warnOnce(
-                `Failed to initialize physics: ${physicsError.message}. ` +
-                "Run `npm install sync-ammo` in your project, if you haven't done so already.",
-                false // Show in both dev and prod
+                `Physics initialization failed: ${physicsError.message}\n\n` +
+                'To fix this:\n' +
+                '1. Install the required dependency:\n' +
+                '   npm install sync-ammo\n\n' +
+                '2. Make sure your bundler is configured to handle WASM files\n\n' +
+                '3. Check that your server is configured to serve .wasm files with the correct MIME type\n\n' +
+                'For more information, see: https://playcanvas-react.vercel.app/docs/physics#troubleshooting'
             );
         }
     }, [isPhysicsEnabled, physicsError]);
 
-    // @ts-expect-error Ammo is defined in the global scope in the browser
-    if(isPhysicsLoaded && !globalThis.Ammo ) {
-        throw new Error('The `<RigidBody>` component requires `usePhysics` to be set on the Application. `<Application usePhysics/>` ')
-    }
-
     // If no type is defined, infer if possible from a render component
     const type = entity.render && props.type === undefined ? entity.render.type : props.type;
 
     // Always call useComponent - it will handle component lifecycle internally
-    useComponent(isPhysicsLoaded ? "rigidbody" : null, { ...props, type });
+    useComponent(isPhysicsLoaded ? "rigidbody" : null, { ...safeProps, type });
 
     return null;
+}
+
+interface RigidBodyProps extends Partial<PublicProps<RigidBodyComponent>> {
+    type?: "box"
+        | "capsule"
+        | "compound"
+        | "cone"
+        | "cylinder"
+        | "mesh"
+        | "sphere"
+}
+
+const componentDefinition = createComponentDefinition(
+    "RigidBody",
+    () => new Entity("mock-rigidbody", getStaticNullApplication()).addComponent('rigidbody') as RigidBodyComponent,
+    (component) => (component as RigidBodyComponent).system.destroy(),
+    "RigidBodyComponent"
+)
+
+componentDefinition.schema = {
+    ...componentDefinition.schema,
+    type: {
+        validate: (value: unknown) => typeof value === 'string' && ['box', 'capsule', 'compound', 'cone', 'cylinder', 'mesh', 'sphere'].includes(value as string),
+        errorMsg: (value: unknown) => `Invalid value for prop "type": ${value}. Expected one of: "box", "capsule", "compound", "cone", "cylinder", "mesh", "sphere".`,
+        default: "box"
+    }
 }
\ No newline at end of file
diff --git a/packages/lib/src/components/Script.tsx b/packages/lib/src/components/Script.tsx
index f29f7716..83a20f23 100644
--- a/packages/lib/src/components/Script.tsx
+++ b/packages/lib/src/components/Script.tsx
@@ -2,29 +2,57 @@ import { AppBase, Entity, Script as PcScript } from "playcanvas";
 import { useScript } from "../hooks"
 import { FC, memo, useMemo } from "react";
 import { shallowEquals } from "../utils/shallow-equals";
+import { ComponentDefinition, validateAndSanitizeProps } from "../utils/validation";
 
-// type PcScriptWithoutPrivateName = Omit<typeof PcScript, '__name'> & {
-//     __name: string;
-// };
-// type PcScriptWithoutPrivateName = {
-//     new (args: { app: AppBase; entity: Entity; }): PcScript
-//     __name: string;
-// };
+/**
+ * The Script component allows you to hook into the entity's lifecycle. This allows you to
+ * run code  during the frame update loop, or when the entity is created or destroyed.
+ * Use this for high-performance code that needs to run on every frame.
+ * 
+ * @param {ScriptProps} props - The props to pass to the script component.
+ * @see https://api.playcanvas.com/engine/classes/Script.html
+ * @example
+ * // A Rotator script that rotates the entity around the Y axis
+ * class Rotator extends Script {
+ *  update(dt: number) {
+ *    this.entity.rotate(0, 1, 0, dt);
+ *  }
+ * }
+ * <Script script={Rotator} />
+ */
+const ScriptComponent: FC<ScriptProps> = (props) => {
 
-interface ScriptProps {
-    script: new (args: { app: AppBase; entity: Entity; }) => PcScript;
-    [key: string]: unknown;
-}
+    const validatedProps = validateAndSanitizeProps(props, componentDefinition, false);
+
+    const { script, ...restProps } = validatedProps;
 
-const ScriptComponent: FC<ScriptProps> = ({ script, ...props }) => {
     // Memoize props so that the same object reference is passed if props haven't changed
-    const memoizedProps = useMemo(() => props, [props]);
+    const memoizedProps = useMemo(() => restProps, [restProps]);
 
-    useScript(script, memoizedProps);
+    useScript(script as new (args: { app: AppBase; entity: Entity; }) => PcScript, memoizedProps);
     return null;
 };
 
 // Memoize the component to prevent re-rendering if `script` or `props` are the same
 export const Script = memo(ScriptComponent, (prevProps, nextProps) => {
     return prevProps.script === nextProps.script && shallowEquals(prevProps, nextProps)
-});
\ No newline at end of file
+});
+
+interface ScriptProps {
+    script: new (args: { app: AppBase; entity: Entity; }) => PcScript;
+    [key: string]: unknown;
+}
+
+class NullScript extends PcScript {}
+
+const componentDefinition = {
+    name: "Script",
+    apiName: "ScriptComponent",
+    schema : {
+        script: {
+            validate: (value: unknown): boolean => Boolean(value && value instanceof Function && value.prototype instanceof PcScript),
+            errorMsg: (value: unknown) => `Invalid value for prop "script": "${value}". Expected a subclass of Script.`,
+            default: NullScript
+        }
+    }
+} as ComponentDefinition<ScriptProps>
\ No newline at end of file
diff --git a/packages/lib/src/components/Sprite.tsx b/packages/lib/src/components/Sprite.tsx
index 1404200d..66027076 100644
--- a/packages/lib/src/components/Sprite.tsx
+++ b/packages/lib/src/components/Sprite.tsx
@@ -1,13 +1,44 @@
 import { FC } from "react";
 import { useComponent } from "../hooks";
+import { PublicProps } from "../utils/types-utils";
+import { Asset, Entity, SpriteComponent } from "playcanvas";
+import { createComponentDefinition, validateAndSanitizeProps, Schema, ComponentDefinition, getStaticNullApplication } from "../utils/validation";
+import { ComponentProps } from "../hooks/use-component";
 
-interface SpriteProps {
-    [key: string]: unknown;
-}
-
+/**
+ * The Sprite component allows an entity to render a 2D sprite.
+ * 
+ * @param {SpriteProps} props - The props to pass to the sprite component.
+ * @see https://api.playcanvas.com/engine/classes/SpriteComponent.html
+ * @example
+ * <Entity>
+ *  <Sprite asset={asset} />
+ * </Entity>
+ */
 export const Sprite: FC<SpriteProps> = (props) => {
 
-    useComponent("sprite", props);
+    const safeProps = validateAndSanitizeProps(props, componentDefinition as ComponentDefinition<SpriteProps>);
+
+    useComponent("sprite", safeProps as unknown as ComponentProps);
     return null;
+}
+
+interface SpriteProps extends Partial<PublicProps<SpriteComponent>> {
+    asset : Asset
+}
+
+const componentDefinition = createComponentDefinition(
+    "Sprite",
+    () => new Entity("mock-sprite", getStaticNullApplication()).addComponent('sprite') as SpriteComponent,
+    (component) => (component as SpriteComponent).system.destroy(),
+    "SpriteComponent"
+)
 
-}
\ No newline at end of file
+componentDefinition.schema = {
+    ...componentDefinition.schema,
+    asset: {
+        validate: (value: unknown) => value instanceof Asset,
+        errorMsg: (value: unknown) => `Invalid value for prop "asset": "${value}". Expected an Asset.`,
+        default: null
+    }
+} as Schema<SpriteProps>
\ No newline at end of file
diff --git a/packages/lib/src/hooks/use-app.tsx b/packages/lib/src/hooks/use-app.tsx
index cb3824a3..ddb11e74 100644
--- a/packages/lib/src/hooks/use-app.tsx
+++ b/packages/lib/src/hooks/use-app.tsx
@@ -2,12 +2,18 @@ import { Application } from "playcanvas";
 import { useContext, createContext } from "react";
 export const AppContext = createContext<Application | null >(null);
 
+
+/**
+ * This hook is used to get the application instance.
+ * @returns {Application} app - The application instance.
+ * 
+ * @example
+ * const app = useApp();
+ */
 export const useApp = () : Application => {
     const appContext = useContext(AppContext);
     if (!appContext) {
         throw new Error("`useApp` must be used within an Application component");
     }
     return appContext;
-};
-
-
+};
\ No newline at end of file
diff --git a/packages/lib/src/hooks/use-component.tsx b/packages/lib/src/hooks/use-component.tsx
index 02ac30fa..5d686227 100644
--- a/packages/lib/src/hooks/use-component.tsx
+++ b/packages/lib/src/hooks/use-component.tsx
@@ -3,9 +3,7 @@ import { useParent } from "./use-parent";
 import { useApp } from "./use-app";
 import { Application, Component, Entity } from "playcanvas";
 
-type ComponentProps = {
-  [key: string]: unknown;
-}
+export type ComponentProps = Record<string, unknown>;
 
 export const useComponent = (ctype: string | null, props: ComponentProps): void => {
   const componentRef = useRef<Component | null>();
diff --git a/packages/lib/src/hooks/use-material.tsx b/packages/lib/src/hooks/use-material.tsx
index dbf850bb..bfa1596a 100644
--- a/packages/lib/src/hooks/use-material.tsx
+++ b/packages/lib/src/hooks/use-material.tsx
@@ -1,27 +1,33 @@
 import { useLayoutEffect, useMemo } from 'react';
 import { StandardMaterial } from 'playcanvas';
 import { useApp } from './use-app';
-import { useColors } from '../utils/color';
-
-type WritableKeys<T> = {
-  [K in keyof T]: T[K] extends { readonly [key: string]: unknown } ? never : K;
-}[keyof T];
-
-type MaterialProps = Pick<StandardMaterial, WritableKeys<StandardMaterial>>;
+import { getColorPropertyNames, useColors, WithCssColors } from '../utils/color';
+import { PublicProps } from '../utils/types-utils';
+import { validateAndSanitizeProps, createComponentDefinition, ComponentDefinition } from '../utils/validation';
 
+/**
+ * This hook is used to create a material instance and update its properties when the props change.
+ * @param {MaterialProps} props - The props to pass to the material.
+ * @returns {StandardMaterial} material - The material instance.
+ * @see https://api.playcanvas.com/engine/classes/StandardMaterial.html
+ * 
+ * @example
+ * const material = useMaterial({
+ *   diffuse: 'red',
+ *   opacity: 0.5,
+ * });
+ * 
+ * // use the material
+ * <Render type="box" material={material} />
+ */
 export const useMaterial = (props: MaterialProps): StandardMaterial => {
   const app = useApp();
 
-  const colorProps = useColors(props, [
-    'ambient', 
-    'attenuation', 
-    'diffuse', 
-    'emissive', 
-    'sheen', 
-    'specular'
-  ]);
+  const safeProps = validateAndSanitizeProps(props, componentDefinition as ComponentDefinition<MaterialProps>);
 
-  const propsWithColors = { ...props, ...colorProps };
+  // Get color props with proper type checking
+  const colorProps = useColors(props, colors as Array<keyof typeof props & string>);
+  const propsWithColors = { ...safeProps, ...colorProps };
 
   // Create the material instance only once when 'app' changes
   const material : StandardMaterial = useMemo(() => new StandardMaterial(), [app]);
@@ -34,10 +40,11 @@ export const useMaterial = (props: MaterialProps): StandardMaterial => {
       const filteredProps = Object.fromEntries(
         Object.entries(propsWithColors).filter(([key]) => key in material)
       );
+
       Object.assign(material, filteredProps)
       material.update(); 
     }
-  }, [app, material, props]);
+  }, [app, material, propsWithColors]);
 
   // Clean up the material when the component unmounts
   useLayoutEffect(() => {
@@ -49,4 +56,20 @@ export const useMaterial = (props: MaterialProps): StandardMaterial => {
   }, [material]);
 
   return material;
-};
\ No newline at end of file
+};
+
+
+type MaterialProps = Partial<WithCssColors<PublicProps<StandardMaterial>>>;
+
+// dynamically build a list of property names that are colors
+const tmpMaterial: StandardMaterial = new StandardMaterial();
+const colors = getColorPropertyNames(tmpMaterial);
+tmpMaterial.destroy();
+
+// create a schema for the material props
+const componentDefinition = createComponentDefinition(
+    "Material",
+    () => new StandardMaterial(),
+    (material) => material.destroy(),
+    "StandardMaterial"
+)
\ No newline at end of file
diff --git a/packages/lib/src/hooks/use-parent.tsx b/packages/lib/src/hooks/use-parent.tsx
index 3b78cc97..55717a8b 100644
--- a/packages/lib/src/hooks/use-parent.tsx
+++ b/packages/lib/src/hooks/use-parent.tsx
@@ -2,6 +2,13 @@ import { Entity } from "playcanvas";
 import { useContext, createContext } from "react";
 export const ParentContext = createContext<Entity | undefined>(undefined);
 
+/**
+ * This hook is returns parent entity.
+ * @returns {Entity} parent - The parent entity.
+ * 
+ * @example
+ * const parent = useParent();
+ */
 export const useParent = (): Entity => {
     const context = useContext(ParentContext);
     if (context === undefined) {
diff --git a/packages/lib/src/hooks/use-script.tsx b/packages/lib/src/hooks/use-script.tsx
index fe771e9d..b6dcf759 100644
--- a/packages/lib/src/hooks/use-script.tsx
+++ b/packages/lib/src/hooks/use-script.tsx
@@ -3,25 +3,18 @@ import { useParent } from './use-parent';
 import { useApp } from './use-app';
 import { AppBase, Application, Entity, Script, ScriptComponent } from 'playcanvas';
 
-const toLowerCamelCase = (str: string) : string => str[0].toLowerCase() + str.substring(1);
-
-interface Props {
-  [key: string]: unknown;
-}
-
-// type PcScriptWithName = Omit<typeof Script, '__name'> & {
-//   __name: string;
-// } & { 
-//   __name: string, 
-//   name: string
-// };
-// type PcScriptWithName = {
-//   new (args: { app: AppBase; entity: Entity; }): Script
-//   __name: string;
-// }
-
-
+/**
+ * This hook is used to create a script component on an entity. 
+ * @param scriptConstructor - The constructor for the script.
+ * @param props - The props for the script.
+ * 
+ * @example
+ * const script = useScript(MyScript, {
+ *   myProperty: 'value',
+ * });
+ */
 export const useScript = (scriptConstructor: new (args: { app: AppBase; entity: Entity; }) => Script, props: Props) : void  => {
+  
   const parent: Entity = useParent();
   const app: Application = useApp();
   const scriptName: string = toLowerCamelCase(scriptConstructor.name);
@@ -76,4 +69,10 @@ export const useScript = (scriptConstructor: new (args: { app: AppBase; entity:
     Object.assign(script, filteredProps)
 
   }, [props]);
-};
\ No newline at end of file
+};
+
+const toLowerCamelCase = (str: string) : string => str[0].toLowerCase() + str.substring(1);
+
+interface Props {
+  [key: string]: unknown;
+}
\ No newline at end of file
diff --git a/packages/lib/src/utils/color.ts b/packages/lib/src/utils/color.ts
index 1ed7f8bd..afa4dc09 100644
--- a/packages/lib/src/utils/color.ts
+++ b/packages/lib/src/utils/color.ts
@@ -1,156 +1,181 @@
 import { Color } from "playcanvas"
 import { useRef } from "react";
+import { getPseudoPublicProps, validateAndSanitize } from "./validation";
 
-const cssColorNamesMap : Map<string, string> = new Map([ 
-    ['aliceblue', '#F0F8FF'],
-    ['antiquewhite', '#FAEBD7'],
-    ['aqua', '#00FFFF'],
-    ['aquamarine', '#7FFFD4'],
-    ['azure', '#F0FFFF'],
-    ['beige', '#F5F5DC'],
-    ['bisque', '#FFE4C4'],
-    ['black', '#000000'],
-    ['blanchedalmond', '#FFEBCD'],
-    ['blue', '#0000FF'],
-    ['blueviolet', '#8A2BE2'],
-    ['brown', '#A52A2A'],
-    ['burlywood', '#DEB887'],
-    ['cadetblue', '#5F9EA0'],
-    ['chartreuse', '#7FFF00'],
-    ['chocolate', '#D2691E'],
-    ['coral', '#FF7F50'],
-    ['cornflowerblue', '#6495ED'],
-    ['cornsilk', '#FFF8DC'],
-    ['crimson', '#DC143C'],
-    ['cyan', '#00FFFF'],
-    ['darkblue', '#00008B'],
-    ['darkcyan', '#008B8B'],
-    ['darkgoldenrod', '#B8860B'],
-    ['darkgray', '#A9A9A9'],
-    ['darkgreen', '#006400'],
-    ['darkgrey', '#A9A9A9'],
-    ['darkkhaki', '#BDB76B'],
-    ['darkmagenta', '#8B008B'],
-    ['darkolivegreen', '#556B2F'],
-    ['darkorange', '#FF8C00'],
-    ['darkorchid', '#9932CC'],
-    ['darkred', '#8B0000'],
-    ['darksalmon', '#E9967A'],
-    ['darkseagreen', '#8FBC8F'],
-    ['darkslateblue', '#483D8B'],
-    ['darkslategray', '#2F4F4F'],
-    ['darkslategrey', '#2F4F4F'],
-    ['darkturquoise', '#00CED1'],
-    ['darkviolet', '#9400D3'],
-    ['deeppink', '#FF1493'],
-    ['deepskyblue', '#00BFFF'],
-    ['dimgray', '#696969'],
-    ['dimgrey', '#696969'],
-    ['dodgerblue', '#1E90FF'],
-    ['firebrick', '#B22222'],
-    ['floralwhite', '#FFFAF0'],
-    ['forestgreen', '#228B22'],
-    ['fuchsia', '#FF00FF'],
-    ['gainsboro', '#DCDCDC'],
-    ['ghostwhite', '#F8F8FF'],
-    ['gold', '#FFD700'],
-    ['goldenrod', '#DAA520'],
-    ['gray', '#808080'],
-    ['green', '#008000'],
-    ['greenyellow', '#ADFF2F'],
-    ['grey', '#808080'],
-    ['honeydew', '#F0FFF0'],
-    ['hotpink', '#FF69B4'],
-    ['indianred', '#CD5C5C'],
-    ['indigo', '#4B0082'],
-    ['ivory', '#FFFFF0'],
-    ['khaki', '#F0E68C'],
-    ['lavender', '#E6E6FA'],
-    ['lavenderblush', '#FFF0F5'],
-    ['lawngreen', '#7CFC00'],
-    ['lemonchiffon', '#FFFACD'],
-    ['lightblue', '#ADD8E6'],
-    ['lightcoral', '#F08080'],
-    ['lightcyan', '#E0FFFF'],
-    ['lightgoldenrodyellow', '#FAFAD2'],
-    ['lightgray', '#D3D3D3'],
-    ['lightgreen', '#90EE90'],
-    ['lightgrey', '#D3D3D3'],
-    ['lightpink', '#FFB6C1'],
-    ['lightsalmon', '#FFA07A'],
-    ['lightseagreen', '#20B2AA'],
-    ['lightskyblue', '#87CEFA'],
-    ['lightslategray', '#778899'],
-    ['lightslategrey', '#778899'],
-    ['lightsteelblue', '#B0C4DE'],
-    ['lightyellow', '#FFFFE0'],
-    ['lime', '#00FF00'],
-    ['limegreen', '#32CD32'],
-    ['linen', '#FAF0E6'],
-    ['magenta', '#FF00FF'],
-    ['maroon', '#800000'],
-    ['mediumaquamarine', '#66CDAA'],
-    ['mediumblue', '#0000CD'],
-    ['mediumorchid', '#BA55D3'],
-    ['mediumpurple', '#9370DB'],
-    ['mediumseagreen', '#3CB371'],
-    ['mediumslateblue', '#7B68EE'],
-    ['mediumspringgreen', '#00FA9A'],
-    ['mediumturquoise', '#48D1CC'],
-    ['mediumvioletred', '#C71585'],
-    ['midnightblue', '#191970'],
-    ['mintcream', '#F5FFFA'],
-    ['mistyrose', '#FFE4E1'],
-    ['moccasin', '#FFE4B5'],
-    ['navajowhite', '#FFDEAD'],
-    ['navy', '#000080'],
-    ['oldlace', '#FDF5E6'],
-    ['olive', '#808000'],
-    ['olivedrab', '#6B8E23'],
-    ['orange', '#FFA500'],
-    ['orangered', '#FF4500'],
-    ['orchid', '#DA70D6'],
-    ['palegoldenrod', '#EEE8AA'],
-    ['palegreen', '#98FB98'],
-    ['paleturquoise', '#AFEEEE'],
-    ['palevioletred', '#DB7093'],
-    ['papayawhip', '#FFEFD5'],
-    ['peachpuff', '#FFDAB9'],
-    ['peru', '#CD853F'],
-    ['pink', '#FFC0CB'],
-    ['plum', '#DDA0DD'],
-    ['powderblue', '#B0E0E6'],
-    ['purple', '#800080'],
-    ['rebeccapurple', '#663399'],
-    ['red', '#FF0000'],
-    ['rosybrown', '#BC8F8F'],
-    ['royalblue', '#4169E1'],
-    ['saddlebrown', '#8B4513'],
-    ['salmon', '#FA8072'],
-    ['sandybrown', '#F4A460'],
-    ['seagreen', '#2E8B57'],
-    ['seashell', '#FFF5EE'],
-    ['sienna', '#A0522D'],
-    ['silver', '#C0C0C0'],
-    ['skyblue', '#87CEEB'],
-    ['slateblue', '#6A5ACD'],
-    ['slategray', '#708090'],
-    ['slategrey', '#708090'],
-    ['snow', '#FFFAFA'],
-    ['springgreen', '#00FF7F'],
-    ['steelblue', '#4682B4'],
-    ['tan', '#D2B48C'],
-    ['teal', '#008080'],
-    ['thistle', '#D8BFD8'],
-    ['tomato', '#FF6347'],
-    ['turquoise', '#40E0D0'],
-    ['violet', '#EE82EE'],
-    ['wheat', '#F5DEB3'],
-    ['white', '#FFFFFF'],
-    ['whitesmoke', '#F5F5F5'],
-    ['yellow', '#FFFF00'],
-    ['yellowgreen', '#9ACD32'] 
-]);
+// Match 3, 4, 6 or 8 character hex strings with optional #
+const hexColorRegex = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+
+// Define as a const object instead of a Map to allow TypeScript to extract keys
+const cssColorNamesMap = { 
+    'aliceblue': '#F0F8FF',
+    'antiquewhite': '#FAEBD7',
+    'aqua': '#00FFFF',
+    'aquamarine': '#7FFFD4',
+    'azure': '#F0FFFF',
+    'beige': '#F5F5DC',
+    'bisque': '#FFE4C4',
+    'black': '#000000',
+    'blanchedalmond': '#FFEBCD',
+    'blue': '#0000FF',
+    'blueviolet': '#8A2BE2',
+    'brown': '#A52A2A',
+    'burlywood': '#DEB887',
+    'cadetblue': '#5F9EA0',
+    'chartreuse': '#7FFF00',
+    'chocolate': '#D2691E',
+    'coral': '#FF7F50',
+    'cornflowerblue': '#6495ED',
+    'cornsilk': '#FFF8DC',
+    'crimson': '#DC143C',
+    'cyan': '#00FFFF',
+    'darkblue': '#00008B',
+    'darkcyan': '#008B8B',
+    'darkgoldenrod': '#B8860B',
+    'darkgray': '#A9A9A9',
+    'darkgreen': '#006400',
+    'darkgrey': '#A9A9A9',
+    'darkkhaki': '#BDB76B',
+    'darkmagenta': '#8B008B',
+    'darkolivegreen': '#556B2F',
+    'darkorange': '#FF8C00',
+    'darkorchid': '#9932CC',
+    'darkred': '#8B0000',
+    'darksalmon': '#E9967A',
+    'darkseagreen': '#8FBC8F',
+    'darkslateblue': '#483D8B',
+    'darkslategray': '#2F4F4F',
+    'darkslategrey': '#2F4F4F',
+    'darkturquoise': '#00CED1',
+    'darkviolet': '#9400D3',
+    'deeppink': '#FF1493',
+    'deepskyblue': '#00BFFF',
+    'dimgray': '#696969',
+    'dimgrey': '#696969',
+    'dodgerblue': '#1E90FF',
+    'firebrick': '#B22222',
+    'floralwhite': '#FFFAF0',
+    'forestgreen': '#228B22',
+    'fuchsia': '#FF00FF',
+    'gainsboro': '#DCDCDC',
+    'ghostwhite': '#F8F8FF',
+    'gold': '#FFD700',
+    'goldenrod': '#DAA520',
+    'gray': '#808080',
+    'green': '#008000',
+    'greenyellow': '#ADFF2F',
+    'grey': '#808080',
+    'honeydew': '#F0FFF0',
+    'hotpink': '#FF69B4',
+    'indianred': '#CD5C5C',
+    'indigo': '#4B0082',
+    'ivory': '#FFFFF0',
+    'khaki': '#F0E68C',
+    'lavender': '#E6E6FA',
+    'lavenderblush': '#FFF0F5',
+    'lawngreen': '#7CFC00',
+    'lemonchiffon': '#FFFACD',
+    'lightblue': '#ADD8E6',
+    'lightcoral': '#F08080',
+    'lightcyan': '#E0FFFF',
+    'lightgoldenrodyellow': '#FAFAD2',
+    'lightgray': '#D3D3D3',
+    'lightgreen': '#90EE90',
+    'lightgrey': '#D3D3D3',
+    'lightpink': '#FFB6C1',
+    'lightsalmon': '#FFA07A',
+    'lightseagreen': '#20B2AA',
+    'lightskyblue': '#87CEFA',
+    'lightslategray': '#778899',
+    'lightslategrey': '#778899',
+    'lightsteelblue': '#B0C4DE',
+    'lightyellow': '#FFFFE0',
+    'lime': '#00FF00',
+    'limegreen': '#32CD32',
+    'linen': '#FAF0E6',
+    'magenta': '#FF00FF',
+    'maroon': '#800000',
+    'mediumaquamarine': '#66CDAA',
+    'mediumblue': '#0000CD',
+    'mediumorchid': '#BA55D3',
+    'mediumpurple': '#9370DB',
+    'mediumseagreen': '#3CB371',
+    'mediumslateblue': '#7B68EE',
+    'mediumspringgreen': '#00FA9A',
+    'mediumturquoise': '#48D1CC',
+    'mediumvioletred': '#C71585',
+    'midnightblue': '#191970',
+    'mintcream': '#F5FFFA',
+    'mistyrose': '#FFE4E1',
+    'moccasin': '#FFE4B5',
+    'navajowhite': '#FFDEAD',
+    'navy': '#000080',
+    'oldlace': '#FDF5E6',
+    'olive': '#808000',
+    'olivedrab': '#6B8E23',
+    'orange': '#FFA500',
+    'orangered': '#FF4500',
+    'orchid': '#DA70D6',
+    'palegoldenrod': '#EEE8AA',
+    'palegreen': '#98FB98',
+    'paleturquoise': '#AFEEEE',
+    'palevioletred': '#DB7093',
+    'papayawhip': '#FFEFD5',
+    'peachpuff': '#FFDAB9',
+    'peru': '#CD853F',
+    'pink': '#FFC0CB',
+    'plum': '#DDA0DD',
+    'powderblue': '#B0E0E6',
+    'purple': '#800080',
+    'rebeccapurple': '#663399',
+    'red': '#FF0000',
+    'rosybrown': '#BC8F8F',
+    'royalblue': '#4169E1',
+    'saddlebrown': '#8B4513',
+    'salmon': '#FA8072',
+    'sandybrown': '#F4A460',
+    'seagreen': '#2E8B57',
+    'seashell': '#FFF5EE',
+    'sienna': '#A0522D',
+    'silver': '#C0C0C0',
+    'skyblue': '#87CEEB',
+    'slateblue': '#6A5ACD',
+    'slategray': '#708090',
+    'slategrey': '#708090',
+    'snow': '#FFFAFA',
+    'springgreen': '#00FF7F',
+    'steelblue': '#4682B4',
+    'tan': '#D2B48C',
+    'teal': '#008080',
+    'thistle': '#D8BFD8',
+    'tomato': '#FF6347',
+    'turquoise': '#40E0D0',
+    'violet': '#EE82EE',
+    'wheat': '#F5DEB3',
+    'white': '#FFFFFF',
+    'whitesmoke': '#F5F5F5',
+    'yellow': '#FFFF00',
+    'yellowgreen': '#9ACD32' 
+} as const;
+
+// Create a Map from the object for runtime use
+const cssColorNames = new Set(Object.keys(cssColorNamesMap));
+
+/**
+ * Convenience function that returns an array of property names that are instances of the PlayCanvas Color class
+ * @returns {string[]} - An array of property names
+ */
+export const getColorPropertyNames = <T extends object>(target: T): Array<keyof T & string> => {
+  const allPublicProps = getPseudoPublicProps(target as Record<string, unknown>);
+  const colorNames: string[] = Object.entries(allPublicProps).reduce((arr: string[], [name, value]) => {
+    if (value instanceof Color ){
+      return [...arr, name]
+    } else{
+      return arr
+    }
+  }, []);
+
+  return colorNames as Array<keyof T & string>;
+};
 
 /**
  * Custom hook to process multiple color properties efficiently.
@@ -158,7 +183,11 @@ const cssColorNamesMap : Map<string, string> = new Map([
  * @param colorPropNames An array of prop names that are colors.
  * @returns An object mapping color prop names to their processed Color instances.
  */
-export const useColors = (props: Record<string, unknown>, colorPropNames: string[]): { [key: string]: Color } => {
+export const useColors = <T extends object>(
+  props: T, 
+  colorPropNames: Array<keyof T & string>
+): { [K in typeof colorPropNames[number]]: Color } => {
+
     const colorRefs = useRef<{ [key: string]: Color }>({});
   
     // Filter colorPropNames to include only those keys that exist in props
@@ -174,21 +203,39 @@ export const useColors = (props: Record<string, unknown>, colorPropNames: string
         colorInstance = new Color();
         colorRefs.current[propName] = colorInstance;
       }
-  
-      if (typeof value === "string") {
-        // Parse the color string and update the existing Color instance
-        const colorString = cssColorNamesMap.get(value) ?? value;
-        colorInstance.fromString(colorString);
-      } else if (value instanceof Color) {
-        // Copy the value into the existing Color instance
-        colorInstance.copy(value);
-      } else {
-        console.warn(`Invalid color value for prop ${propName}:`, value);
-      }
+
+      const validatedColorString = validateAndSanitize(value, {
+        validate: (val: unknown) => typeof val === 'string' && (hexColorRegex.test(val) || cssColorNames.has(val as string)),
+        errorMsg: (val: unknown) => `Invalid color value for prop ${propName}: "${val}". ` +
+          `Valid formats include: hex (#FFFFF, #FFFFFF66), ` +
+          `or a css color name like "red", "blue", "rebeccapurple", etc.`,
+        default: '#ff00ff'
+      }, propName, 'useColors');
+
+      // Convert CSS color name to hex if needed
+      const colorString = cssColorNames.has(validatedColorString as string) 
+        ? cssColorNamesMap[validatedColorString as keyof typeof cssColorNamesMap] 
+        : validatedColorString as string;
+
+      colorInstance.fromString(colorString);
   
       acc[propName] = colorInstance;
       return acc;
     }, {} as { [key: string]: Color });
   
-    return processedColors;
-  };
\ No newline at end of file
+    return processedColors as { [K in typeof colorPropNames[number]]: Color };
+  };
+
+// Extract color names directly from the object
+type CssColorName = keyof typeof cssColorNamesMap;
+
+// Define valid CSS color formats
+type HexColor = `#${string}`;
+
+// Combine all valid CSS color types
+type CssColor = CssColorName | HexColor
+
+// Utility to replace pc.Color with CssColor
+export type WithCssColors<T> = {
+  [K in keyof T]: T[K] extends Color ? CssColor : T[K];
+};
diff --git a/packages/lib/src/utils/types-utils.ts b/packages/lib/src/utils/types-utils.ts
new file mode 100644
index 00000000..aaa468df
--- /dev/null
+++ b/packages/lib/src/utils/types-utils.ts
@@ -0,0 +1,28 @@
+type BuiltInKeys =
+  | 'constructor' | 'prototype' | 'length' | 'name'
+  | 'arguments' | 'caller' | 'apply' | 'bind'
+  | 'toString' | 'valueOf' | 'hasOwnProperty'
+  | 'isPrototypeOf' | 'propertyIsEnumerable' | 'toLocaleString';
+
+type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2) ? A : B;
+
+type ReadonlyKeys<T> = {
+    [P in keyof T]-?: IfEquals<
+      { [Q in P]: T[P] },
+      { -readonly [Q in P]: T[P] },
+      never,
+      P
+    >
+  }[keyof T];
+
+export type PublicProps<T> = {
+  [K in keyof T as
+    K extends `_${string}` ? never :
+    K extends `#${string}` ? never :
+    K extends `c` ? never :
+    T[K] extends (...args: unknown[]) => unknown ? never :
+    K extends BuiltInKeys ? never :
+    K extends ReadonlyKeys<T> ? never :
+    K
+  ]: T[K];
+};
diff --git a/packages/lib/src/utils/validation.ts b/packages/lib/src/utils/validation.ts
new file mode 100644
index 00000000..8b3b6fb2
--- /dev/null
+++ b/packages/lib/src/utils/validation.ts
@@ -0,0 +1,303 @@
+import { Color, Quat, Vec2, Vec3, Vec4, Mat4, Application, NullGraphicsDevice, Material } from "playcanvas";
+
+// Limit the size of the warned set to prevent memory leaks
+const MAX_WARNED_SIZE = 1000;
+const warned = new Set<string>();
+
+export const warnOnce = (message: string) => {
+    if (!warned.has(message)) {
+        if (process.env.NODE_ENV === 'development') {
+            
+            // Use setTimeout to break the call stack
+            setTimeout(() => {
+                // Apply styling to make the warning stand out
+                console.warn(
+                    '%c[PlayCanvas React]:',
+                    'color: #ff9800; font-weight: bold; font-size: 12px;',
+                    message
+                );
+            }, 0);
+        } else {
+            // Error in production for critical issues
+            console.error(
+                `[PlayCanvas React]:\n\n` +
+                `${message}`
+            );
+        }
+        warned.add(message);
+        
+        // Prevent the warned set from growing too large
+        if (warned.size > MAX_WARNED_SIZE) {
+            // Remove oldest entries when the set gets too large
+            const entriesToRemove = Array.from(warned).slice(0, warned.size - MAX_WARNED_SIZE);
+            entriesToRemove.forEach(entry => warned.delete(entry));
+        }
+    }
+};
+
+export type PropValidator<T> = {
+    validate: (value: unknown) => boolean;
+    errorMsg: (value: unknown) => string;
+    default: T | unknown;
+}
+
+// A more generic schema type that works with both functions
+export type Schema<T> = {
+    [K in keyof T]?: PropValidator<T[K]>;
+};
+
+export type ComponentDefinition<T> = {
+    name: string;
+    apiName?: string;
+    schema: Schema<T>;
+};
+
+export function validateAndSanitize<T>(
+    value: unknown, 
+    propDef: PropValidator<T>,
+    propName: string,
+    componentName: string,
+    apiName?: string
+): T {
+    const isValid = value !== undefined && propDef.validate(value);
+    
+    if (!isValid && value !== undefined && process.env.NODE_ENV !== 'production') {
+        warnOnce(
+            `Invalid prop "${propName}" in \`<${componentName} ${propName}={${JSON.stringify(value)}} />\`\n` +
+            `  ${propDef.errorMsg(value)}\n` +
+            (propDef.default !== undefined ? `  Using default: ${JSON.stringify(propDef.default)}` : '') +
+            `\n\nPlease see the documentation https://api.playcanvas.com/engine/classes/${apiName ?? componentName}.html.`
+        );
+    }
+    
+    return isValid ? (value as T) : propDef.default as T;
+}
+
+export function validateAndSanitizeProps<T extends object>(
+    rawProps: Partial<T>, 
+    componentDef: ComponentDefinition<T>,
+    warnUnknownProps: boolean = true
+): T {
+    // Start with a copy of the raw props
+    const { schema, name, apiName } = componentDef;
+    const result = { ...rawProps } as T;
+    
+    // Track unknown props for warning
+    const unknownProps: string[] = [];
+    
+    // Process each prop once
+    Object.keys(rawProps).forEach((key) => {
+        // Skip 'children' as it's a special React prop
+        if (key === 'children') return;
+        
+        // Check if this prop is in the schema
+        if (key in schema) {
+            // Validate and sanitize props that are in the schema
+            const propDef = schema[key as keyof T];
+            if (propDef) {
+                result[key as keyof T] = validateAndSanitize(
+                    rawProps[key as keyof T], 
+                    propDef, 
+                    key, 
+                    name,
+                    apiName
+                );
+            }
+        } else {
+            // Collect unknown props for warning
+            unknownProps.push(key);
+        }
+    });
+    
+    // Warn about unknown props in development mode
+    if (process.env.NODE_ENV !== 'production' && warnUnknownProps && unknownProps.length > 0) {
+        warnOnce(
+            `Unknown props in "<${name}/>."\n` +
+            `The following props are invalid and will be ignored: "${unknownProps.join('", "')}"\n\n` +
+            `Please see the documentation https://api.playcanvas.com/engine/classes/${apiName ?? name}.html.`
+        );
+    }
+    
+    return result;
+}
+
+
+export function getPseudoPublicProps(container: Record<string, unknown>) {
+    // Get regular enumerable properties
+    const entries = Object.entries(container)
+        .filter(([key]) => !key.startsWith('_') && typeof container[key] !== 'function');
+    
+    // Get getters and setters from the prototype
+    const prototype = Object.getPrototypeOf(container);
+    if (prototype && prototype !== Object.prototype) {
+        const descriptors = Object.getOwnPropertyDescriptors(prototype);
+        const getterSetterEntries = Object.entries(descriptors)
+            .filter(([key, descriptor]) => {
+                // Include properties that have setters (and optionally getters) and don't start with _
+                return (descriptor.get && descriptor.set) && 
+                       !key.startsWith('_') && 
+                       key !== 'constructor';
+            })
+            .map(([key, descriptor]) => {
+                // For properties with both getter and setter, try to get the value if possible
+                if (descriptor.get) {
+                    try {
+                        const value = descriptor.get.call(container);
+                        // Create a shallow copy of the value to avoid reference issues
+                        const safeValue = value !== null && typeof value === 'object' 
+                            ? value.clone ? value.clone() : { ...value } 
+                            : value;
+                        return [key, safeValue];
+                    } catch {
+                        // If we can't get the value, just use the key
+                        return [key, undefined];
+                    }
+                }
+                // For setters only, we can't get the value
+                return [key, undefined];
+            });
+        
+        // Combine regular properties with getter/setter properties
+        return Object.fromEntries([...entries, ...getterSetterEntries]);
+    }
+    
+    // If no prototype or it's just Object.prototype, just return the regular properties
+    return Object.fromEntries(entries);
+}
+
+export function createComponentDefinition<T extends object>(
+    name: string,
+    createInstance: () => T,
+    cleanup?: (instance: T) => void,
+    apiName?: string,
+): ComponentDefinition<T> {
+    const instance: T = createInstance();
+    const schema: Schema<T> = {};
+
+    const props = getPseudoPublicProps(instance as Record<string, unknown>);
+
+    const entries = Object.entries(props) as [keyof T, unknown][];
+    // Basic type detection 
+    entries.forEach(([key, value]) => {
+        
+        // Colors
+        if (value instanceof Color) {
+            schema[key as keyof T] = {
+                validate: (val) => val instanceof Color || typeof val === 'string',
+                default: (value as Color).toString(true),
+                errorMsg: (val: unknown) => `Invalid value for prop "${String(key)}": "${val}". ` +
+                    `Expected a hex like "#FF0000" or CSS color name like "red").`
+            };
+        }
+        // Vec2
+        else if (value instanceof Vec2) {
+            schema[key] = {
+                validate: (val) => Array.isArray(val) && val.length === 2,
+                default: [value.x, value.y],
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${JSON.stringify(val)}". ` +
+                    `Expected an array of 2 numbers.`
+            };
+        }
+        // Vec3
+        else if (value instanceof Vec3) {
+            schema[key] = {
+                validate: (val) => Array.isArray(val) && val.length === 3,
+                default: [value.x, value.y, value.z],
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${JSON.stringify(val)}". ` +
+                    `Expected an array of 3 numbers.`
+            };
+        }
+        // Vec4
+        else if (value instanceof Vec4) {
+            schema[key] = {
+                validate: (val) => Array.isArray(val) && val.length === 4,
+                default: [value.x, value.y, value.z, value.w],
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${JSON.stringify(val)}". ` +
+                    `Expected an array of 4 numbers.`
+            };
+        }
+        // Quaternions
+        else if (value instanceof Quat) {
+            schema[key] = {
+                validate: (val) => Array.isArray(val) && val.length === 4,
+                default: [value.x, value.y, value.z, value.w],
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${JSON.stringify(val)}". ` +
+                    `Expected an array of 4 numbers.`
+            };
+        }
+        // Mat4
+        else if (value instanceof Mat4) {
+            schema[key] = {
+                validate: (val) => val instanceof Mat4 || (Array.isArray(val) && val.length === 16),
+                default: (value as Mat4).toString(),
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${JSON.stringify(val)}". ` +
+                    `Expected an array of 16 numbers.`
+            };
+        }
+        // Numbers
+        else if (typeof value === 'number') {
+            schema[key] = {
+                validate: (val) => typeof val === 'number',
+                default: value,
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${val}". Expected a number.`
+            };
+        }
+        // Strings
+        else if (typeof value === 'string') {
+            schema[key] = {
+                validate: (val) => typeof val === 'string',
+                default: value as string,
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${val}". Expected a string.`
+            };
+        }
+        // Booleans
+        else if (typeof value === 'boolean') {
+            schema[key] = {
+                validate: (val) => typeof val === 'boolean',
+                default: value as boolean,
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${val}". Expected a boolean.`
+            };
+        }
+        // Arrays
+        else if (Array.isArray(value)) {
+            schema[key] = {
+                validate: (val) => Array.isArray(val),
+                default: value,
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${JSON.stringify(val)}". Expected an array.`
+            };
+        }
+
+        // Materials
+        else if (value instanceof Material) {
+            schema[key] = {
+                validate: (val) => val instanceof Material,
+                default: null,
+                errorMsg: (val) => `Invalid value for prop "${String(key)}": "${JSON.stringify(val)}". Expected a Material.`
+            };
+        }
+    });
+
+    if (cleanup) cleanup(instance);
+
+    const componentDef: ComponentDefinition<T> = {
+        name,
+        apiName,
+        schema
+    };
+
+    return componentDef;
+}
+
+/**
+ * This is a mock application that is used to render the application without a canvas.
+ * @private
+ * @returns A mock application that is used to render the application without a canvas.
+ */
+export function getNullApplication() {
+    const mockCanvas = { id: 'pc-react-mock-canvas' };
+    // @ts-expect-error - Mock canvas is not a real canvas
+    return new Application(mockCanvas, { graphicsDevice: new NullGraphicsDevice(mockCanvas) });
+}
+
+const localApp = getNullApplication();
+export const getStaticNullApplication = () => localApp;
\ No newline at end of file
diff --git a/packages/lib/src/utils/warn-once.ts b/packages/lib/src/utils/warn-once.ts
deleted file mode 100644
index 3eee5442..00000000
--- a/packages/lib/src/utils/warn-once.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-const warned = new Set<string>();
-
-export const warnOnce = (message: string, developmentOnly = false) => {
-    if (!warned.has(message)) {
-        if (process.env.NODE_ENV === 'development') {
-            console.warn(message);
-        } else if (!developmentOnly) {
-            // In production, use console.error for better visibility
-            console.error(message);
-        }
-        warned.add(message);
-    }
-}; 
\ No newline at end of file