diff --git a/examples/README.md b/examples/README.md
index 4b59380e78c..ea1ee38fd59 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -214,31 +214,35 @@ However, depending on external URLs is maybe not what you want as it breaks your
 
 Legacy non-module scripts should define any loading helper they need inside the example.
 
-### `<exampleName>.controls.mjs`
+### `<exampleName>.controls.jsx`
 
-This file allows you to define a set of PCUI based interface which can be used to display stats from your example or provide users with a way of controlling the example.
+This file defines a PCUI based control panel — a React component used to display stats from your example or to give users a way of controlling it. It is a real `.jsx` file: import the components you need from `@playcanvas/pcui/react` and write JSX. The component must be named `Controls` and its only prop is the [pcui observer](https://playcanvas.github.io/pcui/data-binding/using-observers/).
+
+```jsx
+import { Button } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
 
-```js
 /**
- * @param {import('../../../app/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
-    const { Button } = ReactPCUI;
-    return fragment(
-        jsx(Button, {
-            text: 'Flash',
-            onClick: () => {
-                observer.set('flash', !observer.get('flash'));
-            }
-        })
+export function Controls({ observer }) {
+    return (
+        <Button
+            text='Flash'
+            onClick={() => observer.set('flash', !observer.get('flash'))}
+        />
     );
 }
 ```
 
-The controls function takes a [pcui observer](https://playcanvas.github.io/pcui/data-binding/using-observers/) as its parameter and returns a set of PCUI components. Check this [link](https://playcanvas.github.io/pcui/examples/todo/) for an example of how to create and use PCUI.
+Bind PCUI inputs to the observer with `binding={new BindingTwoWay()}` and `link={{ observer, path: 'some.path' }}`. Check this [link](https://playcanvas.github.io/pcui/examples/todo/) for an example of how to create and use PCUI. React hooks (`useState`, `useEffect`, …) can be imported from `react` if you need local state.
 
-The data observer used in the `controls` function will be made available as an import from `examples/context` to use in the example file:
+The same observer is made available as an import from `examples/context` to use in the example file:
 
 ```js
 import { data } from 'examples/context';
diff --git a/examples/eslint.config.mjs b/examples/eslint.config.mjs
index 2c28eced7fc..8ecba9212a0 100644
--- a/examples/eslint.config.mjs
+++ b/examples/eslint.config.mjs
@@ -298,11 +298,33 @@ const importOrder = ['error', {
     alphabetize: { order: 'asc', caseInsensitive: true }
 }];
 
+// minimal jsx-uses-vars: mark JSX-referenced identifiers as used so no-unused-vars sees imported
+// components (e.g. <Panel/>) as used. Avoids pulling in eslint-plugin-react just for this.
+const jsxUsesVars = {
+    meta: { type: 'problem' },
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                let name = node.name;
+                while (name.type === 'JSXMemberExpression') {
+                    name = name.object;
+                }
+                if (name.type === 'JSXIdentifier') {
+                    context.sourceCode.markVariableAsUsed(name.name, name);
+                }
+            }
+        };
+    }
+};
+
 export default [
     ...playcanvasConfig,
     {
-        files: ['**/*.js', '**/*.mjs'],
+        files: ['**/*.js', '**/*.mjs', '**/*.jsx'],
         languageOptions: {
+            parserOptions: {
+                ecmaFeatures: { jsx: true }
+            },
             globals: {
                 ...globals.browser,
                 ...globals.node,
@@ -315,6 +337,26 @@ export default [
             'import/no-unresolved': 'off'
         }
     },
+    {
+        files: ['**/*.jsx'],
+        plugins: {
+            jsx: {
+                rules: {
+                    'uses-vars': jsxUsesVars
+                }
+            }
+        },
+        rules: {
+            'jsx/uses-vars': 'error',
+            'max-len': ['error', {
+                code: 100,
+                ignoreUrls: true,
+                ignoreStrings: true,
+                ignoreTemplateLiterals: true,
+                ignoreRegExpLiterals: true
+            }]
+        }
+    },
     {
         files: ['src/examples/**/*.example.mjs'],
         plugins: {
diff --git a/examples/iframe/files.mjs b/examples/iframe/files.mjs
index 18441ba644e..229b16b1ec6 100644
--- a/examples/iframe/files.mjs
+++ b/examples/iframe/files.mjs
@@ -1,7 +1,7 @@
 /** @type {Record<string, string>} */
 const files = {
     'example.mjs': '',
-    'controls.mjs': ''
+    'controls.jsx': ''
 };
 
 export default files;
diff --git a/examples/src/app/components/Example.mjs b/examples/src/app/components/Example.mjs
index 2732f0956f9..3b2f09debd6 100644
--- a/examples/src/app/components/Example.mjs
+++ b/examples/src/app/components/Example.mjs
@@ -2,6 +2,7 @@ import * as PCUI from '@playcanvas/pcui';
 import * as ReactPCUI from '@playcanvas/pcui/react';
 import { Panel, Container, Button, Spinner } from '@playcanvas/pcui/react';
 import React, { Component } from 'react';
+import * as ReactJsxRuntime from 'react/jsx-runtime';
 import { useParams } from 'react-router-dom';
 
 import { CodeEditorMobile } from './code-editor/CodeEditorMobile.mjs';
@@ -82,11 +83,31 @@ const diffLeaves = (baseline, current, prefix, out) => {
     }
 };
 
-const PC_IMPORT = /^[ \t]*import[\s\w*{},]+["']playcanvas["'];?[ \t]*(?:\r?\n|$)/gm;
 const CONTROLS_REACT_PCUI = /** @satisfies {typeof ReactPCUI} */ ({
     ...ReactPCUI,
     SelectInput: OverlaySelectInput
 });
+/**
+ * Maps the bare specifiers a controls module imports to the app's own instances, so the compiled
+ * (CommonJS) controls resolve them via require() — shared React/PCUI singletons and the SelectInput
+ * override, without bundling or a global.
+ *
+ * @param {string} spec - The module specifier.
+ * @returns {any} The resolved module.
+ */
+const controlsRequire = (spec) => {
+    switch (spec) {
+        case 'react': return React;
+        case 'react/jsx-runtime': return ReactJsxRuntime;
+        case '@playcanvas/pcui/react': return CONTROLS_REACT_PCUI;
+        case '@playcanvas/pcui': return PCUI;
+        case 'playcanvas': return /** @type {any} */ (window).pc;
+    }
+    throw new Error(`Unknown module: ${spec}`);
+};
+
+/** @type {Promise<any> | undefined} - lazily-loaded @babel/standalone, for transpiling controls JSX in the browser */
+let babelPromise;
 const URL_IN_TEXT_PATTERN = /(https?:\/\/[^\s)]+)/;
 
 /**
@@ -258,26 +279,28 @@ class Example extends TypedComponent {
     }
 
     /**
-     * @param {string} src - The source string.
-     * @returns {Promise<Control>} - The controls jsx object.
+     * @param {string} src - The controls JSX source.
+     * @returns {Promise<Control>} - The controls component.
      */
     async _buildControls(src) {
-        const runtime = src.replace(PC_IMPORT, 'const pc = window.pc;\n');
-        const blob = new Blob([runtime], { type: 'text/javascript' });
-        if (this._controlsUrl) {
-            URL.revokeObjectURL(this._controlsUrl);
-        }
-        this._controlsUrl = URL.createObjectURL(blob);
-        /** @type {Control} */
-        let controls;
+        // transpile the (possibly edited) JSX in the browser to CommonJS, then run it with the
+        // require() shim so it shares the app's React/PCUI/pc instances (and the SelectInput
+        // override). Babel is lazy-loaded so it only costs anything the first time controls build.
+        const mod = { exports: /** @type {any} */ ({}) };
         try {
-            // eslint-disable-next-line jsdoc/no-bad-blocks
-            const module = await import(/* @vite-ignore */ this._controlsUrl);
-            controls = module.controls;
+            // @ts-ignore - @babel/standalone ships no type declarations
+            babelPromise ??= import('@babel/standalone');
+            const babel = await babelPromise;
+            const { code } = (babel.default ?? babel).transform(src, {
+                presets: [['react', { runtime: 'automatic' }]],
+                plugins: ['transform-modules-commonjs']
+            });
+            // eslint-disable-next-line no-new-func
+            new Function('require', 'module', 'exports', code)(controlsRequire, mod, mod.exports);
+            return mod.exports.Controls ?? mod.exports.controls;
         } catch (e) {
-            controls = () => jsx('pre', null, /** @type {any} */ (e).message);
+            return () => jsx('pre', null, /** @type {any} */ (e).message);
         }
-        return controls;
     }
 
     /**
@@ -318,7 +341,7 @@ class Example extends TypedComponent {
     async _handleExampleLoad(event) {
         const path = this.iframePath;
         const { files, observer, description, credits = [] } = event.detail;
-        const controlsSrc = files['controls.mjs'];
+        const controlsSrc = files['controls.jsx'];
         if (!description && !credits.length && this.props.mobilePanel === 'description') {
             this.props.setMobilePanel?.(null);
         }
@@ -393,8 +416,8 @@ class Example extends TypedComponent {
     async _handleUpdateFiles(event) {
         const path = this.iframePath;
         const { files, observer, description, credits = [] } = event.detail;
-        const controlsSrc = files['controls.mjs'] ?? '';
-        if (!files['controls.mjs']) {
+        const controlsSrc = files['controls.jsx'] ?? '';
+        if (!files['controls.jsx']) {
             this.mergeState({
                 exampleLoaded: true,
                 loadedPath: path,
diff --git a/examples/src/app/components/code-editor/CodeEditorDesktop.mjs b/examples/src/app/components/code-editor/CodeEditorDesktop.mjs
index 7007cac267a..73bc7df11d2 100644
--- a/examples/src/app/components/code-editor/CodeEditorDesktop.mjs
+++ b/examples/src/app/components/code-editor/CodeEditorDesktop.mjs
@@ -33,6 +33,8 @@ const FILE_TYPE_LANGUAGES = {
     javascript: 'javascript',
     js: 'javascript',
     mjs: 'javascript',
+    jsx: 'javascript',
+    tsx: 'javascript',
     html: 'html',
     css: 'css',
     shader: 'glsl',
diff --git a/examples/src/app/components/code-editor/CodeEditorMobile.mjs b/examples/src/app/components/code-editor/CodeEditorMobile.mjs
index 44b9cd99814..3edc69da62d 100644
--- a/examples/src/app/components/code-editor/CodeEditorMobile.mjs
+++ b/examples/src/app/components/code-editor/CodeEditorMobile.mjs
@@ -27,13 +27,6 @@ const sourceName = (example, file) => `${example}.${file}`;
  */
 const sourceUrl = (category, example, file) => `${GITHUB_ROOT}/examples/src/examples/${category}/${sourceName(example, file)}`;
 
-/**
- * @param {string} file - File suffix.
- * @param {string} source - File source.
- * @returns {boolean} True if the file is the empty controls template.
- */
-const isDefaultControls = (file, source) => file === 'controls.mjs' && /\breturn\s+fragment\(\s*\)\s*;/.test(source);
-
 class CodeEditorMobile extends CodeEditorBase {
     /**
      * @param {Props} props - Component properties.
@@ -48,7 +41,7 @@ class CodeEditorMobile extends CodeEditorBase {
     render() {
         const { category, example } = this.props;
         const files = this.props.files ?? this.state.files;
-        const names = Object.keys(files).filter(name => !isDefaultControls(name, files[name]));
+        const names = Object.keys(files);
 
         return jsx(
             Container,
diff --git a/examples/src/app/monaco/tokenizer-rules.mjs b/examples/src/app/monaco/tokenizer-rules.mjs
index aaad7b5a9ab..8a299d6bb2e 100644
--- a/examples/src/app/monaco/tokenizer-rules.mjs
+++ b/examples/src/app/monaco/tokenizer-rules.mjs
@@ -1,6 +1,6 @@
 export const jsRules = {
     jsdoc: [
-        [/@\w+/, 'keyword'],
+        [/@\w+(?![\w/])/, 'keyword'],
         [/(\})([^-]+)(?=-)/, ['comment.doc', 'identifier']],
         [/\{/, 'comment.doc', '@jsdocBrackets'],
         [/\*\//, 'comment.doc', '@pop'],
diff --git a/examples/src/examples/animation/blend-trees-1d.controls.jsx b/examples/src/examples/animation/blend-trees-1d.controls.jsx
new file mode 100644
index 00000000000..0c652cf8a84
--- /dev/null
+++ b/examples/src/examples/animation/blend-trees-1d.controls.jsx
@@ -0,0 +1,23 @@
+import { BindingTwoWay, LabelGroup, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const binding = new BindingTwoWay();
+    const link = {
+        observer,
+        path: 'blend'
+    };
+    return (
+        <LabelGroup text='blend'>
+            <SliderInput binding={binding} link={link} />
+        </LabelGroup>
+    );
+}
diff --git a/examples/src/examples/animation/blend-trees-1d.controls.mjs b/examples/src/examples/animation/blend-trees-1d.controls.mjs
deleted file mode 100644
index 4e037f8cda1..00000000000
--- a/examples/src/examples/animation/blend-trees-1d.controls.mjs
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx }) => {
-    const { BindingTwoWay, LabelGroup, SliderInput } = ReactPCUI;
-    class JsxControls extends React.Component {
-        render() {
-            const binding = new BindingTwoWay();
-            const link = {
-                observer,
-                path: 'blend'
-            };
-            return jsx(LabelGroup, { text: 'blend' }, jsx(SliderInput, { binding, link }));
-        }
-    }
-    return jsx(JsxControls);
-};
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.controls.jsx b/examples/src/examples/animation/blend-trees-2d-cartesian.controls.jsx
new file mode 100644
index 00000000000..06b4ad5b976
--- /dev/null
+++ b/examples/src/examples/animation/blend-trees-2d-cartesian.controls.jsx
@@ -0,0 +1,136 @@
+import { useEffect, useRef } from 'react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const refCanvas = useRef(/** @type {HTMLCanvasElement | null} */ (null));
+
+    useEffect(() => {
+        const canvas = refCanvas.current;
+        if (!canvas) {
+            return;
+        }
+
+        const position = new pc.Vec2();
+
+        // width follows the control panel and is read fresh so resizes are tracked
+        const width = () => {
+            const panel = /** @type {HTMLElement | null} */ (
+                canvas.closest('#controlPanel') ?? null
+            );
+            return panel?.offsetWidth ?? canvas.parentElement?.offsetWidth ?? 0;
+        };
+
+        const mouseEvent = (e) => {
+            const w = width();
+            if (!w) {
+                return;
+            }
+            if (e.targetTouches) {
+                const offset = canvas.getBoundingClientRect();
+                position
+                .set(
+                    e.targetTouches[0].clientX - offset.x,
+                    e.targetTouches[0].clientY - offset.y
+                )
+                .mulScalar(1 / (w / 2))
+                .sub(pc.Vec2.ONE);
+            } else if (e.buttons) {
+                position
+                .set(e.offsetX, e.offsetY)
+                .mulScalar(1 / (w / 2))
+                .sub(pc.Vec2.ONE);
+            } else {
+                return;
+            }
+            position.y *= -1.0;
+            observer.set('data.pos', { x: position.x, y: position.y });
+        };
+
+        const drawPosition = () => {
+            const w = width();
+            const h = w;
+            if (!w || !h) {
+                return;
+            }
+            const animPoints = observer.get('data.animPoints') || [];
+            const pos = observer.get('data.pos') || { x: 0, y: 0 };
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return;
+            }
+            const halfWidth = Math.floor(w / 2);
+            const halfHeight = Math.floor(h / 2);
+            ctx.clearRect(0, 0, w, h);
+            ctx.fillStyle = 'rgba(128, 128, 128, 0.5)';
+            ctx.fillRect(0, 0, w, h);
+            ctx.fillStyle = '#B1B8BA';
+            ctx.fillRect(halfWidth, 0, 1, h);
+            ctx.fillRect(0, halfHeight, w, 1);
+            ctx.fillStyle = '#232e30';
+
+            animPoints.forEach((animNode) => {
+                const posX = (animNode.x + 1) * halfWidth;
+                const posY = (animNode.y * -1 + 1) * halfHeight;
+                const size = 8;
+                ctx.fillStyle = '#ffffff80';
+                ctx.beginPath();
+                ctx.arc(posX, posY, halfWidth * 0.5 * animNode.weight, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.fillStyle = '#283538';
+                ctx.beginPath();
+                ctx.moveTo(posX, posY - size / 2);
+                ctx.lineTo(posX - size / 2, posY);
+                ctx.lineTo(posX, posY + size / 2);
+                ctx.lineTo(posX + size / 2, posY);
+                ctx.closePath();
+                ctx.fill();
+            });
+
+            ctx.fillStyle = '#F60';
+            ctx.beginPath();
+            ctx.arc((pos.x + 1) * halfWidth, (pos.y * -1 + 1) * halfHeight, 5, 0, 2 * Math.PI);
+            ctx.fill();
+            ctx.fillStyle = '#283538';
+            ctx.stroke();
+        };
+
+        const w = width();
+        if (!w) {
+            return;
+        }
+
+        canvas.addEventListener('mousemove', mouseEvent);
+        canvas.addEventListener('mousedown', mouseEvent);
+        canvas.addEventListener('touchmove', mouseEvent);
+        canvas.addEventListener('touchstart', mouseEvent);
+
+        const dim = `${w}px`;
+        canvas.setAttribute('style', `width: ${dim}; height: ${dim};`);
+        canvas.width = w;
+        canvas.height = w;
+        drawPosition();
+
+        const evt = observer.on('*:set', drawPosition);
+
+        return () => {
+            canvas.removeEventListener('mousemove', mouseEvent);
+            canvas.removeEventListener('mousedown', mouseEvent);
+            canvas.removeEventListener('touchmove', mouseEvent);
+            canvas.removeEventListener('touchstart', mouseEvent);
+            evt?.unbind();
+        };
+    }, [observer]);
+
+    return <canvas ref={refCanvas} />;
+}
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs b/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs
deleted file mode 100644
index 1ec851524cc..00000000000
--- a/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs
+++ /dev/null
@@ -1,154 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, React, jsx, fragment }) => {
-    const { createRef, Component } = React;
-    class JsxControls extends Component {
-        position = new pc.Vec2();
-
-        /** @type {React.RefObject<HTMLCanvasElement>} */
-        refCanvas = createRef();
-
-        mouse = this.mouseEvent.bind(this);
-
-        draw = this.drawPosition.bind(this);
-
-        evt = null;
-
-        mouseEvent(e) {
-            const { position, width, canvas } = this;
-            if (!canvas || !width) {
-                return;
-            }
-            if (e.targetTouches) {
-                const offset = canvas.getBoundingClientRect();
-                position
-                .set(e.targetTouches[0].clientX - offset.x, e.targetTouches[0].clientY - offset.y)
-                .mulScalar(1 / (width / 2))
-                .sub(pc.Vec2.ONE);
-            } else {
-                if (e.buttons) {
-                    position
-                    .set(e.offsetX, e.offsetY)
-                    .mulScalar(1 / (width / 2))
-                    .sub(pc.Vec2.ONE);
-                } else {
-                    return;
-                }
-            }
-            position.y *= -1.0;
-            observer.set('data.pos', { x: position.x, y: position.y });
-        }
-
-        get canvas() {
-            return this.refCanvas.current;
-        }
-
-        /** @type {number} */
-        get width() {
-            const panel = /** @type {HTMLElement | null} */ (this.canvas?.closest('#controlPanel') ?? null);
-            return panel?.offsetWidth ?? this.canvas?.parentElement?.offsetWidth ?? 0;
-        }
-
-        /** @type {number} */
-        get height() {
-            return this.width;
-        }
-
-        drawPosition() {
-            const { canvas, width, height } = this;
-            if (!canvas || !width || !height) {
-                return;
-            }
-            const animPoints = observer.get('data.animPoints') || [];
-            const pos = observer.get('data.pos') || { x: 0, y: 0 };
-
-            const ctx = canvas.getContext('2d');
-            if (!ctx) {
-                return;
-            }
-            const halfWidth = Math.floor(width / 2);
-            const halfHeight = Math.floor(height / 2);
-            ctx.clearRect(0, 0, width, height);
-            ctx.fillStyle = 'rgba(128, 128, 128, 0.5)';
-            ctx.fillRect(0, 0, width, height);
-            ctx.fillStyle = '#B1B8BA';
-            ctx.fillRect(halfWidth, 0, 1, height);
-            ctx.fillRect(0, halfHeight, width, 1);
-            ctx.fillStyle = '#232e30';
-
-            animPoints.forEach((animNode) => {
-                const posX = (animNode.x + 1) * halfWidth;
-                const posY = (animNode.y * -1 + 1) * halfHeight;
-                const width = 8;
-                const height = 8;
-                ctx.fillStyle = '#ffffff80';
-                ctx.beginPath();
-                ctx.arc(posX, posY, halfWidth * 0.5 * animNode.weight, 0, 2 * Math.PI);
-                ctx.fill();
-                ctx.fillStyle = '#283538';
-                ctx.beginPath();
-                ctx.moveTo(posX, posY - height / 2);
-                ctx.lineTo(posX - width / 2, posY);
-                ctx.lineTo(posX, posY + height / 2);
-                ctx.lineTo(posX + width / 2, posY);
-                ctx.closePath();
-                ctx.fill();
-            });
-
-            ctx.fillStyle = '#F60';
-            ctx.beginPath();
-            ctx.arc(
-                (pos.x + 1) * halfWidth,
-                (pos.y * -1 + 1) * halfHeight,
-                5,
-                0,
-                2 * Math.PI
-            );
-            ctx.fill();
-            ctx.fillStyle = '#283538';
-            ctx.stroke();
-        }
-
-        componentDidMount() {
-            const { canvas, width, height } = this;
-            if (!canvas || !width || !height) {
-                return;
-            }
-
-            canvas.addEventListener('mousemove', this.mouse);
-            canvas.addEventListener('mousedown', this.mouse);
-            canvas.addEventListener('touchmove', this.mouse);
-            canvas.addEventListener('touchstart', this.mouse);
-
-            const dim = `${width}px`;
-            canvas.setAttribute('style', `width: ${dim}; height: ${dim};`);
-            canvas.width = width;
-            canvas.height = height;
-            this.drawPosition();
-
-            this.evt = observer.on('*:set', this.draw);
-        }
-
-        componentWillUnmount() {
-            const { canvas } = this;
-            if (canvas) {
-                canvas.removeEventListener('mousemove', this.mouse);
-                canvas.removeEventListener('mousedown', this.mouse);
-                canvas.removeEventListener('touchmove', this.mouse);
-                canvas.removeEventListener('touchstart', this.mouse);
-            }
-
-            this.evt?.unbind();
-            this.evt = null;
-        }
-
-        render() {
-            return fragment(jsx('canvas', { ref: this.refCanvas }));
-        }
-    }
-    return jsx(JsxControls);
-};
diff --git a/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs b/examples/src/examples/animation/blend-trees-2d-directional.controls.jsx
similarity index 79%
rename from examples/src/examples/animation/blend-trees-2d-directional.controls.mjs
rename to examples/src/examples/animation/blend-trees-2d-directional.controls.jsx
index 59609d1683f..30a2dd7de09 100644
--- a/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs
+++ b/examples/src/examples/animation/blend-trees-2d-directional.controls.jsx
@@ -1,10 +1,16 @@
+import { useEffect, useRef } from 'react';
+
 /**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { MutableRefObject, ReactElement } from 'react'
  */
-export const controls = ({ observer, React, jsx, fragment }) => {
-    const { useEffect, useRef } = React;
-    /** @type {React.MutableRefObject<HTMLCanvasElement>} */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    /** @type {MutableRefObject<HTMLCanvasElement>} */
     const canvasRef = useRef(null);
     useEffect(() => {
         const canvas = canvasRef.current;
@@ -54,19 +60,12 @@ export const controls = ({ observer, React, jsx, fragment }) => {
 
             ctx.fillStyle = '#F60';
             ctx.beginPath();
-            ctx.arc(
-                (pos.x + 1) * halfWidth,
-                (pos.y * -1 + 1) * halfHeight,
-                5,
-                0,
-                2 * Math.PI
-            );
+            ctx.arc((pos.x + 1) * halfWidth, (pos.y * -1 + 1) * halfHeight, 5, 0, 2 * Math.PI);
             ctx.fill();
             ctx.fillStyle = '#283538';
             ctx.stroke();
         };
 
-
         // Initial draw
         drawPosition();
 
@@ -75,8 +74,8 @@ export const controls = ({ observer, React, jsx, fragment }) => {
         const mouseEvent = (e) => {
             if (e.buttons) {
                 const rect = canvas.getBoundingClientRect();
-                const x = ((e.clientX - rect.left) / (width / 2)) - 1;
-                const y = -(((e.clientY - rect.top) / (height / 2)) - 1);
+                const x = (e.clientX - rect.left) / (width / 2) - 1;
+                const y = -((e.clientY - rect.top) / (height / 2) - 1);
                 observer.set('data.pos', { x, y });
             }
         };
@@ -90,5 +89,9 @@ export const controls = ({ observer, React, jsx, fragment }) => {
         };
     }, [observer]);
 
-    return fragment(jsx('canvas', { ref: canvasRef }));
-};
+    return (
+        <>
+            <canvas ref={canvasRef} />
+        </>
+    );
+}
diff --git a/examples/src/examples/animation/component-properties.controls.jsx b/examples/src/examples/animation/component-properties.controls.jsx
new file mode 100644
index 00000000000..3d346aa9578
--- /dev/null
+++ b/examples/src/examples/animation/component-properties.controls.jsx
@@ -0,0 +1,23 @@
+import { Button } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Button
+                text='Flash'
+                onClick={() => {
+                    observer.set('flash', !observer.get('flash'));
+                }}
+            />
+        </>
+    );
+}
diff --git a/examples/src/examples/animation/component-properties.controls.mjs b/examples/src/examples/animation/component-properties.controls.mjs
deleted file mode 100644
index a8d0ce201b0..00000000000
--- a/examples/src/examples/animation/component-properties.controls.mjs
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { Button } = ReactPCUI;
-    return fragment(
-        jsx(Button, {
-            text: 'Flash',
-            onClick: () => {
-                observer.set('flash', !observer.get('flash'));
-            }
-        })
-    );
-};
diff --git a/examples/src/examples/animation/layer-masks.controls.jsx b/examples/src/examples/animation/layer-masks.controls.jsx
new file mode 100644
index 00000000000..a130560653d
--- /dev/null
+++ b/examples/src/examples/animation/layer-masks.controls.jsx
@@ -0,0 +1,98 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    BooleanInput,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Full Body Layer'>
+                <LabelGroup text='active state'>
+                    <SelectInput
+                        options={['Idle', 'Walk'].map(_ => ({ v: _, t: _ }))}
+                        binding={new BindingTwoWay()}
+                        link={{
+                            observer,
+                            path: 'fullBodyLayer.state'
+                        }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Upper Body Layer'>
+                <LabelGroup text='active state'>
+                    <SelectInput
+                        options={['Eager', 'Idle', 'Dance'].map(_ => ({ v: _, t: _ }))}
+                        binding={new BindingTwoWay()}
+                        link={{
+                            observer,
+                            path: 'upperBodyLayer.state'
+                        }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='blend type'>
+                    <SelectInput
+                        options={[
+                            { v: pc.ANIM_LAYER_OVERWRITE, t: 'Overwrite' },
+                            { v: pc.ANIM_LAYER_ADDITIVE, t: 'Additive' }
+                        ]}
+                        value={pc.ANIM_LAYER_ADDITIVE}
+                        binding={new BindingTwoWay()}
+                        link={{
+                            observer,
+                            path: 'upperBodyLayer.blendType'
+                        }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='use mask'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{
+                            observer,
+                            path: 'upperBodyLayer.useMask'
+                        }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Options'>
+                <LabelGroup text='blend'>
+                    <SliderInput
+                        min={0.01}
+                        max={0.99}
+                        binding={new BindingTwoWay()}
+                        link={{
+                            observer,
+                            path: 'options.blend'
+                        }}
+                        value={0.5}
+                    />
+                </LabelGroup>
+                <LabelGroup text='skeleton'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{
+                            observer,
+                            path: 'options.skeleton'
+                        }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/animation/layer-masks.controls.mjs b/examples/src/examples/animation/layer-masks.controls.mjs
deleted file mode 100644
index 1854343988e..00000000000
--- a/examples/src/examples/animation/layer-masks.controls.mjs
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, BooleanInput, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Full Body Layer' },
-            jsx(
-                LabelGroup,
-                { text: 'active state' },
-                jsx(SelectInput, {
-                    options: ['Idle', 'Walk'].map(_ => ({ v: _, t: _ })),
-                    binding: new BindingTwoWay(),
-                    link: {
-                        observer,
-                        path: 'fullBodyLayer.state'
-                    }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Upper Body Layer' },
-            jsx(
-                LabelGroup,
-                { text: 'active state' },
-                jsx(SelectInput, {
-                    options: ['Eager', 'Idle', 'Dance'].map(_ => ({ v: _, t: _ })),
-                    binding: new BindingTwoWay(),
-                    link: {
-                        observer,
-                        path: 'upperBodyLayer.state'
-                    }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'blend type' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: pc.ANIM_LAYER_OVERWRITE, t: 'Overwrite' },
-                        { v: pc.ANIM_LAYER_ADDITIVE, t: 'Additive' }
-                    ],
-                    value: pc.ANIM_LAYER_ADDITIVE,
-                    binding: new BindingTwoWay(),
-                    link: {
-                        observer,
-                        path: 'upperBodyLayer.blendType'
-                    }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'use mask' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: {
-                        observer,
-                        path: 'upperBodyLayer.useMask'
-                    }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Options' },
-            jsx(
-                LabelGroup,
-                { text: 'blend' },
-                jsx(SliderInput, {
-                    min: 0.01,
-                    max: 0.99,
-                    binding: new BindingTwoWay(),
-                    link: {
-                        observer,
-                        path: 'options.blend'
-                    },
-                    value: 0.5
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'skeleton' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: {
-                        observer,
-                        path: 'options.skeleton'
-                    }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/animation/locomotion.controls.jsx b/examples/src/examples/animation/locomotion.controls.jsx
new file mode 100644
index 00000000000..05d30a3c9f1
--- /dev/null
+++ b/examples/src/examples/animation/locomotion.controls.jsx
@@ -0,0 +1,26 @@
+import { BindingTwoWay, LabelGroup, BooleanInput, Button } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const binding = new BindingTwoWay();
+    const link = {
+        observer,
+        path: 'jogToggle'
+    };
+    return (
+        <>
+            <Button text='Jump' onClick={() => observer.emit('jump')} />
+            <LabelGroup text='Run: '>
+                <BooleanInput type='toggle' binding={binding} link={link} />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/animation/locomotion.controls.mjs b/examples/src/examples/animation/locomotion.controls.mjs
deleted file mode 100644
index d09e74c8bcc..00000000000
--- a/examples/src/examples/animation/locomotion.controls.mjs
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, Button } = ReactPCUI;
-    const binding = new BindingTwoWay();
-    const link = {
-        observer,
-        path: 'jogToggle'
-    };
-    return fragment(
-        jsx(Button, {
-            text: 'Jump',
-            onClick: () => observer.emit('jump')
-        }),
-        jsx(
-            LabelGroup,
-            {
-                text: 'Run: '
-            },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding,
-                link
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/camera/fly.controls.jsx b/examples/src/examples/camera/fly.controls.jsx
new file mode 100644
index 00000000000..21f02579874
--- /dev/null
+++ b/examples/src/examples/camera/fly.controls.jsx
@@ -0,0 +1,116 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    VectorInput,
+    TextInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Attributes'>
+                <LabelGroup text='Rotate speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateSpeed' }}
+                        min={0.1}
+                        max={1}
+                        step={0.01}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotate joystick sensitivity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateJoystickSens' }}
+                        min={0}
+                        max={10}
+                        step={0.01}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveSpeed' }}
+                        min={1}
+                        max={10}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move fast speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveFastSpeed' }}
+                        min={1}
+                        max={10}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move slow speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveSlowSpeed' }}
+                        min={1}
+                        max={10}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotate damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Pitch range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.pitchRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Yaw range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.yawRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Gamepad deadzone'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.gamepadDeadZone' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Mobile input layout'>
+                    <TextInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.mobileInputLayout' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/camera/fly.controls.mjs b/examples/src/examples/camera/fly.controls.mjs
deleted file mode 100644
index 756a0fd694f..00000000000
--- a/examples/src/examples/camera/fly.controls.mjs
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, VectorInput, TextInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Attributes' },
-            jsx(
-                LabelGroup,
-                { text: 'Rotate speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateSpeed' },
-                    min: 0.1,
-                    max: 1,
-                    step: 0.01
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotate joystick sensitivity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateJoystickSens' },
-                    min: 0,
-                    max: 10,
-                    step: 0.01,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveSpeed' },
-                    min: 1,
-                    max: 10
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move fast speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveFastSpeed' },
-                    min: 1,
-                    max: 10
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move slow speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveSlowSpeed' },
-                    min: 1,
-                    max: 10
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotate damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Pitch range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.pitchRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Yaw range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.yawRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Gamepad deadzone' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.gamepadDeadZone' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Mobile input layout' },
-                jsx(TextInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.mobileInputLayout' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/camera/multi.controls.jsx b/examples/src/examples/camera/multi.controls.jsx
new file mode 100644
index 00000000000..717707f42d8
--- /dev/null
+++ b/examples/src/examples/camera/multi.controls.jsx
@@ -0,0 +1,195 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    BooleanInput,
+    SliderInput,
+    VectorInput,
+    TextInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Attributes'>
+                <LabelGroup text='Enable orbit'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.enableOrbit' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Enable fly'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.enableFly' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Enable pan'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.enablePan' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotate speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateSpeed' }}
+                        min={0.1}
+                        max={1}
+                        step={0.01}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotate joystick sensitivity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateJoystickSens' }}
+                        min={0}
+                        max={10}
+                        step={0.01}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveSpeed' }}
+                        min={1}
+                        max={100}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move fast speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveFastSpeed' }}
+                        min={1}
+                        max={100}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move slow speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveSlowSpeed' }}
+                        min={1}
+                        max={100}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomSpeed' }}
+                        min={0}
+                        max={10}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom pinch sensitivity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomPinchSens' }}
+                        min={0}
+                        max={10}
+                        step={0.01}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Focus damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.focusDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotate damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Pitch range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.pitchRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Yaw range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.yawRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom scale min'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomScaleMin' }}
+                        min={0}
+                        max={1}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Gamepad deadzone'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.gamepadDeadZone' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Mobile input layout'>
+                    <TextInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.mobileInputLayout' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/camera/multi.controls.mjs b/examples/src/examples/camera/multi.controls.mjs
deleted file mode 100644
index 23a408ac5a0..00000000000
--- a/examples/src/examples/camera/multi.controls.mjs
+++ /dev/null
@@ -1,222 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, BooleanInput, SliderInput, VectorInput, TextInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Attributes' },
-            jsx(
-                LabelGroup,
-                { text: 'Enable orbit' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.enableOrbit' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Enable fly' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.enableFly' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Enable pan' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.enablePan' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotate speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateSpeed' },
-                    min: 0.1,
-                    max: 1,
-                    step: 0.01
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotate joystick sensitivity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateJoystickSens' },
-                    min: 0,
-                    max: 10,
-                    step: 0.01,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveSpeed' },
-                    min: 1,
-                    max: 100
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move fast speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveFastSpeed' },
-                    min: 1,
-                    max: 100
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move slow speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveSlowSpeed' },
-                    min: 1,
-                    max: 100
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomSpeed' },
-                    min: 0,
-                    max: 10,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom pinch sensitivity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomPinchSens' },
-                    min: 0,
-                    max: 10,
-                    step: 0.01,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Focus damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.focusDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotate damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Pitch range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.pitchRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Yaw range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.yawRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom scale min' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomScaleMin' },
-                    min: 0,
-                    max: 1,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Gamepad deadzone' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.gamepadDeadZone' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Mobile input layout' },
-                jsx(TextInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.mobileInputLayout' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/camera/orbit.controls.jsx b/examples/src/examples/camera/orbit.controls.jsx
new file mode 100644
index 00000000000..662f7d2ecda
--- /dev/null
+++ b/examples/src/examples/camera/orbit.controls.jsx
@@ -0,0 +1,127 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput, VectorInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Attributes'>
+                <LabelGroup text='Rotate speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateSpeed' }}
+                        min={0.1}
+                        max={1}
+                        step={0.01}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveSpeed' }}
+                        min={1}
+                        max={10}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomSpeed' }}
+                        min={0}
+                        max={10}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom pinch sensitivity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomPinchSens' }}
+                        min={0}
+                        max={10}
+                        step={0.01}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Focus damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.focusDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotate damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.rotateDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Move damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.moveDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom damping'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomDamping' }}
+                        min={0}
+                        max={0.999}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Pitch range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.pitchRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Yaw range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.yawRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom range'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomRange' }}
+                        dimensions={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Zoom scale min'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'attr.zoomScaleMin' }}
+                        min={0}
+                        max={1}
+                        step={0.001}
+                        precision={3}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/camera/orbit.controls.mjs b/examples/src/examples/camera/orbit.controls.mjs
deleted file mode 100644
index bfe2100e496..00000000000
--- a/examples/src/examples/camera/orbit.controls.mjs
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, VectorInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Attributes' },
-            jsx(
-                LabelGroup,
-                { text: 'Rotate speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateSpeed' },
-                    min: 0.1,
-                    max: 1,
-                    step: 0.01
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveSpeed' },
-                    min: 1,
-                    max: 10
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomSpeed' },
-                    min: 0,
-                    max: 10,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom pinch sensitivity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomPinchSens' },
-                    min: 0,
-                    max: 10,
-                    step: 0.01,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Focus damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.focusDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotate damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.rotateDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Move damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.moveDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom damping' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomDamping' },
-                    min: 0,
-                    max: 0.999,
-                    step: 0.001,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Pitch range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.pitchRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Yaw range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.yawRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom range' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomRange' },
-                    dimensions: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Zoom scale min' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'attr.zoomScaleMin' },
-                    min: 0,
-                    max: 1,
-                    step: 0.001,
-                    precision: 3
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/compute/indirect-dispatch.controls.jsx b/examples/src/examples/compute/indirect-dispatch.controls.jsx
new file mode 100644
index 00000000000..c38252da545
--- /dev/null
+++ b/examples/src/examples/compute/indirect-dispatch.controls.jsx
@@ -0,0 +1,28 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Depth Edge Detection'>
+                <LabelGroup text='Threshold'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.threshold' }}
+                        min={0.1}
+                        max={50}
+                        precision={1}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/compute/indirect-dispatch.controls.mjs b/examples/src/examples/compute/indirect-dispatch.controls.mjs
deleted file mode 100644
index 611eed114bc..00000000000
--- a/examples/src/examples/compute/indirect-dispatch.controls.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Depth Edge Detection' },
-            jsx(
-                LabelGroup,
-                { text: 'Threshold' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.threshold' },
-                    min: 0.1,
-                    max: 50,
-                    precision: 1
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting-xr/vr-lod.controls.jsx b/examples/src/examples/gaussian-splatting-xr/vr-lod.controls.jsx
new file mode 100644
index 00000000000..c98b89ed401
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting-xr/vr-lod.controls.jsx
@@ -0,0 +1,66 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget (M)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={10}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='Resolution'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.resolution' }}
+                        value={observer.get('data.stats.resolution')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting-xr/vr-lod.controls.mjs b/examples/src/examples/gaussian-splatting-xr/vr-lod.controls.mjs
deleted file mode 100644
index 062b01b8709..00000000000
--- a/examples/src/examples/gaussian-splatting-xr/vr-lod.controls.mjs
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget (M)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 10,
-                    precision: 2,
-                    step: 0.05
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.resolution' },
-                    value: observer.get('data.stats.resolution')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/annotations.controls.jsx b/examples/src/examples/gaussian-splatting/annotations.controls.jsx
new file mode 100644
index 00000000000..aba77166d4b
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/annotations.controls.jsx
@@ -0,0 +1,78 @@
+import {
+    BindingTwoWay,
+    ColorPicker,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <Panel headerText='Annotations'>
+                <LabelGroup text='Hotspot Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.hotspotSize' }}
+                        min={10}
+                        max={50}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Hotspot Color'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.hotspotColor' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Hover Color'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.hoverColor' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Opacity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.opacity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Behind Opacity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.behindOpacity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/annotations.controls.mjs b/examples/src/examples/gaussian-splatting/annotations.controls.mjs
deleted file mode 100644
index cfd8c069065..00000000000
--- a/examples/src/examples/gaussian-splatting/annotations.controls.mjs
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, ColorPicker, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Annotations' },
-            jsx(
-                LabelGroup,
-                { text: 'Hotspot Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.hotspotSize' },
-                    min: 10,
-                    max: 50
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Hotspot Color' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.hotspotColor' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Hover Color' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.hoverColor' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Opacity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.opacity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Behind Opacity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.behindOpacity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/crop.controls.jsx b/examples/src/examples/gaussian-splatting/crop.controls.jsx
new file mode 100644
index 00000000000..d23e93cd4ca
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/crop.controls.jsx
@@ -0,0 +1,60 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    BooleanInput,
+    Button,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Precise'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'precise' }}
+                />
+            </LabelGroup>
+            <LabelGroup text='Edge Scale'>
+                <SliderInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'edgeScale' }}
+                    min={0.1}
+                    max={1.0}
+                    precision={2}
+                />
+            </LabelGroup>
+            <Button
+                text='Pause / Play'
+                onClick={() => {
+                    observer.emit('togglePause');
+                }}
+            />
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/crop.controls.mjs b/examples/src/examples/gaussian-splatting/crop.controls.mjs
deleted file mode 100644
index 028b8a2aacb..00000000000
--- a/examples/src/examples/gaussian-splatting/crop.controls.mjs
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, Button, SelectInput, SliderInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Precise' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'precise' }
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Edge Scale' },
-            jsx(SliderInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'edgeScale' },
-                min: 0.1,
-                max: 1.0,
-                precision: 2
-            })
-        ),
-        jsx(Button, {
-            text: 'Pause / Play',
-            onClick: () => {
-                observer.emit('togglePause');
-            }
-        })
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/editor.controls.jsx b/examples/src/examples/gaussian-splatting/editor.controls.jsx
new file mode 100644
index 00000000000..bc7ab9a2ba9
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/editor.controls.jsx
@@ -0,0 +1,54 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    SelectInput,
+    SliderInput,
+    Button,
+    Panel
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Renderer'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Editor Settings'>
+                <Button text='Select' onClick={() => observer.emit('select')} />
+                <LabelGroup text='Box Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'boxSize' }}
+                        min={0.1}
+                        max={5.0}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <Button text='Delete Selected' onClick={() => observer.emit('deleteSelected')} />
+                <Button text='Clone Selected' onClick={() => observer.emit('cloneSelected')} />
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/editor.controls.mjs b/examples/src/examples/gaussian-splatting/editor.controls.mjs
deleted file mode 100644
index 897ae40742a..00000000000
--- a/examples/src/examples/gaussian-splatting/editor.controls.mjs
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput, SliderInput, Button, Panel } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Renderer' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Editor Settings' },
-            jsx(Button, {
-                text: 'Select',
-                onClick: () => observer.emit('select')
-            }),
-            jsx(
-                LabelGroup,
-                { text: 'Box Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'boxSize' },
-                    min: 0.1,
-                    max: 5.0,
-                    precision: 2
-                })
-            ),
-            jsx(Button, {
-                text: 'Delete Selected',
-                onClick: () => observer.emit('deleteSelected')
-            }),
-            jsx(Button, {
-                text: 'Clone Selected',
-                onClick: () => observer.emit('cloneSelected')
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/first-person.controls.jsx b/examples/src/examples/gaussian-splatting/first-person.controls.jsx
new file mode 100644
index 00000000000..c98b89ed401
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/first-person.controls.jsx
@@ -0,0 +1,66 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget (M)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={10}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='Resolution'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.resolution' }}
+                        value={observer.get('data.stats.resolution')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/first-person.controls.mjs b/examples/src/examples/gaussian-splatting/first-person.controls.mjs
deleted file mode 100644
index 13971c01405..00000000000
--- a/examples/src/examples/gaussian-splatting/first-person.controls.mjs
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget (M)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 10,
-                    precision: 2,
-                    step: 0.05
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.resolution' },
-                    value: observer.get('data.stats.resolution')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/flipbook.controls.jsx b/examples/src/examples/gaussian-splatting/flipbook.controls.jsx
new file mode 100644
index 00000000000..e2a6933bc6c
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/flipbook.controls.jsx
@@ -0,0 +1,31 @@
+import { BindingTwoWay, LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/flipbook.controls.mjs b/examples/src/examples/gaussian-splatting/flipbook.controls.mjs
deleted file mode 100644
index 35587a31bda..00000000000
--- a/examples/src/examples/gaussian-splatting/flipbook.controls.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/global-sorting.controls.jsx b/examples/src/examples/gaussian-splatting/global-sorting.controls.jsx
new file mode 100644
index 00000000000..e2a6933bc6c
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/global-sorting.controls.jsx
@@ -0,0 +1,31 @@
+import { BindingTwoWay, LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/global-sorting.controls.mjs b/examples/src/examples/gaussian-splatting/global-sorting.controls.mjs
deleted file mode 100644
index 35587a31bda..00000000000
--- a/examples/src/examples/gaussian-splatting/global-sorting.controls.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/lod-instances.controls.jsx b/examples/src/examples/gaussian-splatting/lod-instances.controls.jsx
new file mode 100644
index 00000000000..9f130828d7e
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/lod-instances.controls.jsx
@@ -0,0 +1,68 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    BooleanInput,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Hue Animation'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'colorize' }}
+                        value={observer.get('colorize')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={10}
+                        precision={1}
+                        step={0.1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/lod-instances.controls.mjs b/examples/src/examples/gaussian-splatting/lod-instances.controls.mjs
deleted file mode 100644
index f70c464231e..00000000000
--- a/examples/src/examples/gaussian-splatting/lod-instances.controls.mjs
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Hue Animation' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'colorize' },
-                    value: observer.get('colorize')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 10,
-                    precision: 1,
-                    step: 0.1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/lod-streaming-sh.controls.jsx b/examples/src/examples/gaussian-splatting/lod-streaming-sh.controls.jsx
new file mode 100644
index 00000000000..98b943eec5e
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/lod-streaming-sh.controls.jsx
@@ -0,0 +1,107 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Debug'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'debug' }}
+                        value={observer.get('debug') ?? 0}
+                        options={[
+                            { v: 0, t: 'None' },
+                            { v: 1, t: 'LOD' },
+                            { v: 2, t: 'SH Update' },
+                            { v: 3, t: 'Heatmap' },
+                            { v: 4, t: 'AABBs' },
+                            { v: 5, t: 'Node AABBs' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Preset'>
+                    <SelectInput
+                        type='string'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodPreset' }}
+                        value={observer.get('lodPreset') || 'desktop'}
+                        options={[
+                            { v: 'desktop-max', t: 'Desktop Max (0-5)' },
+                            { v: 'desktop', t: 'Desktop (0-2)' },
+                            { v: 'mobile-max', t: 'Mobile Max (1-2)' },
+                            { v: 'mobile', t: 'Mobile (2-5)' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Base Dist'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodBaseDistance' }}
+                        min={1}
+                        max={50}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Multiplier'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodMultiplier' }}
+                        min={1.2}
+                        max={10}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={10}
+                        precision={1}
+                        step={0.1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/lod-streaming-sh.controls.mjs b/examples/src/examples/gaussian-splatting/lod-streaming-sh.controls.mjs
deleted file mode 100644
index 5836b79baba..00000000000
--- a/examples/src/examples/gaussian-splatting/lod-streaming-sh.controls.mjs
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Debug' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'debug' },
-                    value: observer.get('debug') ?? 0,
-                    options: [
-                        { v: 0, t: 'None' },
-                        { v: 1, t: 'LOD' },
-                        { v: 2, t: 'SH Update' },
-                        { v: 3, t: 'Heatmap' },
-                        { v: 4, t: 'AABBs' },
-                        { v: 5, t: 'Node AABBs' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Preset' },
-                jsx(SelectInput, {
-                    type: 'string',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodPreset' },
-                    value: observer.get('lodPreset') || 'desktop',
-                    options: [
-                        { v: 'desktop-max', t: 'Desktop Max (0-5)' },
-                        { v: 'desktop', t: 'Desktop (0-2)' },
-                        { v: 'mobile-max', t: 'Mobile Max (1-2)' },
-                        { v: 'mobile', t: 'Mobile (2-5)' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Base Dist' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodBaseDistance' },
-                    min: 1,
-                    max: 50,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Multiplier' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodMultiplier' },
-                    min: 1.2,
-                    max: 10,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 10,
-                    precision: 1,
-                    step: 0.1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/lod-streaming.controls.jsx b/examples/src/examples/gaussian-splatting/lod-streaming.controls.jsx
new file mode 100644
index 00000000000..61c02fe61c2
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/lod-streaming.controls.jsx
@@ -0,0 +1,298 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    BooleanInput,
+    Button,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label,
+    TextInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Scene'>
+                <LabelGroup text='URL'>
+                    <TextInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'url' }}
+                        value={observer.get('url') || ''}
+                        placeholder='Enter gsplat URL...'
+                    />
+                </LabelGroup>
+                <LabelGroup text='Orientation'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'orientation' }}
+                        type='number'
+                        options={[
+                            { v: 0, t: '0°' },
+                            { v: 90, t: '90°' },
+                            { v: 180, t: '180°' },
+                            { v: 270, t: '270°' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Occluder'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'occluder' }}
+                        value={observer.get('occluder') || false}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Environment'>
+                    <SelectInput
+                        type='string'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'environment' }}
+                        value={observer.get('environment') || 'none'}
+                        options={[
+                            { v: 'none', t: 'None' },
+                            { v: 'rosendal', t: 'Rosendal Sunset' },
+                            { v: 'industrial-sunset', t: 'Industrial Sunset' },
+                            { v: 'partly-cloudy', t: 'Partly Cloudy' },
+                            { v: 'moonlit', t: 'Moonlit Sky' },
+                            { v: 'sunflowers', t: 'Sunflowers' },
+                            { v: 'table-mountain', t: 'Table Mountain' },
+                            { v: 'cloud-layers', t: 'Cloud Layers' },
+                            { v: 'night', t: 'Night Sky' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Fog Density'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'fogDensity' }}
+                        min={0}
+                        max={0.5}
+                        precision={3}
+                        step={0.001}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Camera Frame'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'cameraFrame' }}
+                        value={observer.get('cameraFrame') || false}
+                    />
+                </LabelGroup>
+                <LabelGroup text='FOV'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'cameraFov' }}
+                        min={10}
+                        max={360}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Fisheye'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'fisheye' }}
+                        min={0}
+                        max={1}
+                        precision={4}
+                        step={0.0001}
+                    />
+                </LabelGroup>
+                <LabelGroup text='High Res'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'highRes' }}
+                        value={observer.get('highRes') || false}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Tonemapping'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'toneMapping' }}
+                        value={observer.get('toneMapping') ?? 0}
+                        options={[
+                            { v: 0, t: 'Linear' },
+                            { v: 1, t: 'Filmic' },
+                            { v: 2, t: 'Hejl' },
+                            { v: 3, t: 'ACES' },
+                            { v: 4, t: 'ACES2' },
+                            { v: 5, t: 'Neutral' },
+                            { v: 6, t: 'None' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Exposure'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'exposure' }}
+                        min={0}
+                        max={5}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Min Pixel Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'minPixelSize' }}
+                        min={0}
+                        max={5}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Min Contribution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'minContribution' }}
+                        min={0}
+                        max={10}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Alpha Clip'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'alphaClipForward' }}
+                        min={0}
+                        max={1}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Radial'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'radialSorting' }}
+                        value={observer.get('radialSorting') ?? true}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Compact'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'compact' }}
+                        value={observer.get('compact') || false}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Preset'>
+                    <SelectInput
+                        type='string'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodPreset' }}
+                        value={observer.get('lodPreset') || 'desktop'}
+                        options={[
+                            { v: 'desktop-max', t: 'Desktop Max (0-5)' },
+                            { v: 'desktop', t: 'Desktop (1-5)' },
+                            { v: 'mobile-max', t: 'Mobile Max (2-5)' },
+                            { v: 'mobile', t: 'Mobile (3-5)' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Base Dist'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodBaseDistance' }}
+                        min={1}
+                        max={50}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Multiplier'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodMultiplier' }}
+                        min={1.2}
+                        max={5}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={40}
+                        precision={1}
+                        step={0.1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Debug'>
+                <LabelGroup text='Debug Render'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'debug' }}
+                        value={observer.get('debug') ?? 0}
+                        options={[
+                            { v: 0, t: 'None' },
+                            { v: 1, t: 'LOD' },
+                            { v: 2, t: 'SH Update' },
+                            { v: 3, t: 'Heatmap' },
+                            { v: 4, t: 'AABBs' },
+                            { v: 5, t: 'Node AABBs' }
+                        ]}
+                    />
+                </LabelGroup>
+                <Button
+                    text='Log Textures'
+                    onClick={() => {
+                        observer.emit('logTextures');
+                    }}
+                />
+                <Button
+                    text='Log Buffers'
+                    onClick={() => {
+                        observer.emit('logBuffers');
+                    }}
+                />
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='Resolution'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.resolution' }}
+                        value={observer.get('data.stats.resolution')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/lod-streaming.controls.mjs b/examples/src/examples/gaussian-splatting/lod-streaming.controls.mjs
deleted file mode 100644
index e80f992cd46..00000000000
--- a/examples/src/examples/gaussian-splatting/lod-streaming.controls.mjs
+++ /dev/null
@@ -1,338 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, Button, Panel, SelectInput, SliderInput, Label, TextInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Scene' },
-            jsx(
-                LabelGroup,
-                { text: 'URL' },
-                jsx(TextInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'url' },
-                    value: observer.get('url') || '',
-                    placeholder: 'Enter gsplat URL...'
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Orientation' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'orientation' },
-                    type: 'number',
-                    options: [
-                        { v: 0, t: '0°' },
-                        { v: 90, t: '90°' },
-                        { v: 180, t: '180°' },
-                        { v: 270, t: '270°' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Occluder' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'occluder' },
-                    value: observer.get('occluder') || false
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Environment' },
-                jsx(SelectInput, {
-                    type: 'string',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'environment' },
-                    value: observer.get('environment') || 'none',
-                    options: [
-                        { v: 'none', t: 'None' },
-                        { v: 'rosendal', t: 'Rosendal Sunset' },
-                        { v: 'industrial-sunset', t: 'Industrial Sunset' },
-                        { v: 'partly-cloudy', t: 'Partly Cloudy' },
-                        { v: 'moonlit', t: 'Moonlit Sky' },
-                        { v: 'sunflowers', t: 'Sunflowers' },
-                        { v: 'table-mountain', t: 'Table Mountain' },
-                        { v: 'cloud-layers', t: 'Cloud Layers' },
-                        { v: 'night', t: 'Night Sky' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Fog Density' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'fogDensity' },
-                    min: 0,
-                    max: 0.5,
-                    precision: 3,
-                    step: 0.001
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Camera Frame' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'cameraFrame' },
-                    value: observer.get('cameraFrame') || false
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'FOV' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'cameraFov' },
-                    min: 10,
-                    max: 360,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Fisheye' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'fisheye' },
-                    min: 0,
-                    max: 1,
-                    precision: 4,
-                    step: 0.0001
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'High Res' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'highRes' },
-                    value: observer.get('highRes') || false
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Tonemapping' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'toneMapping' },
-                    value: observer.get('toneMapping') ?? 0,
-                    options: [
-                        { v: 0, t: 'Linear' },
-                        { v: 1, t: 'Filmic' },
-                        { v: 2, t: 'Hejl' },
-                        { v: 3, t: 'ACES' },
-                        { v: 4, t: 'ACES2' },
-                        { v: 5, t: 'Neutral' },
-                        { v: 6, t: 'None' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Exposure' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'exposure' },
-                    min: 0,
-                    max: 5,
-                    precision: 2,
-                    step: 0.05
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Min Pixel Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'minPixelSize' },
-                    min: 0,
-                    max: 5,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Min Contribution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'minContribution' },
-                    min: 0,
-                    max: 10,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Alpha Clip' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'alphaClipForward' },
-                    min: 0,
-                    max: 1,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Radial' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'radialSorting' },
-                    value: observer.get('radialSorting') ?? true
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Compact' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'compact' },
-                    value: observer.get('compact') || false
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Preset' },
-                jsx(SelectInput, {
-                    type: 'string',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodPreset' },
-                    value: observer.get('lodPreset') || 'desktop',
-                    options: [
-                        { v: 'desktop-max', t: 'Desktop Max (0-5)' },
-                        { v: 'desktop', t: 'Desktop (1-5)' },
-                        { v: 'mobile-max', t: 'Mobile Max (2-5)' },
-                        { v: 'mobile', t: 'Mobile (3-5)' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Base Dist' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodBaseDistance' },
-                    min: 1,
-                    max: 50,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Multiplier' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodMultiplier' },
-                    min: 1.2,
-                    max: 5,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 40,
-                    precision: 1,
-                    step: 0.1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Debug' },
-            jsx(
-                LabelGroup,
-                { text: 'Debug Render' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'debug' },
-                    value: observer.get('debug') ?? 0,
-                    options: [
-                        { v: 0, t: 'None' },
-                        { v: 1, t: 'LOD' },
-                        { v: 2, t: 'SH Update' },
-                        { v: 3, t: 'Heatmap' },
-                        { v: 4, t: 'AABBs' },
-                        { v: 5, t: 'Node AABBs' }
-                    ]
-                })
-            ),
-            jsx(Button, {
-                text: 'Log Textures',
-                onClick: () => {
-                    observer.emit('logTextures');
-                }
-            }),
-            jsx(Button, {
-                text: 'Log Buffers',
-                onClick: () => {
-                    observer.emit('logBuffers');
-                }
-            })
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.resolution' },
-                    value: observer.get('data.stats.resolution')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/lut-grading.controls.jsx b/examples/src/examples/gaussian-splatting/lut-grading.controls.jsx
new file mode 100644
index 00000000000..2e86637a1a9
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/lut-grading.controls.jsx
@@ -0,0 +1,120 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const lutOptions = observer.get('lutSelectOptions') ?? [];
+    return (
+        <>
+            <Panel headerText='Color LUT'>
+                <LabelGroup text='LUT 1'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lut' }}
+                        type='string'
+                        options={lutOptions}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity 1'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lutIntensity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LUT 2'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lut2' }}
+                        type='string'
+                        options={lutOptions}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity 2'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lutIntensity2' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blend'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lutBlend' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Animate'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lutAnimate' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget (M)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={10}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='Resolution'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.resolution' }}
+                        value={observer.get('data.stats.resolution')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/lut-grading.controls.mjs b/examples/src/examples/gaussian-splatting/lut-grading.controls.mjs
deleted file mode 100644
index 2955a8de31d..00000000000
--- a/examples/src/examples/gaussian-splatting/lut-grading.controls.mjs
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-    const lutOptions = observer.get('lutSelectOptions') ?? [];
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Color LUT' },
-            jsx(
-                LabelGroup,
-                { text: 'LUT 1' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lut' },
-                    type: 'string',
-                    options: lutOptions
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity 1' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lutIntensity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LUT 2' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lut2' },
-                    type: 'string',
-                    options: lutOptions
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity 2' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lutIntensity2' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blend' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lutBlend' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Animate' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lutAnimate' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget (M)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 10,
-                    precision: 2,
-                    step: 0.05
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.resolution' },
-                    value: observer.get('data.stats.resolution')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/multi-splat.controls.jsx b/examples/src/examples/gaussian-splatting/multi-splat.controls.jsx
new file mode 100644
index 00000000000..1823eee57ad
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/multi-splat.controls.jsx
@@ -0,0 +1,40 @@
+import { BindingTwoWay, Button, LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    if (observer.get('shader') === undefined) {
+        observer.set('shader', false);
+    }
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <Button
+                text='Custom Shader'
+                onClick={() => {
+                    observer.set('shader', !observer.get('shader'));
+                }}
+            />
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/multi-splat.controls.mjs b/examples/src/examples/gaussian-splatting/multi-splat.controls.mjs
deleted file mode 100644
index 61a54cd78a1..00000000000
--- a/examples/src/examples/gaussian-splatting/multi-splat.controls.mjs
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    if (observer.get('shader') === undefined) {
-        observer.set('shader', false);
-    }
-    const { BindingTwoWay, Button, LabelGroup, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(Button, {
-            text: 'Custom Shader',
-            onClick: () => {
-                observer.set('shader', !observer.get('shader'));
-            }
-        })
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/multi-view.controls.jsx b/examples/src/examples/gaussian-splatting/multi-view.controls.jsx
new file mode 100644
index 00000000000..e2a6933bc6c
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/multi-view.controls.jsx
@@ -0,0 +1,31 @@
+import { BindingTwoWay, LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/multi-view.controls.mjs b/examples/src/examples/gaussian-splatting/multi-view.controls.mjs
deleted file mode 100644
index 35587a31bda..00000000000
--- a/examples/src/examples/gaussian-splatting/multi-view.controls.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/paint.controls.jsx b/examples/src/examples/gaussian-splatting/paint.controls.jsx
new file mode 100644
index 00000000000..4a5ac6acefe
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/paint.controls.jsx
@@ -0,0 +1,66 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    ColorPicker,
+    SelectInput,
+    SliderInput,
+    Panel
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Renderer'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Paint Settings'>
+                <LabelGroup text='Paint Color'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'paintColor' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'paintIntensity' }}
+                        min={0.1}
+                        max={1.0}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Brush Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'brushSize' }}
+                        min={0.05}
+                        max={0.5}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/paint.controls.mjs b/examples/src/examples/gaussian-splatting/paint.controls.mjs
deleted file mode 100644
index f91e09f4f99..00000000000
--- a/examples/src/examples/gaussian-splatting/paint.controls.mjs
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, ColorPicker, SelectInput, SliderInput, Panel } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Renderer' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Paint Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Paint Color' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'paintColor' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'paintIntensity' },
-                    min: 0.1,
-                    max: 1.0,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Brush Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'brushSize' },
-                    min: 0.05,
-                    max: 0.5,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/picking.controls.jsx b/examples/src/examples/gaussian-splatting/picking.controls.jsx
new file mode 100644
index 00000000000..4e153b74e9b
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/picking.controls.jsx
@@ -0,0 +1,39 @@
+import { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Ortho Camera'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'orthoCamera' }}
+                    value={observer.get('orthoCamera') || false}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/picking.controls.mjs b/examples/src/examples/gaussian-splatting/picking.controls.mjs
deleted file mode 100644
index ade33d6ef09..00000000000
--- a/examples/src/examples/gaussian-splatting/picking.controls.mjs
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Ortho Camera' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'orthoCamera' },
-                value: observer.get('orthoCamera') || false
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/procedural-instanced.controls.jsx b/examples/src/examples/gaussian-splatting/procedural-instanced.controls.jsx
new file mode 100644
index 00000000000..e2a6933bc6c
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/procedural-instanced.controls.jsx
@@ -0,0 +1,31 @@
+import { BindingTwoWay, LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/procedural-instanced.controls.mjs b/examples/src/examples/gaussian-splatting/procedural-instanced.controls.mjs
deleted file mode 100644
index 35587a31bda..00000000000
--- a/examples/src/examples/gaussian-splatting/procedural-instanced.controls.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/procedural-mesh.controls.jsx b/examples/src/examples/gaussian-splatting/procedural-mesh.controls.jsx
new file mode 100644
index 00000000000..e2a6933bc6c
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/procedural-mesh.controls.jsx
@@ -0,0 +1,31 @@
+import { BindingTwoWay, LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/procedural-mesh.controls.mjs b/examples/src/examples/gaussian-splatting/procedural-mesh.controls.mjs
deleted file mode 100644
index 35587a31bda..00000000000
--- a/examples/src/examples/gaussian-splatting/procedural-mesh.controls.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/procedural-shapes.controls.jsx b/examples/src/examples/gaussian-splatting/procedural-shapes.controls.jsx
new file mode 100644
index 00000000000..9b1ccf6c127
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/procedural-shapes.controls.jsx
@@ -0,0 +1,38 @@
+import { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Lines & Labels'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'showLines' }}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/procedural-shapes.controls.mjs b/examples/src/examples/gaussian-splatting/procedural-shapes.controls.mjs
deleted file mode 100644
index bfca3ed7482..00000000000
--- a/examples/src/examples/gaussian-splatting/procedural-shapes.controls.mjs
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Lines & Labels' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'showLines' }
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/reveal.controls.jsx b/examples/src/examples/gaussian-splatting/reveal.controls.jsx
new file mode 100644
index 00000000000..e55e9b8ce97
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/reveal.controls.jsx
@@ -0,0 +1,60 @@
+import { BindingTwoWay, LabelGroup, SelectInput, Button } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Effect'>
+                <SelectInput
+                    options={[
+                        { v: 'radial', t: 'Radial' },
+                        { v: 'rain', t: 'Rain' },
+                        { v: 'grid', t: 'Grid Eruption' }
+                    ]}
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'effect' }}
+                />
+            </LabelGroup>
+            <Button
+                text='Restart'
+                onClick={() => {
+                    observer.emit('restart');
+                }}
+            />
+            <Button
+                text='Prev'
+                onClick={() => {
+                    observer.emit('prev');
+                }}
+            />
+            <Button
+                text='Next'
+                onClick={() => {
+                    observer.emit('next');
+                }}
+            />
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/reveal.controls.mjs b/examples/src/examples/gaussian-splatting/reveal.controls.mjs
deleted file mode 100644
index 52a22173238..00000000000
--- a/examples/src/examples/gaussian-splatting/reveal.controls.mjs
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput, Button } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Effect' },
-            jsx(SelectInput, {
-                options: [
-                    { v: 'radial', t: 'Radial' },
-                    { v: 'rain', t: 'Rain' },
-                    { v: 'grid', t: 'Grid Eruption' }
-                ],
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'effect' }
-            })
-        ),
-        jsx(Button, {
-            text: 'Restart',
-            onClick: () => {
-                observer.emit('restart');
-            }
-        }),
-        jsx(Button, {
-            text: 'Prev',
-            onClick: () => {
-                observer.emit('prev');
-            }
-        }),
-        jsx(Button, {
-            text: 'Next',
-            onClick: () => {
-                observer.emit('next');
-            }
-        })
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/shader-effects.controls.jsx b/examples/src/examples/gaussian-splatting/shader-effects.controls.jsx
new file mode 100644
index 00000000000..f3390b23db7
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/shader-effects.controls.jsx
@@ -0,0 +1,78 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    SelectInput,
+    BooleanInput,
+    Button
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Effect'>
+                <SelectInput
+                    options={[
+                        { v: 'hide', t: 'Statue Hide' },
+                        { v: 'reveal', t: 'Statue Reveal' },
+                        { v: 'tint', t: 'Statue Tint' },
+                        { v: 'untint', t: 'Statue Untint' },
+                        { v: 'roomHide', t: 'Room Hide' },
+                        { v: 'roomReveal', t: 'Room Reveal' },
+                        { v: 'roomTint', t: 'Room Tint' },
+                        { v: 'roomUntint', t: 'Room Untint' }
+                    ]}
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'effect' }}
+                />
+            </LabelGroup>
+            <Button
+                text='Restart'
+                onClick={() => {
+                    observer.emit('restart');
+                }}
+            />
+            <Button
+                text='Prev'
+                onClick={() => {
+                    observer.emit('prev');
+                }}
+            />
+            <Button
+                text='Next'
+                onClick={() => {
+                    observer.emit('next');
+                }}
+            />
+            <LabelGroup text='Enabled'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'enabled' }}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/shader-effects.controls.mjs b/examples/src/examples/gaussian-splatting/shader-effects.controls.mjs
deleted file mode 100644
index edc3940c116..00000000000
--- a/examples/src/examples/gaussian-splatting/shader-effects.controls.mjs
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput, BooleanInput, Button } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Effect' },
-            jsx(SelectInput, {
-                options: [
-                    { v: 'hide', t: 'Statue Hide' },
-                    { v: 'reveal', t: 'Statue Reveal' },
-                    { v: 'tint', t: 'Statue Tint' },
-                    { v: 'untint', t: 'Statue Untint' },
-                    { v: 'roomHide', t: 'Room Hide' },
-                    { v: 'roomReveal', t: 'Room Reveal' },
-                    { v: 'roomTint', t: 'Room Tint' },
-                    { v: 'roomUntint', t: 'Room Untint' }
-                ],
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'effect' }
-            })
-        ),
-        jsx(Button, {
-            text: 'Restart',
-            onClick: () => {
-                observer.emit('restart');
-            }
-        }),
-        jsx(Button, {
-            text: 'Prev',
-            onClick: () => {
-                observer.emit('prev');
-            }
-        }),
-        jsx(Button, {
-            text: 'Next',
-            onClick: () => {
-                observer.emit('next');
-            }
-        }),
-        jsx(
-            LabelGroup,
-            { text: 'Enabled' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'enabled' }
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/shadow-soft.controls.jsx b/examples/src/examples/gaussian-splatting/shadow-soft.controls.jsx
new file mode 100644
index 00000000000..ed6f3caf619
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/shadow-soft.controls.jsx
@@ -0,0 +1,92 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <Panel headerText='Soft Shadow Settings'>
+                <LabelGroup text='Soft Shadows'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.soft' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowResolution' }}
+                        min={512}
+                        max={4096}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Penumbra'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.penumbraSize' }}
+                        min={0}
+                        max={0.2}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Falloff'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.penumbraFalloff' }}
+                        min={1}
+                        max={10}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowSamples' }}
+                        min={1}
+                        max={128}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blocker Samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowBlockerSamples' }}
+                        min={0}
+                        max={128}
+                        precision={0}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/shadow-soft.controls.mjs b/examples/src/examples/gaussian-splatting/shadow-soft.controls.mjs
deleted file mode 100644
index 4aa72701795..00000000000
--- a/examples/src/examples/gaussian-splatting/shadow-soft.controls.mjs
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Soft Shadow Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Soft Shadows' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.soft' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowResolution' },
-                    min: 512,
-                    max: 4096,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Penumbra' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.penumbraSize' },
-                    min: 0,
-                    max: 0.2,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Falloff' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.penumbraFalloff' },
-                    min: 1,
-                    max: 10,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowSamples' },
-                    min: 1,
-                    max: 128,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blocker Samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowBlockerSamples' },
-                    min: 0,
-                    max: 128,
-                    precision: 0
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/shadows.controls.jsx b/examples/src/examples/gaussian-splatting/shadows.controls.jsx
new file mode 100644
index 00000000000..177cf592aca
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/shadows.controls.jsx
@@ -0,0 +1,40 @@
+import { BindingTwoWay, LabelGroup, SelectInput, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Shadow Clip'>
+                <SliderInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'alphaClip' }}
+                    min={0}
+                    max={1}
+                    precision={2}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/shadows.controls.mjs b/examples/src/examples/gaussian-splatting/shadows.controls.mjs
deleted file mode 100644
index 6dffe5b5c63..00000000000
--- a/examples/src/examples/gaussian-splatting/shadows.controls.mjs
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Shadow Clip' },
-            jsx(SliderInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'alphaClip' },
-                min: 0,
-                max: 1,
-                precision: 2
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/simple.controls.jsx b/examples/src/examples/gaussian-splatting/simple.controls.jsx
new file mode 100644
index 00000000000..824dccd253e
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/simple.controls.jsx
@@ -0,0 +1,51 @@
+import { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Scene'>
+                <LabelGroup text='Shadow Clip'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'alphaClip' }}
+                        min={0}
+                        max={1}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Alpha Clip'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'alphaClipForward' }}
+                        min={0}
+                        max={1}
+                        precision={4}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/simple.controls.mjs b/examples/src/examples/gaussian-splatting/simple.controls.mjs
deleted file mode 100644
index 673a4701602..00000000000
--- a/examples/src/examples/gaussian-splatting/simple.controls.mjs
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Scene' },
-            jsx(
-                LabelGroup,
-                { text: 'Shadow Clip' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'alphaClip' },
-                    min: 0,
-                    max: 1,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Alpha Clip' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'alphaClipForward' },
-                    min: 0,
-                    max: 1,
-                    precision: 4
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/spherical-harmonics.controls.jsx b/examples/src/examples/gaussian-splatting/spherical-harmonics.controls.jsx
new file mode 100644
index 00000000000..e2a6933bc6c
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/spherical-harmonics.controls.jsx
@@ -0,0 +1,31 @@
+import { BindingTwoWay, LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/spherical-harmonics.controls.mjs b/examples/src/examples/gaussian-splatting/spherical-harmonics.controls.mjs
deleted file mode 100644
index 20ad289197d..00000000000
--- a/examples/src/examples/gaussian-splatting/spherical-harmonics.controls.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/splat-portal.controls.jsx b/examples/src/examples/gaussian-splatting/splat-portal.controls.jsx
new file mode 100644
index 00000000000..6c023994a7a
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/splat-portal.controls.jsx
@@ -0,0 +1,33 @@
+import { BindingTwoWay, LabelGroup, Panel, Label } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Stats'>
+                <LabelGroup text='Current World'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.world' }}
+                        value={observer.get('data.stats.world')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/splat-portal.controls.mjs b/examples/src/examples/gaussian-splatting/splat-portal.controls.mjs
deleted file mode 100644
index 3a55bc967b4..00000000000
--- a/examples/src/examples/gaussian-splatting/splat-portal.controls.mjs
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, Label } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Current World' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.world' },
-                    value: observer.get('data.stats.world')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/third-person.controls.jsx b/examples/src/examples/gaussian-splatting/third-person.controls.jsx
new file mode 100644
index 00000000000..6ca68ceeef1
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/third-person.controls.jsx
@@ -0,0 +1,108 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget (M)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={10}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Distance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'cameraDistance' }}
+                        min={1}
+                        max={15}
+                        precision={2}
+                        step={0.1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Height'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'cameraHeight' }}
+                        min={0}
+                        max={4}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Smoothing'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'cameraSmoothing' }}
+                        min={0}
+                        max={0.01}
+                        precision={5}
+                        step={0.0001}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Look Sens'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lookSens' }}
+                        min={0.01}
+                        max={0.5}
+                        precision={3}
+                        step={0.005}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='Resolution'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.resolution' }}
+                        value={observer.get('data.stats.resolution')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/third-person.controls.mjs b/examples/src/examples/gaussian-splatting/third-person.controls.mjs
deleted file mode 100644
index 795acfe692a..00000000000
--- a/examples/src/examples/gaussian-splatting/third-person.controls.mjs
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget (M)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 10,
-                    precision: 2,
-                    step: 0.05
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Distance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'cameraDistance' },
-                    min: 1,
-                    max: 15,
-                    precision: 2,
-                    step: 0.1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Height' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'cameraHeight' },
-                    min: 0,
-                    max: 4,
-                    precision: 2,
-                    step: 0.05
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Smoothing' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'cameraSmoothing' },
-                    min: 0,
-                    max: 0.01,
-                    precision: 5,
-                    step: 0.0001
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Look Sens' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lookSens' },
-                    min: 0.01,
-                    max: 0.5,
-                    precision: 3,
-                    step: 0.005
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.resolution' },
-                    value: observer.get('data.stats.resolution')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/viewer.controls.jsx b/examples/src/examples/gaussian-splatting/viewer.controls.jsx
new file mode 100644
index 00000000000..16eeee8b2c1
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/viewer.controls.jsx
@@ -0,0 +1,183 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Renderer'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Anti-alias'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.antialias' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Scene'>
+                <LabelGroup text='Skydome'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skydome' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Compact'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.compact' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Orientation'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.orientation' }}
+                        type='number'
+                        options={[
+                            { v: 0, t: '0°' },
+                            { v: 90, t: '90°' },
+                            { v: 180, t: '180°' },
+                            { v: 270, t: '270°' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Tone & Color'>
+                <LabelGroup text='Tonemapping'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.tonemapping' }}
+                        type='number'
+                        options={[
+                            { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
+                            { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
+                            { v: pc.TONEMAP_HEJL, t: 'HEJL' },
+                            { v: pc.TONEMAP_ACES, t: 'ACES' },
+                            { v: pc.TONEMAP_ACES2, t: 'ACES2' },
+                            { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Exposure (EV)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.grading.exposure' }}
+                        min={-10}
+                        max={10}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Contrast'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.grading.contrast' }}
+                        min={0.5}
+                        max={1.5}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Bloom'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.bloom.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Bloom Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.bloom.intensity' }}
+                        min={0}
+                        max={0.2}
+                        precision={3}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Color Enhance'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='shadows'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.shadows' }}
+                        min={-3}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='highlights'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.highlights' }}
+                        min={-3}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='midtones'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.midtones' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='vibrance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.vibrance' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='dehaze'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.dehaze' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/viewer.controls.mjs b/examples/src/examples/gaussian-splatting/viewer.controls.mjs
deleted file mode 100644
index 9bd2051e9a5..00000000000
--- a/examples/src/examples/gaussian-splatting/viewer.controls.mjs
+++ /dev/null
@@ -1,208 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Renderer' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Anti-alias' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.antialias' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Scene' },
-            jsx(
-                LabelGroup,
-                { text: 'Skydome' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skydome' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Compact' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.compact' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Orientation' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.orientation' },
-                    type: 'number',
-                    options: [
-                        { v: 0, t: '0°' },
-                        { v: 90, t: '90°' },
-                        { v: 180, t: '180°' },
-                        { v: 270, t: '270°' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Tone & Color' },
-            jsx(
-                LabelGroup,
-                { text: 'Tonemapping' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.tonemapping' },
-                    type: 'number',
-                    options: [
-                        { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
-                        { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
-                        { v: pc.TONEMAP_HEJL, t: 'HEJL' },
-                        { v: pc.TONEMAP_ACES, t: 'ACES' },
-                        { v: pc.TONEMAP_ACES2, t: 'ACES2' },
-                        { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Exposure (EV)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.grading.exposure' },
-                    min: -10,
-                    max: 10,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Contrast' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.grading.contrast' },
-                    min: 0.5,
-                    max: 1.5,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Bloom' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.bloom.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Bloom Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.bloom.intensity' },
-                    min: 0,
-                    max: 0.2,
-                    precision: 3
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Color Enhance' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'shadows' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.shadows' },
-                    min: -3,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'highlights' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.highlights' },
-                    min: -3,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'midtones' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.midtones' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'vibrance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.vibrance' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'dehaze' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.dehaze' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/weather.controls.jsx b/examples/src/examples/gaussian-splatting/weather.controls.jsx
new file mode 100644
index 00000000000..81701e7b5d5
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/weather.controls.jsx
@@ -0,0 +1,188 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    Label,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    ColorPicker,
+    SelectInput,
+    VectorInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Renderer'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Preset'>
+                <LabelGroup text='Type'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'preset' }}
+                        type='string'
+                        options={[
+                            { v: 'none', t: 'None' },
+                            { v: 'snow', t: 'Snow' },
+                            { v: 'rain', t: 'Rain' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Fog Density'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'fogDensity' }}
+                        min={0}
+                        max={0.5}
+                        precision={3}
+                        step={0.001}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Exposure'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'exposure' }}
+                        min={0}
+                        max={5}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Fog'>
+                    <BooleanInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'useFog' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Animation'>
+                <LabelGroup text='Speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'speed' }}
+                        min={0}
+                        max={40}
+                        precision={2}
+                        step={0.1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Drift'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'drift' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                        step={0.01}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Angle'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'angle' }}
+                        min={0}
+                        max={360}
+                        precision={0}
+                        step={1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Particle Properties'>
+                <LabelGroup text='Color'>
+                    <ColorPicker binding={new BindingTwoWay()} link={{ observer, path: 'color' }} />
+                </LabelGroup>
+                <LabelGroup text='Opacity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'opacity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                        step={0.05}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Min Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'particleMinSize' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                        step={0.01}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Max Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'particleMaxSize' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                        step={0.01}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Elongate'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'elongate' }}
+                        min={1}
+                        max={20}
+                        precision={1}
+                        step={0.5}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Grid (rebuilds)'>
+                <LabelGroup text='Extents'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'extents' }}
+                        dimensions={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Density'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'density' }}
+                        min={0.5}
+                        max={4}
+                        precision={1}
+                        step={0.1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='Particles'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'particles' }}
+                        value={observer.get('particles')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/weather.controls.mjs b/examples/src/examples/gaussian-splatting/weather.controls.mjs
deleted file mode 100644
index a665fce3f01..00000000000
--- a/examples/src/examples/gaussian-splatting/weather.controls.mjs
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, Label, LabelGroup, Panel, SliderInput, ColorPicker, SelectInput, VectorInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Renderer' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Preset' },
-            jsx(
-                LabelGroup,
-                { text: 'Type' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'preset' },
-                    type: 'string',
-                    options: [
-                        { v: 'none', t: 'None' },
-                        { v: 'snow', t: 'Snow' },
-                        { v: 'rain', t: 'Rain' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Fog Density' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'fogDensity' },
-                    min: 0,
-                    max: 0.5,
-                    precision: 3,
-                    step: 0.001
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Exposure' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'exposure' },
-                    min: 0,
-                    max: 5,
-                    precision: 2,
-                    step: 0.05
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Fog' },
-                jsx(BooleanInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'useFog' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Animation' },
-            jsx(
-                LabelGroup,
-                { text: 'Speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'speed' },
-                    min: 0,
-                    max: 40,
-                    precision: 2,
-                    step: 0.1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Drift' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'drift' },
-                    min: 0,
-                    max: 1,
-                    precision: 2,
-                    step: 0.01
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Angle' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'angle' },
-                    min: 0,
-                    max: 360,
-                    precision: 0,
-                    step: 1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Particle Properties' },
-            jsx(
-                LabelGroup,
-                { text: 'Color' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'color' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Opacity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'opacity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2,
-                    step: 0.05
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Min Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'particleMinSize' },
-                    min: 0,
-                    max: 1,
-                    precision: 2,
-                    step: 0.01
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Max Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'particleMaxSize' },
-                    min: 0,
-                    max: 1,
-                    precision: 2,
-                    step: 0.01
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Elongate' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'elongate' },
-                    min: 1,
-                    max: 20,
-                    precision: 1,
-                    step: 0.5
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Grid (rebuilds)' },
-            jsx(
-                LabelGroup,
-                { text: 'Extents' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'extents' },
-                    dimensions: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Density' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'density' },
-                    min: 0.5,
-                    max: 4,
-                    precision: 1,
-                    step: 0.1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Particles' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'particles' },
-                    value: observer.get('particles')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/world.controls.jsx b/examples/src/examples/gaussian-splatting/world.controls.jsx
new file mode 100644
index 00000000000..b022cb55d8c
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/world.controls.jsx
@@ -0,0 +1,106 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    BooleanInput,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Renderer'>
+                <LabelGroup text='Renderer'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'renderer' }}
+                        value={observer.get('renderer') ?? 0}
+                        options={[
+                            { v: 0, t: 'Auto' },
+                            { v: 1, t: 'Raster (CPU Sort)' },
+                            { v: 2, t: 'Raster (GPU Sort)' },
+                            { v: 3, t: 'Compute' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Orbit'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'orbitCamera' }}
+                        value={observer.get('orbitCamera') || false}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Debug'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'debug' }}
+                        value={observer.get('debug') ?? 0}
+                        options={[
+                            { v: 0, t: 'None' },
+                            { v: 1, t: 'LOD' },
+                            { v: 2, t: 'SH Update' },
+                            { v: 3, t: 'Heatmap' },
+                            { v: 4, t: 'AABBs' },
+                            { v: 5, t: 'Node AABBs' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Splat Budget'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'splatBudget' }}
+                        min={0}
+                        max={10}
+                        precision={1}
+                        step={0.1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Base Dist'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodBaseDistance' }}
+                        min={1}
+                        max={50}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='LOD Multiplier'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lodMultiplier' }}
+                        min={1.2}
+                        max={10}
+                        precision={1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Stats'>
+                <LabelGroup text='GSplat Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.gsplats' }}
+                        value={observer.get('data.stats.gsplats')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/world.controls.mjs b/examples/src/examples/gaussian-splatting/world.controls.mjs
deleted file mode 100644
index ff50651b558..00000000000
--- a/examples/src/examples/gaussian-splatting/world.controls.mjs
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Renderer' },
-            jsx(
-                LabelGroup,
-                { text: 'Renderer' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'renderer' },
-                    value: observer.get('renderer') ?? 0,
-                    options: [
-                        { v: 0, t: 'Auto' },
-                        { v: 1, t: 'Raster (CPU Sort)' },
-                        { v: 2, t: 'Raster (GPU Sort)' },
-                        { v: 3, t: 'Compute' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Orbit' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'orbitCamera' },
-                    value: observer.get('orbitCamera') || false
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Debug' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'debug' },
-                    value: observer.get('debug') ?? 0,
-                    options: [
-                        { v: 0, t: 'None' },
-                        { v: 1, t: 'LOD' },
-                        { v: 2, t: 'SH Update' },
-                        { v: 3, t: 'Heatmap' },
-                        { v: 4, t: 'AABBs' },
-                        { v: 5, t: 'Node AABBs' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Splat Budget' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'splatBudget' },
-                    min: 0,
-                    max: 10,
-                    precision: 1,
-                    step: 0.1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Base Dist' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodBaseDistance' },
-                    min: 1,
-                    max: 50,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'LOD Multiplier' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lodMultiplier' },
-                    min: 1.2,
-                    max: 10,
-                    precision: 1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'GSplat Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.gsplats' },
-                    value: observer.get('data.stats.gsplats')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/gaussian-splatting/xr-views.controls.jsx b/examples/src/examples/gaussian-splatting/xr-views.controls.jsx
new file mode 100644
index 00000000000..c73f71a7e40
--- /dev/null
+++ b/examples/src/examples/gaussian-splatting/xr-views.controls.jsx
@@ -0,0 +1,38 @@
+import { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Renderer'>
+                <SelectInput
+                    type='number'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'renderer' }}
+                    value={observer.get('renderer') ?? 0}
+                    options={[
+                        { v: 0, t: 'Auto' },
+                        { v: 1, t: 'Raster (CPU Sort)' },
+                        { v: 2, t: 'Raster (GPU Sort)' },
+                        { v: 3, t: 'Compute' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Exaggerated Stereo'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'exaggeratedStereo' }}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/gaussian-splatting/xr-views.controls.mjs b/examples/src/examples/gaussian-splatting/xr-views.controls.mjs
deleted file mode 100644
index 928c15f3777..00000000000
--- a/examples/src/examples/gaussian-splatting/xr-views.controls.mjs
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Renderer' },
-            jsx(SelectInput, {
-                type: 'number',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'renderer' },
-                value: observer.get('renderer') ?? 0,
-                options: [
-                    { v: 0, t: 'Auto' },
-                    { v: 1, t: 'Raster (CPU Sort)' },
-                    { v: 2, t: 'Raster (GPU Sort)' },
-                    { v: 3, t: 'Compute' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Exaggerated Stereo' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'exaggeratedStereo' }
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/gizmos/transform-rotate.controls.jsx b/examples/src/examples/gizmos/transform-rotate.controls.jsx
new file mode 100644
index 00000000000..1d8d372f92a
--- /dev/null
+++ b/examples/src/examples/gizmos/transform-rotate.controls.jsx
@@ -0,0 +1,273 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    ColorPicker,
+    SliderInput,
+    SelectInput,
+    BooleanInput
+} from '@playcanvas/pcui/react';
+import { useState } from 'react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
+
+    return (
+        <>
+            <Panel headerText='Transform'>
+                <LabelGroup text='Coord Space'>
+                    <SelectInput
+                        options={[
+                            { v: 'world', t: 'World' },
+                            { v: 'local', t: 'Local' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.coordSpace' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.size' }}
+                        min={0.1}
+                        max={2.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Snap'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.snap' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Snap Increment'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.snapIncrement' }}
+                        min={1}
+                        max={10}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Drag Mode'>
+                    <SelectInput
+                        options={[
+                            { v: 'show', t: 'Show' },
+                            { v: 'hide', t: 'Hide' },
+                            { v: 'selected', t: 'Selected' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.dragMode' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotation Mode'>
+                    <SelectInput
+                        options={[
+                            { v: 'absolute', t: 'Absolute' },
+                            { v: 'orbit', t: 'Orbit' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.rotationMode' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Theme'>
+                <LabelGroup text='Shape Base X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base XYZ'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.xyz' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Face'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.f' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover XYZ'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.xyz' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Face'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.f' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Occlusion'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideOcclusion' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Disabled'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.disabled' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Intersection'>
+                <LabelGroup text='Ring Tolerance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.ringTolerance' }}
+                        min={0}
+                        max={0.5}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Render'>
+                <LabelGroup text='XYZ Tube Radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.xyzTubeRadius' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='XYZ Ring Radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.xyzRingRadius' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Face Tube Radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.faceTubeRadius' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Face Ring Radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.faceRingRadius' }}
+                        max={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Center Radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.centerRadius' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Angle Guide Thickness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.angleGuideThickness' }}
+                        min={0.001}
+                        max={0.1}
+                        step={0.01}
+                        precision={3}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Projection'>
+                    <SelectInput
+                        options={[
+                            { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
+                            { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'camera.proj' }}
+                        onSelect={value => setProj((parseInt(value, 10) || 1) - 1)}
+                    />
+                </LabelGroup>
+                {proj === pc.PROJECTION_PERSPECTIVE && (
+                    <LabelGroup text='FOV'>
+                        <SliderInput
+                            binding={new BindingTwoWay()}
+                            link={{ observer, path: 'camera.fov' }}
+                            min={30}
+                            max={100}
+                        />
+                    </LabelGroup>
+                )}
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gizmos/transform-rotate.controls.mjs b/examples/src/examples/gizmos/transform-rotate.controls.mjs
deleted file mode 100644
index 2036eb9cd21..00000000000
--- a/examples/src/examples/gizmos/transform-rotate.controls.mjs
+++ /dev/null
@@ -1,327 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
-    const { useState } = React;
-
-    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Transform' },
-            jsx(
-                LabelGroup,
-                { text: 'Coord Space' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 'world', t: 'World' },
-                        { v: 'local', t: 'Local' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.coordSpace' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.size' },
-                    min: 0.1,
-                    max: 2.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Snap' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.snap' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Snap Increment' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.snapIncrement' },
-                    min: 1,
-                    max: 10,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Drag Mode' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 'show', t: 'Show' },
-                        { v: 'hide', t: 'Hide' },
-                        { v: 'selected', t: 'Selected' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.dragMode' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotation Mode' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 'absolute', t: 'Absolute' },
-                        { v: 'orbit', t: 'Orbit' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.rotationMode' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Theme' },
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base XYZ' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.xyz' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Face' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.f' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover XYZ' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.xyz' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Face' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.f' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Occlusion' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideOcclusion' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Disabled' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.disabled' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Intersection' },
-            jsx(
-                LabelGroup,
-                { text: 'Ring Tolerance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.ringTolerance' },
-                    min: 0,
-                    max: 0.5,
-                    precision: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Render' },
-            jsx(
-                LabelGroup,
-                { text: 'XYZ Tube Radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.xyzTubeRadius' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'XYZ Ring Radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.xyzRingRadius' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Face Tube Radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.faceTubeRadius' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Face Ring Radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.faceRingRadius' },
-                    max: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Center Radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.centerRadius' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Angle Guide Thickness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.angleGuideThickness' },
-                    min: 0.001,
-                    max: 0.1,
-                    step: 0.01,
-                    precision: 3
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Projection' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
-                        { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'camera.proj' },
-                    onSelect: value => setProj((parseInt(value, 10) || 1) - 1)
-                })
-            ),
-            proj === pc.PROJECTION_PERSPECTIVE &&
-                jsx(
-                    LabelGroup,
-                    { text: 'FOV' },
-                    jsx(SliderInput, {
-                        binding: new BindingTwoWay(),
-                        link: { observer, path: 'camera.fov' },
-                        min: 30,
-                        max: 100
-                    })
-                )
-        )
-    );
-};
diff --git a/examples/src/examples/gizmos/transform-scale.controls.jsx b/examples/src/examples/gizmos/transform-scale.controls.jsx
new file mode 100644
index 00000000000..62af3d008f4
--- /dev/null
+++ b/examples/src/examples/gizmos/transform-scale.controls.jsx
@@ -0,0 +1,268 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    ColorPicker,
+    SliderInput,
+    SelectInput,
+    BooleanInput
+} from '@playcanvas/pcui/react';
+import { useState } from 'react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
+
+    return (
+        <>
+            <Panel headerText='Transform'>
+                <LabelGroup text='Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.size' }}
+                        min={0.1}
+                        max={2.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Snap'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.snap' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Snap Increment'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.snapIncrement' }}
+                        min={1}
+                        max={10}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Flip Planes'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.flipPlanes' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Drag Mode'>
+                    <SelectInput
+                        options={[
+                            { v: 'show', t: 'Show' },
+                            { v: 'hide', t: 'Hide' },
+                            { v: 'selected', t: 'Selected' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.dragMode' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Uniform'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.uniform' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Theme'>
+                <LabelGroup text='Shape Base X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base XYZ'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.xyz' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Face'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.f' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover XYZ'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.xyz' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Face'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.f' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Occlusion'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideOcclusion' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Disabled'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.disabled' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Intersection'>
+                <LabelGroup text='Line Tolerance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisLineTolerance' }}
+                        min={0}
+                        max={0.5}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Render'>
+                <LabelGroup text='Gap'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisGap' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Line Thickness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisLineThickness' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Line Length'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisLineLength' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Box Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisBoxSize' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Plane Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisPlaneSize' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Plane Gap'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisPlaneGap' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Center Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisCenterSize' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Projection'>
+                    <SelectInput
+                        options={[
+                            { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
+                            { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'camera.proj' }}
+                        onSelect={value => setProj((parseInt(value, 10) || 1) - 1)}
+                    />
+                </LabelGroup>
+                {proj === pc.PROJECTION_PERSPECTIVE && (
+                    <LabelGroup text='FOV'>
+                        <SliderInput
+                            binding={new BindingTwoWay()}
+                            link={{ observer, path: 'camera.fov' }}
+                            min={30}
+                            max={100}
+                        />
+                    </LabelGroup>
+                )}
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gizmos/transform-scale.controls.mjs b/examples/src/examples/gizmos/transform-scale.controls.mjs
deleted file mode 100644
index bd566b5774f..00000000000
--- a/examples/src/examples/gizmos/transform-scale.controls.mjs
+++ /dev/null
@@ -1,324 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
-    const { useState } = React;
-
-    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Transform' },
-            jsx(
-                LabelGroup,
-                { text: 'Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.size' },
-                    min: 0.1,
-                    max: 2.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Snap' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.snap' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Snap Increment' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.snapIncrement' },
-                    min: 1,
-                    max: 10,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Flip Planes' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.flipPlanes' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Drag Mode' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 'show', t: 'Show' },
-                        { v: 'hide', t: 'Hide' },
-                        { v: 'selected', t: 'Selected' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.dragMode' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Uniform' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.uniform' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Theme' },
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base XYZ' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.xyz' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Face' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.f' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover XYZ' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.xyz' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Face' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.f' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Occlusion' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideOcclusion' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Disabled' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.disabled' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Intersection' },
-            jsx(
-                LabelGroup,
-                { text: 'Line Tolerance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisLineTolerance' },
-                    min: 0,
-                    max: 0.5,
-                    precision: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Render' },
-            jsx(
-                LabelGroup,
-                { text: 'Gap' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisGap' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Line Thickness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisLineThickness' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Line Length' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisLineLength' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Box Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisBoxSize' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Plane Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisPlaneSize' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Plane Gap' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisPlaneGap' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Center Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisCenterSize' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Projection' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
-                        { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'camera.proj' },
-                    onSelect: value => setProj((parseInt(value, 10) || 1) - 1)
-                })
-            ),
-            proj === pc.PROJECTION_PERSPECTIVE &&
-                jsx(
-                    LabelGroup,
-                    { text: 'FOV' },
-                    jsx(SliderInput, {
-                        binding: new BindingTwoWay(),
-                        link: { observer, path: 'camera.fov' },
-                        min: 30,
-                        max: 100
-                    })
-                )
-        )
-    );
-};
diff --git a/examples/src/examples/gizmos/transform-translate.controls.jsx b/examples/src/examples/gizmos/transform-translate.controls.jsx
new file mode 100644
index 00000000000..d5065344669
--- /dev/null
+++ b/examples/src/examples/gizmos/transform-translate.controls.jsx
@@ -0,0 +1,277 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    ColorPicker,
+    SliderInput,
+    SelectInput,
+    BooleanInput
+} from '@playcanvas/pcui/react';
+import { useState } from 'react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
+
+    return (
+        <>
+            <Panel headerText='Transform'>
+                <LabelGroup text='Coord Space'>
+                    <SelectInput
+                        options={[
+                            { v: 'world', t: 'World' },
+                            { v: 'local', t: 'Local' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.coordSpace' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.size' }}
+                        min={0.1}
+                        max={2.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Snap'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.snap' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Snap Increment'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.snapIncrement' }}
+                        min={1}
+                        max={10}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Flip Planes'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.flipPlanes' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Drag Mode'>
+                    <SelectInput
+                        options={[
+                            { v: 'show', t: 'Show' },
+                            { v: 'hide', t: 'Hide' },
+                            { v: 'selected', t: 'Selected' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.dragMode' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Theme'>
+                <LabelGroup text='Shape Base X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base XYZ'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.xyz' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Base Face'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeBase.f' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover XYZ'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.xyz' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shape Hover Face'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.shapeHover.f' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base X'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.x' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base Y'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.y' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Base Z'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideBase.z' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Guide Occlusion'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.guideOcclusion' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Disabled'>
+                    <ColorPicker
+                        channels={4}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.theme.disabled' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Intersection'>
+                <LabelGroup text='Line Tolerance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisLineTolerance' }}
+                        min={0}
+                        max={0.5}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Render'>
+                <LabelGroup text='Gap'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisGap' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Line Thickness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisLineThickness' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Line Length'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisLineLength' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Arrow Thickness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisArrowThickness' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Arrow Length'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisArrowLength' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Plane Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisPlaneSize' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Plane Gap'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisPlaneGap' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Center Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.axisCenterSize' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Projection'>
+                    <SelectInput
+                        options={[
+                            { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
+                            { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'camera.proj' }}
+                        onSelect={value => setProj((parseInt(value, 10) || 1) - 1)}
+                    />
+                </LabelGroup>
+                {proj === pc.PROJECTION_PERSPECTIVE && (
+                    <LabelGroup text='FOV'>
+                        <SliderInput
+                            binding={new BindingTwoWay()}
+                            link={{ observer, path: 'camera.fov' }}
+                            min={30}
+                            max={100}
+                        />
+                    </LabelGroup>
+                )}
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/gizmos/transform-translate.controls.mjs b/examples/src/examples/gizmos/transform-translate.controls.mjs
deleted file mode 100644
index 1ce31dbfe23..00000000000
--- a/examples/src/examples/gizmos/transform-translate.controls.mjs
+++ /dev/null
@@ -1,335 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
-    const { useState } = React;
-
-    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Transform' },
-            jsx(
-                LabelGroup,
-                { text: 'Coord Space' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 'world', t: 'World' },
-                        { v: 'local', t: 'Local' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.coordSpace' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.size' },
-                    min: 0.1,
-                    max: 2.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Snap' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.snap' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Snap Increment' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.snapIncrement' },
-                    min: 1,
-                    max: 10,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Flip Planes' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.flipPlanes' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Drag Mode' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 'show', t: 'Show' },
-                        { v: 'hide', t: 'Hide' },
-                        { v: 'selected', t: 'Selected' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.dragMode' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Theme' },
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base XYZ' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.xyz' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Base Face' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeBase.f' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover XYZ' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.xyz' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shape Hover Face' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.shapeHover.f' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base X' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.x' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base Y' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.y' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Base Z' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideBase.z' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Guide Occlusion' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.guideOcclusion' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Disabled' },
-                jsx(ColorPicker, {
-                    channels: 4,
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.theme.disabled' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Intersection' },
-            jsx(
-                LabelGroup,
-                { text: 'Line Tolerance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisLineTolerance' },
-                    min: 0,
-                    max: 0.5,
-                    precision: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Render' },
-            jsx(
-                LabelGroup,
-                { text: 'Gap' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisGap' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Line Thickness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisLineThickness' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Line Length' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisLineLength' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Arrow Thickness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisArrowThickness' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Arrow Length' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisArrowLength' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Plane Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisPlaneSize' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Plane Gap' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisPlaneGap' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Center Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.axisCenterSize' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Projection' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
-                        { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'camera.proj' },
-                    onSelect: value => setProj((parseInt(value, 10) || 1) - 1)
-                })
-            ),
-            proj === pc.PROJECTION_PERSPECTIVE &&
-                jsx(
-                    LabelGroup,
-                    { text: 'FOV' },
-                    jsx(SliderInput, {
-                        binding: new BindingTwoWay(),
-                        link: { observer, path: 'camera.fov' },
-                        min: 30,
-                        max: 100
-                    })
-                )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/ambient-occlusion.controls.jsx b/examples/src/examples/graphics/ambient-occlusion.controls.jsx
new file mode 100644
index 00000000000..ddd89de39f1
--- /dev/null
+++ b/examples/src/examples/graphics/ambient-occlusion.controls.jsx
@@ -0,0 +1,123 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='enabled'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'data.enabled' }}
+                />
+            </LabelGroup>
+            <Panel headerText='Ambient Occlusion'>
+                <LabelGroup text='Type'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.type' }}
+                        type='string'
+                        options={[
+                            { v: pc.SSAOTYPE_NONE, t: 'None' },
+                            { v: pc.SSAOTYPE_LIGHTING, t: 'Lighting' },
+                            { v: pc.SSAOTYPE_COMBINE, t: 'Combine' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='blurEnabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.blurEnabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='randomize'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.randomize' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.radius' }}
+                        max={50}
+                    />
+                </LabelGroup>
+                <LabelGroup text='samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.samples' }}
+                        min={1}
+                        max={64}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.intensity' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='power'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.power' }}
+                        min={0.1}
+                        max={10}
+                    />
+                </LabelGroup>
+                <LabelGroup text='minAngle'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.minAngle' }}
+                        max={90}
+                    />
+                </LabelGroup>
+                <LabelGroup text='scale'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.scale' }}
+                        options={[
+                            { v: 1.0, t: '100%' },
+                            { v: 0.75, t: '75%' },
+                            { v: 0.5, t: '50%' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='TAA'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.taa' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='debug'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ssao.debug' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/ambient-occlusion.controls.mjs b/examples/src/examples/graphics/ambient-occlusion.controls.mjs
deleted file mode 100644
index a2cfed67784..00000000000
--- a/examples/src/examples/graphics/ambient-occlusion.controls.mjs
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'enabled' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'data.enabled' }
-            })
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Ambient Occlusion' },
-            jsx(
-                LabelGroup,
-                { text: 'Type' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.type' },
-                    type: 'string',
-                    options: [
-                        { v: pc.SSAOTYPE_NONE, t: 'None' },
-                        { v: pc.SSAOTYPE_LIGHTING, t: 'Lighting' },
-                        { v: pc.SSAOTYPE_COMBINE, t: 'Combine' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'blurEnabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.blurEnabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'randomize' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.randomize' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.radius' },
-                    max: 50
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.samples' },
-                    min: 1,
-                    max: 64,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.intensity' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'power' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.power' },
-                    min: 0.1,
-                    max: 10
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'minAngle' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.minAngle' },
-                    max: 90
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'scale' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 1.00, t: '100%' },
-                        { v: 0.75, t: '75%' },
-                        { v: 0.50, t: '50%' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.scale' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'TAA' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.taa' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'debug' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.debug' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/area-picker.controls.jsx b/examples/src/examples/graphics/area-picker.controls.jsx
new file mode 100644
index 00000000000..b2e423ce4ef
--- /dev/null
+++ b/examples/src/examples/graphics/area-picker.controls.jsx
@@ -0,0 +1,25 @@
+import { BindingTwoWay, LabelGroup, BooleanInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Ortho Camera'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'orthoCamera' }}
+                    value={observer.get('orthoCamera') || false}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/area-picker.controls.mjs b/examples/src/examples/graphics/area-picker.controls.mjs
deleted file mode 100644
index 4f9de80da92..00000000000
--- a/examples/src/examples/graphics/area-picker.controls.mjs
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, BooleanInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Ortho Camera' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'orthoCamera' },
-                value: observer.get('orthoCamera') || false
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/asset-viewer.controls.jsx b/examples/src/examples/graphics/asset-viewer.controls.jsx
new file mode 100644
index 00000000000..13aec7cb4fd
--- /dev/null
+++ b/examples/src/examples/graphics/asset-viewer.controls.jsx
@@ -0,0 +1,19 @@
+import { Button, Panel } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <Panel headerText='Asset'>
+            <Button text='Previous' onClick={() => observer.emit('previous')} />
+            <Button text='Next' onClick={() => observer.emit('next')} />
+        </Panel>
+    );
+}
diff --git a/examples/src/examples/graphics/asset-viewer.controls.mjs b/examples/src/examples/graphics/asset-viewer.controls.mjs
deleted file mode 100644
index dd4914d26f6..00000000000
--- a/examples/src/examples/graphics/asset-viewer.controls.mjs
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { Panel, Button } = ReactPCUI;
-    return jsx(
-        Panel,
-        { headerText: 'Asset' },
-        jsx(Button, {
-            text: 'Previous',
-            onClick: () => observer.emit('previous')
-        }),
-        jsx(Button, {
-            text: 'Next',
-            onClick: () => observer.emit('next')
-        })
-    );
-};
diff --git a/examples/src/examples/graphics/clustered-area-lights.controls.jsx b/examples/src/examples/graphics/clustered-area-lights.controls.jsx
new file mode 100644
index 00000000000..0d3120b97ba
--- /dev/null
+++ b/examples/src/examples/graphics/clustered-area-lights.controls.jsx
@@ -0,0 +1,37 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Material'>
+                <LabelGroup text='Gloss'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.material.gloss' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Metalness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.material.metalness' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/clustered-area-lights.controls.mjs b/examples/src/examples/graphics/clustered-area-lights.controls.mjs
deleted file mode 100644
index 6a740bc3fcb..00000000000
--- a/examples/src/examples/graphics/clustered-area-lights.controls.mjs
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Material' },
-            jsx(
-                LabelGroup,
-                { text: 'Gloss' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.material.gloss' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Metalness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.material.metalness' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.controls.jsx b/examples/src/examples/graphics/clustered-omni-shadows.controls.jsx
new file mode 100644
index 00000000000..9510a0eb936
--- /dev/null
+++ b/examples/src/examples/graphics/clustered-omni-shadows.controls.jsx
@@ -0,0 +1,66 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <Panel headerText='Settings'>
+            <LabelGroup text='Filter'>
+                <SelectInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'settings.shadowType' }}
+                    type='number'
+                    options={[
+                        { v: pc.SHADOW_PCF1_32F, t: 'PCF1_32F' },
+                        { v: pc.SHADOW_PCF3_32F, t: 'PCF3_32F' },
+                        { v: pc.SHADOW_PCF5_32F, t: 'PCF5_32F' },
+                        { v: pc.SHADOW_PCF1_16F, t: 'PCF1_16F' },
+                        { v: pc.SHADOW_PCF3_16F, t: 'PCF3_16F' },
+                        { v: pc.SHADOW_PCF5_16F, t: 'PCF5_16F' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Shadow Res'>
+                <SliderInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'settings.shadowAtlasResolution' }}
+                    min={512}
+                    max={4096}
+                    precision={0}
+                />
+            </LabelGroup>
+            <LabelGroup text='Shadows On'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'settings.shadowsEnabled' }}
+                    value={observer.get('settings.shadowsEnabled')}
+                />
+            </LabelGroup>
+            <LabelGroup text='Cookies On'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'settings.cookiesEnabled' }}
+                    value={observer.get('settings.cookiesEnabled')}
+                />
+            </LabelGroup>
+        </Panel>
+    );
+}
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs b/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs
deleted file mode 100644
index 5fe6edb4beb..00000000000
--- a/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return jsx(
-        Panel,
-        { headerText: 'Settings' },
-        jsx(
-            LabelGroup,
-            { text: 'Filter' },
-            jsx(SelectInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'settings.shadowType' },
-                type: 'number',
-                options: [
-                    { v: pc.SHADOW_PCF1_32F, t: 'PCF1_32F' },
-                    { v: pc.SHADOW_PCF3_32F, t: 'PCF3_32F' },
-                    { v: pc.SHADOW_PCF5_32F, t: 'PCF5_32F' },
-                    { v: pc.SHADOW_PCF1_16F, t: 'PCF1_16F' },
-                    { v: pc.SHADOW_PCF3_16F, t: 'PCF3_16F' },
-                    { v: pc.SHADOW_PCF5_16F, t: 'PCF5_16F' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Shadow Res' },
-            jsx(SliderInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'settings.shadowAtlasResolution' },
-                min: 512,
-                max: 4096,
-                precision: 0
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Shadows On' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'settings.shadowsEnabled' },
-                value: observer.get('settings.shadowsEnabled')
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Cookies On' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'settings.cookiesEnabled' },
-                value: observer.get('settings.cookiesEnabled')
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.controls.jsx b/examples/src/examples/graphics/clustered-spot-shadows.controls.jsx
new file mode 100644
index 00000000000..e1773e46f0f
--- /dev/null
+++ b/examples/src/examples/graphics/clustered-spot-shadows.controls.jsx
@@ -0,0 +1,138 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    Button,
+    Label,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Atlas'>
+                <LabelGroup text='Resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.shadowAtlasResolution' }}
+                        min={256}
+                        max={4096}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Split'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.atlasSplit' }}
+                        type='number'
+                        options={[
+                            { v: 0, t: 'Automatic' },
+                            { v: 1, t: '7 Shadows' },
+                            { v: 2, t: '12 Shadows' },
+                            { v: 3, t: '16 Shadows' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Filter'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.shadowType' }}
+                        type='number'
+                        options={[
+                            { v: pc.SHADOW_PCF1_32F, t: 'PCF1_32F' },
+                            { v: pc.SHADOW_PCF3_32F, t: 'PCF3_32F' },
+                            { v: pc.SHADOW_PCF5_32F, t: 'PCF5_32F' },
+                            { v: pc.SHADOW_PCF1_16F, t: 'PCF1_16F' },
+                            { v: pc.SHADOW_PCF3_16F, t: 'PCF3_16F' },
+                            { v: pc.SHADOW_PCF5_16F, t: 'PCF5_16F' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Lights'>
+                <LabelGroup text='Shadows On'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.shadowsEnabled' }}
+                        value={observer.get('settings.shadowsEnabled')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Cookies On'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.cookiesEnabled' }}
+                        value={observer.get('settings.cookiesEnabled')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Static'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.static' }}
+                        value={observer.get('settings.static')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shadow Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.shadowIntensity' }}
+                        min={0}
+                        max={1}
+                        value={observer.get('settings.shadowIntensity')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Cookie Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.cookieIntensity' }}
+                        min={0}
+                        max={1}
+                        value={observer.get('settings.cookieIntensity')}
+                    />
+                </LabelGroup>
+                <Button text='Add Light' onClick={() => observer.emit('add')} />
+                <Button text='Remove Light' onClick={() => observer.emit('remove')} />
+                <LabelGroup text='Light Count'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.numLights' }}
+                        value={observer.get('settings.numLights')}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Debug'>
+                <LabelGroup text='Cells'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.debug' }}
+                        value={observer.get('settings.debug')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Atlas'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.debugAtlas' }}
+                        value={observer.get('settings.debugAtlas')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs b/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs
deleted file mode 100644
index 9cfd29b39c3..00000000000
--- a/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs
+++ /dev/null
@@ -1,155 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, Button, Label, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Atlas' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.shadowAtlasResolution' },
-                    min: 256,
-                    max: 4096,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Split' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.atlasSplit' },
-                    type: 'number',
-                    options: [
-                        { v: 0, t: 'Automatic' },
-                        { v: 1, t: '7 Shadows' },
-                        { v: 2, t: '12 Shadows' },
-                        { v: 3, t: '16 Shadows' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Filter' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.shadowType' },
-                    type: 'number',
-                    options: [
-                        { v: pc.SHADOW_PCF1_32F, t: 'PCF1_32F' },
-                        { v: pc.SHADOW_PCF3_32F, t: 'PCF3_32F' },
-                        { v: pc.SHADOW_PCF5_32F, t: 'PCF5_32F' },
-                        { v: pc.SHADOW_PCF1_16F, t: 'PCF1_16F' },
-                        { v: pc.SHADOW_PCF3_16F, t: 'PCF3_16F' },
-                        { v: pc.SHADOW_PCF5_16F, t: 'PCF5_16F' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Lights' },
-            jsx(
-                LabelGroup,
-                { text: 'Shadows On' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.shadowsEnabled' },
-                    value: observer.get('settings.shadowsEnabled')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Cookies On' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.cookiesEnabled' },
-                    value: observer.get('settings.cookiesEnabled')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Static' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.static' },
-                    value: observer.get('settings.static')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shadow Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.shadowIntensity' },
-                    min: 0,
-                    max: 1,
-                    value: observer.get('settings.shadowIntensity')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Cookie Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.cookieIntensity' },
-                    min: 0,
-                    max: 1,
-                    value: observer.get('settings.cookieIntensity')
-                })
-            ),
-            jsx(Button, {
-                text: 'Add Light',
-                onClick: () => observer.emit('add')
-            }),
-            jsx(Button, {
-                text: 'Remove Light',
-                onClick: () => observer.emit('remove')
-            }),
-            jsx(
-                LabelGroup,
-                { text: 'Light Count' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.numLights' },
-                    value: observer.get('settings.numLights')
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Debug' },
-            jsx(
-                LabelGroup,
-                { text: 'Cells' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.debug' },
-                    value: observer.get('settings.debug')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Atlas' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.debugAtlas' },
-                    value: observer.get('settings.debugAtlas')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/custom-compose-shader.controls.jsx b/examples/src/examples/graphics/custom-compose-shader.controls.jsx
new file mode 100644
index 00000000000..84c5c402daa
--- /dev/null
+++ b/examples/src/examples/graphics/custom-compose-shader.controls.jsx
@@ -0,0 +1,52 @@
+import { BindingTwoWay, SelectInput, LabelGroup, SliderInput } from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='Tonemap'>
+                <SelectInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'data.sceneTonemapping' }}
+                    type='number'
+                    options={[
+                        { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
+                        { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
+                        { v: pc.TONEMAP_HEJL, t: 'HEJL' },
+                        { v: pc.TONEMAP_ACES, t: 'ACES' },
+                        { v: pc.TONEMAP_ACES2, t: 'ACES2' },
+                        { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='Pixel Size'>
+                <SliderInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'data.pixelSize' }}
+                    min={8}
+                    max={20}
+                    precision={0}
+                />
+            </LabelGroup>
+            <LabelGroup text='Intensity'>
+                <SliderInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'data.pixelationIntensity' }}
+                    min={0}
+                    max={1}
+                    precision={2}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/custom-compose-shader.controls.mjs b/examples/src/examples/graphics/custom-compose-shader.controls.mjs
deleted file mode 100644
index 5f359d1f25e..00000000000
--- a/examples/src/examples/graphics/custom-compose-shader.controls.mjs
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, SelectInput, LabelGroup, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'Tonemap' },
-            jsx(SelectInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'data.sceneTonemapping' },
-                type: 'number',
-                options: [
-                    { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
-                    { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
-                    { v: pc.TONEMAP_HEJL, t: 'HEJL' },
-                    { v: pc.TONEMAP_ACES, t: 'ACES' },
-                    { v: pc.TONEMAP_ACES2, t: 'ACES2' },
-                    { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Pixel Size' },
-            jsx(SliderInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'data.pixelSize' },
-                min: 8,
-                max: 20,
-                precision: 0
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Intensity' },
-            jsx(SliderInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'data.pixelationIntensity' },
-                min: 0,
-                max: 1,
-                precision: 2
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/depth-of-field.controls.jsx b/examples/src/examples/graphics/depth-of-field.controls.jsx
new file mode 100644
index 00000000000..3540b79afa8
--- /dev/null
+++ b/examples/src/examples/graphics/depth-of-field.controls.jsx
@@ -0,0 +1,137 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput,
+    Label
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Scene Rendering'>
+                <LabelGroup text='Debug'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.debug' }}
+                        type='number'
+                        options={[
+                            { v: 0, t: 'NONE' },
+                            { v: 1, t: 'BLOOM' },
+                            { v: 2, t: 'VIGNETTE' },
+                            { v: 3, t: 'DOF-COC' },
+                            { v: 4, t: 'DOF-BLUR' },
+                            { v: 5, t: 'SCENE' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Depth of Field'>
+                <LabelGroup text='Enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Near Blur'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.nearBlur' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Focus Distance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.focusDistance' }}
+                        min={0}
+                        max={800}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Focus Range'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.focusRange' }}
+                        min={0}
+                        max={300}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='High Quality'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.highQuality' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blur Radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.blurRadius' }}
+                        min={1}
+                        max={20}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blur Rings'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.blurRings' }}
+                        min={2}
+                        max={10}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blur Ring Points'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof.blurRingPoints' }}
+                        min={2}
+                        max={10}
+                        precision={0}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='DOF Stats'>
+                <LabelGroup text='Blur Samples'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.blurSamples' }}
+                        value={observer.get('data.stats.blurSamples')}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='TAA (Work in Progress)'>
+                <LabelGroup text='Enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='jitter'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa.jitter' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/depth-of-field.controls.mjs b/examples/src/examples/graphics/depth-of-field.controls.mjs
deleted file mode 100644
index d6d2224fa91..00000000000
--- a/examples/src/examples/graphics/depth-of-field.controls.mjs
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Scene Rendering' },
-            jsx(
-                LabelGroup,
-                { text: 'Debug' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.debug' },
-                    type: 'number',
-                    options: [
-                        { v: 0, t: 'NONE' },
-                        { v: 1, t: 'BLOOM' },
-                        { v: 2, t: 'VIGNETTE' },
-                        { v: 3, t: 'DOF-COC' },
-                        { v: 4, t: 'DOF-BLUR' },
-                        { v: 5, t: 'SCENE' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Depth of Field' },
-            jsx(
-                LabelGroup,
-                { text: 'Enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Near Blur' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.nearBlur' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Focus Distance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.focusDistance' },
-                    min: 0,
-                    max: 800,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Focus Range' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.focusRange' },
-                    min: 0,
-                    max: 300,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'High Quality' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.highQuality' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blur Radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.blurRadius' },
-                    min: 1,
-                    max: 20,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blur Rings' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.blurRings' },
-                    min: 2,
-                    max: 10,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blur Ring Points' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof.blurRingPoints' },
-                    min: 2,
-                    max: 10,
-                    precision: 0
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'DOF Stats' },
-            jsx(
-                LabelGroup,
-                { text: 'Blur Samples' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.blurSamples' },
-                    value: observer.get('data.stats.blurSamples')
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'TAA (Work in Progress)' },
-            jsx(
-                LabelGroup,
-                { text: 'Enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'jitter' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa.jitter' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/dithered-transparency.controls.jsx b/examples/src/examples/graphics/dithered-transparency.controls.jsx
new file mode 100644
index 00000000000..823f3945835
--- /dev/null
+++ b/examples/src/examples/graphics/dithered-transparency.controls.jsx
@@ -0,0 +1,79 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    BooleanInput,
+    SelectInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Opacity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.opacity' }}
+                        min={0.0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Alpha Dither'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.alphaDither' }}
+                        min={0.0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Dither Color'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.opacityDither' }}
+                        type='string'
+                        options={[
+                            { v: pc.DITHER_NONE, t: 'None' },
+                            { v: pc.DITHER_BAYER8, t: 'Bayer8' },
+                            { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' },
+                            { v: pc.DITHER_IGNNOISE, t: 'IGNNoise' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Dither Shadow'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.opacityShadowDither' }}
+                        type='string'
+                        options={[
+                            { v: pc.DITHER_NONE, t: 'None' },
+                            { v: pc.DITHER_BAYER8, t: 'Bayer8' },
+                            { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' },
+                            { v: pc.DITHER_IGNNOISE, t: 'IGNNoise' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='TAA (WIP)'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/dithered-transparency.controls.mjs b/examples/src/examples/graphics/dithered-transparency.controls.mjs
deleted file mode 100644
index 83a173cc91f..00000000000
--- a/examples/src/examples/graphics/dithered-transparency.controls.mjs
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Opacity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.opacity' },
-                    min: 0.0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Alpha Dither' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.alphaDither' },
-                    min: 0.0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Dither Color' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.opacityDither' },
-                    type: 'string',
-                    options: [
-                        { v: pc.DITHER_NONE, t: 'None' },
-                        { v: pc.DITHER_BAYER8, t: 'Bayer8' },
-                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' },
-                        { v: pc.DITHER_IGNNOISE, t: 'IGNNoise' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Dither Shadow' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.opacityShadowDither' },
-                    type: 'string',
-                    options: [
-                        { v: pc.DITHER_NONE, t: 'None' },
-                        { v: pc.DITHER_BAYER8, t: 'Bayer8' },
-                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' },
-                        { v: pc.DITHER_IGNNOISE, t: 'IGNNoise' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'TAA (WIP)' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/hdr.controls.jsx b/examples/src/examples/graphics/hdr.controls.jsx
new file mode 100644
index 00000000000..e943cf53ef5
--- /dev/null
+++ b/examples/src/examples/graphics/hdr.controls.jsx
@@ -0,0 +1,59 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    SelectInput,
+    LabelGroup,
+    Panel,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Rendering'>
+                <LabelGroup text='HDR'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.hdr' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <LabelGroup text='Scene Tonemap'>
+                <SelectInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'data.sceneTonemapping' }}
+                    type='number'
+                    options={[
+                        { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
+                        { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
+                        { v: pc.TONEMAP_HEJL, t: 'HEJL' },
+                        { v: pc.TONEMAP_ACES, t: 'ACES' },
+                        { v: pc.TONEMAP_ACES2, t: 'ACES2' },
+                        { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
+                    ]}
+                />
+            </LabelGroup>
+            <LabelGroup text='LUT Intensity'>
+                <SliderInput
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'data.colorLutIntensity' }}
+                    min={0}
+                    max={1}
+                    precision={2}
+                />
+            </LabelGroup>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/hdr.controls.mjs b/examples/src/examples/graphics/hdr.controls.mjs
deleted file mode 100644
index 55a350384fc..00000000000
--- a/examples/src/examples/graphics/hdr.controls.mjs
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, SelectInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Rendering' },
-            jsx(
-                LabelGroup,
-                { text: 'HDR' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.hdr' }
-                })
-            )
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'Scene Tonemap' },
-            jsx(SelectInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'data.sceneTonemapping' },
-                type: 'number',
-                options: [
-                    { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
-                    { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
-                    { v: pc.TONEMAP_HEJL, t: 'HEJL' },
-                    { v: pc.TONEMAP_ACES, t: 'ACES' },
-                    { v: pc.TONEMAP_ACES2, t: 'ACES2' },
-                    { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
-                ]
-            })
-        ),
-        jsx(
-            LabelGroup,
-            { text: 'LUT Intensity' },
-            jsx(SliderInput, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'data.colorLutIntensity' },
-                min: 0,
-                max: 1,
-                precision: 2
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/integer-textures.controls.jsx b/examples/src/examples/graphics/integer-textures.controls.jsx
new file mode 100644
index 00000000000..bb4801927e6
--- /dev/null
+++ b/examples/src/examples/graphics/integer-textures.controls.jsx
@@ -0,0 +1,54 @@
+import {
+    BindingTwoWay,
+    Container,
+    Button,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    SelectInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Sand simulation'>
+                <LabelGroup text='Brush'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.brush' }}
+                        type='string'
+                        value={1}
+                        options={[
+                            { v: 1, t: 'Sand' },
+                            { v: 2, t: 'Orange Sand' },
+                            { v: 3, t: 'Gray Sand' },
+                            { v: 4, t: 'Stone' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Brush size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.brushSize' }}
+                        value={8}
+                        min={1}
+                        max={16}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <Container flex flexGrow={1}>
+                    <Button text='Reset' onClick={() => observer.emit('reset')} />
+                </Container>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/integer-textures.controls.mjs b/examples/src/examples/graphics/integer-textures.controls.mjs
deleted file mode 100644
index a76de55caa1..00000000000
--- a/examples/src/examples/graphics/integer-textures.controls.mjs
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
-    const { BindingTwoWay, Container, Button, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Sand simulation' },
-            jsx(
-                LabelGroup,
-                { text: 'Brush' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.brush' },
-                    type: 'string',
-                    value: 1,
-                    options: [
-                        { v: 1, t: 'Sand' },
-                        { v: 2, t: 'Orange Sand' },
-                        { v: 3, t: 'Gray Sand' },
-                        { v: 4, t: 'Stone' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Brush size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.brushSize' },
-                    value: 8,
-                    min: 1,
-                    max: 16,
-                    precision: 0
-                })
-            ),
-            jsx(
-                Container,
-                { flex: true, flexGrow: 1 },
-                jsx(Button, {
-                    text: 'Reset',
-                    onClick: () => observer.emit('reset')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/light-physical-units.controls.jsx b/examples/src/examples/graphics/light-physical-units.controls.jsx
new file mode 100644
index 00000000000..ab21c6b7343
--- /dev/null
+++ b/examples/src/examples/graphics/light-physical-units.controls.jsx
@@ -0,0 +1,119 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Lights'>
+                <LabelGroup text='Rect (lm)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.rect.luminance' }}
+                        min={0.0}
+                        max={800000.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Point (lm)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.point.luminance' }}
+                        min={0.0}
+                        max={800000.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Spot (lm)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.spot.luminance' }}
+                        min={0.0}
+                        max={200000.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Spot angle'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.spot.aperture' }}
+                        min={1.0}
+                        max={90.0}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Aperture (F/x)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.camera.aperture' }}
+                        min={1.0}
+                        max={16.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shutter (1/x) s'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.camera.shutter' }}
+                        min={1.0}
+                        max={1000.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='ISO'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.camera.sensitivity' }}
+                        min={100.0}
+                        max={1000.0}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Scene'>
+                <LabelGroup text='Animate'>
+                    <BooleanInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.camera.animate' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Physical'>
+                    <BooleanInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.scene.physicalUnits' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Skylight'>
+                    <BooleanInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.scene.sky' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Sky (lm/m2)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.sky.luminance' }}
+                        min={0.0}
+                        max={100000.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Sun (lm/m2)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.sun.luminance' }}
+                        min={0.0}
+                        max={100000.0}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/light-physical-units.controls.mjs b/examples/src/examples/graphics/light-physical-units.controls.mjs
deleted file mode 100644
index 0775c8c043d..00000000000
--- a/examples/src/examples/graphics/light-physical-units.controls.mjs
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Lights' },
-            jsx(
-                LabelGroup,
-                { text: 'Rect (lm)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.rect.luminance' },
-                    min: 0.0,
-                    max: 800000.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Point (lm)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.point.luminance' },
-                    min: 0.0,
-                    max: 800000.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Spot (lm)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.spot.luminance' },
-                    min: 0.0,
-                    max: 200000.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Spot angle' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.spot.aperture' },
-                    min: 1.0,
-                    max: 90.0
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Aperture (F/x)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.camera.aperture' },
-                    min: 1.0,
-                    max: 16.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shutter (1/x) s' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.camera.shutter' },
-                    min: 1.0,
-                    max: 1000.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'ISO' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.camera.sensitivity' },
-                    min: 100.0,
-                    max: 1000.0
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Scene' },
-            jsx(
-                LabelGroup,
-                { text: 'Animate' },
-                jsx(BooleanInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.camera.animate' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Physical' },
-                jsx(BooleanInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.scene.physicalUnits' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Skylight' },
-                jsx(BooleanInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.scene.sky' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Sky (lm/m2)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.sky.luminance' },
-                    min: 0.0,
-                    max: 100000.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Sun (lm/m2)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.sun.luminance' },
-                    min: 0.0,
-                    max: 100000.0
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/lights-baked-a-o.controls.jsx b/examples/src/examples/graphics/lights-baked-a-o.controls.jsx
new file mode 100644
index 00000000000..e7042053990
--- /dev/null
+++ b/examples/src/examples/graphics/lights-baked-a-o.controls.jsx
@@ -0,0 +1,164 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    Label,
+    LabelGroup,
+    Panel,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Lightmap Filter Settings'>
+                <LabelGroup text='enable'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.settings.lightmapFilterEnabled' }}
+                        value={observer.get('data.settings.lightmapFilterEnabled')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='range'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.settings.lightmapFilterRange' }}
+                        value={observer.get('data.settings.lightmapFilterRange')}
+                        min={1}
+                        max={20}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='smoothness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.settings.lightmapFilterSmoothness' }}
+                        value={observer.get('data.settings.lightmapFilterSmoothness')}
+                        min={0.1}
+                        max={2}
+                        precision={1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Ambient light'>
+                <LabelGroup text='bake'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ambient.ambientBake' }}
+                        value={observer.get('data.ambient.ambientBake')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='cubemap'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ambient.cubemap' }}
+                        value={observer.get('data.ambient.cubemap')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='hemisphere'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ambient.hemisphere' }}
+                        value={observer.get('data.ambient.hemisphere')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ambient.ambientBakeNumSamples' }}
+                        value={observer.get('data.ambient.ambientBakeNumSamples')}
+                        max={64}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='contrast'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ambient.ambientBakeOcclusionContrast' }}
+                        value={observer.get('data.ambient.ambientBakeOcclusionContrast')}
+                        min={-1}
+                        max={1}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='brightness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ambient.ambientBakeOcclusionBrightness' }}
+                        value={observer.get('data.ambient.ambientBakeOcclusionBrightness')}
+                        min={-1}
+                        max={1}
+                        precision={1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Directional light'>
+                <LabelGroup text='enable'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.directional.enabled' }}
+                        value={observer.get('data.directional.enabled')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='bake'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.directional.bake' }}
+                        value={observer.get('data.directional.bake')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.directional.bakeNumSamples' }}
+                        value={observer.get('data.directional.bakeNumSamples')}
+                        max={64}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='area'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.directional.bakeArea' }}
+                        value={observer.get('data.directional.bakeArea')}
+                        max={40}
+                        precision={0}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Other lights'>
+                <LabelGroup text='enable'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.other.enabled' }}
+                        value={observer.get('data.other.enabled')}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Bake stats'>
+                <LabelGroup text='duration'>
+                    <Label
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.stats.duration' }}
+                        value={observer.get('data.stats.duration')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/lights-baked-a-o.controls.mjs b/examples/src/examples/graphics/lights-baked-a-o.controls.mjs
deleted file mode 100644
index d878a7a2321..00000000000
--- a/examples/src/examples/graphics/lights-baked-a-o.controls.mjs
+++ /dev/null
@@ -1,189 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, Label, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Lightmap Filter Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'enable' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.settings.lightmapFilterEnabled' },
-                    value: observer.get('data.settings.lightmapFilterEnabled')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'range' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.settings.lightmapFilterRange' },
-                    value: observer.get('data.settings.lightmapFilterRange'),
-                    min: 1,
-                    max: 20,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'smoothness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.settings.lightmapFilterSmoothness' },
-                    value: observer.get('data.settings.lightmapFilterSmoothness'),
-                    min: 0.1,
-                    max: 2,
-                    precision: 1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Ambient light' },
-            jsx(
-                LabelGroup,
-                { text: 'bake' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ambient.ambientBake' },
-                    value: observer.get('data.ambient.ambientBake')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'cubemap' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ambient.cubemap' },
-                    value: observer.get('data.ambient.cubemap')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'hemisphere' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ambient.hemisphere' },
-                    value: observer.get('data.ambient.hemisphere')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ambient.ambientBakeNumSamples' },
-                    value: observer.get('data.ambient.ambientBakeNumSamples'),
-                    max: 64,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'contrast' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ambient.ambientBakeOcclusionContrast' },
-                    value: observer.get('data.ambient.ambientBakeOcclusionContrast'),
-                    min: -1,
-                    max: 1,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'brightness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ambient.ambientBakeOcclusionBrightness' },
-                    value: observer.get('data.ambient.ambientBakeOcclusionBrightness'),
-                    min: -1,
-                    max: 1,
-                    precision: 1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Directional light' },
-            jsx(
-                LabelGroup,
-                { text: 'enable' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.directional.enabled' },
-                    value: observer.get('data.directional.enabled')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'bake' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.directional.bake' },
-                    value: observer.get('data.directional.bake')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.directional.bakeNumSamples' },
-                    value: observer.get('data.directional.bakeNumSamples'),
-                    max: 64,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'area' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.directional.bakeArea' },
-                    value: observer.get('data.directional.bakeArea'),
-                    max: 40,
-                    precision: 0
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Other lights' },
-            jsx(
-                LabelGroup,
-                { text: 'enable' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.other.enabled' },
-                    value: observer.get('data.other.enabled')
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Bake stats' },
-            jsx(
-                LabelGroup,
-                { text: 'duration' },
-                jsx(Label, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.stats.duration' },
-                    value: observer.get('data.stats.duration')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/lights-baked.controls.jsx b/examples/src/examples/graphics/lights-baked.controls.jsx
new file mode 100644
index 00000000000..0014c481717
--- /dev/null
+++ b/examples/src/examples/graphics/lights-baked.controls.jsx
@@ -0,0 +1,51 @@
+import { BindingTwoWay, BooleanInput, LabelGroup, Panel } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Lights'>
+                <LabelGroup text='🟢 Omni'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.lights.omni' }}
+                        value={observer.get('data.lights.omni')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='🔴 Spot'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.lights.spot' }}
+                        value={observer.get('data.lights.spot')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='🟡 Directional'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.lights.directional' }}
+                        value={observer.get('data.lights.directional')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='    🟡 Soft'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.lights.soft' }}
+                        value={observer.get('data.lights.soft')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/lights-baked.controls.mjs b/examples/src/examples/graphics/lights-baked.controls.mjs
deleted file mode 100644
index 39712d29bfc..00000000000
--- a/examples/src/examples/graphics/lights-baked.controls.mjs
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Lights' },
-            jsx(
-                LabelGroup,
-                { text: '🟢 Omni' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.lights.omni' },
-                    value: observer.get('data.lights.omni')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: '🔴 Spot' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.lights.spot' },
-                    value: observer.get('data.lights.spot')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: '🟡 Directional' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.lights.directional' },
-                    value: observer.get('data.lights.directional')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: '    🟡 Soft' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.lights.soft' },
-                    value: observer.get('data.lights.soft')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/lights.controls.jsx b/examples/src/examples/graphics/lights.controls.jsx
new file mode 100644
index 00000000000..8a71cd7f080
--- /dev/null
+++ b/examples/src/examples/graphics/lights.controls.jsx
@@ -0,0 +1,98 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='OMNI LIGHT [KEY_1]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.omni.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.omni.intensity' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='shadow intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.omni.shadowIntensity' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='cookie'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.omni.cookieIntensity' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='SPOT LIGHT [KEY_2]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.spot.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.spot.intensity' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='shadow intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.spot.shadowIntensity' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='cookie'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.spot.cookieIntensity' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='DIRECTIONAL LIGHT [KEY_3]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.directional.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.directional.intensity' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='shadow intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'lights.directional.shadowIntensity' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/lights.controls.mjs b/examples/src/examples/graphics/lights.controls.mjs
deleted file mode 100644
index 21de0d6df7f..00000000000
--- a/examples/src/examples/graphics/lights.controls.mjs
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'OMNI LIGHT [KEY_1]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.omni.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.omni.intensity' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'shadow intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.omni.shadowIntensity' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'cookie' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.omni.cookieIntensity' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'SPOT LIGHT [KEY_2]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.spot.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.spot.intensity' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'shadow intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.spot.shadowIntensity' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'cookie' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.spot.cookieIntensity' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'DIRECTIONAL LIGHT [KEY_3]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.directional.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.directional.intensity' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'shadow intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'lights.directional.shadowIntensity' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/multi-view.controls.jsx b/examples/src/examples/graphics/multi-view.controls.jsx
new file mode 100644
index 00000000000..b4170b3d53a
--- /dev/null
+++ b/examples/src/examples/graphics/multi-view.controls.jsx
@@ -0,0 +1,41 @@
+import { BindingTwoWay, LabelGroup, Panel, SelectInput } from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Debug Shader Rendering'>
+                <LabelGroup text='Mode'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.shaderPassName' }}
+                        type='string'
+                        options={[
+                            { v: pc.SHADERPASS_FORWARD, t: 'None' },
+                            { v: pc.SHADERPASS_ALBEDO, t: 'Albedo' },
+                            { v: pc.SHADERPASS_OPACITY, t: 'Opacity' },
+                            { v: pc.SHADERPASS_WORLDNORMAL, t: 'World Normal' },
+                            { v: pc.SHADERPASS_SPECULARITY, t: 'Specularity' },
+                            { v: pc.SHADERPASS_GLOSS, t: 'Gloss' },
+                            { v: pc.SHADERPASS_METALNESS, t: 'Metalness' },
+                            { v: pc.SHADERPASS_AO, t: 'AO' },
+                            { v: pc.SHADERPASS_EMISSION, t: 'Emission' },
+                            { v: pc.SHADERPASS_LIGHTING, t: 'Lighting' },
+                            { v: pc.SHADERPASS_UV0, t: 'UV0' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/multi-view.controls.mjs b/examples/src/examples/graphics/multi-view.controls.mjs
deleted file mode 100644
index d6e7917cdc4..00000000000
--- a/examples/src/examples/graphics/multi-view.controls.mjs
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Debug Shader Rendering' },
-            jsx(
-                LabelGroup,
-                { text: 'Mode' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.shaderPassName' },
-                    type: 'string',
-                    options: [
-                        { v: pc.SHADERPASS_FORWARD, t: 'None' },
-                        { v: pc.SHADERPASS_ALBEDO, t: 'Albedo' },
-                        { v: pc.SHADERPASS_OPACITY, t: 'Opacity' },
-                        { v: pc.SHADERPASS_WORLDNORMAL, t: 'World Normal' },
-                        { v: pc.SHADERPASS_SPECULARITY, t: 'Specularity' },
-                        { v: pc.SHADERPASS_GLOSS, t: 'Gloss' },
-                        { v: pc.SHADERPASS_METALNESS, t: 'Metalness' },
-                        { v: pc.SHADERPASS_AO, t: 'AO' },
-                        { v: pc.SHADERPASS_EMISSION, t: 'Emission' },
-                        { v: pc.SHADERPASS_LIGHTING, t: 'Lighting' },
-                        { v: pc.SHADERPASS_UV0, t: 'UV0' }
-                    ]
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/particles-mesh.controls.jsx b/examples/src/examples/graphics/particles-mesh.controls.jsx
new file mode 100644
index 00000000000..be23ccba525
--- /dev/null
+++ b/examples/src/examples/graphics/particles-mesh.controls.jsx
@@ -0,0 +1,64 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    BooleanInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Lifetime'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.lifetime' }}
+                        min={0}
+                        max={5}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Num Particles'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.numParticles' }}
+                        min={1}
+                        max={1000}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Lighting'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.lighting' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Align To Motion'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.alignToMotion' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/particles-mesh.controls.mjs b/examples/src/examples/graphics/particles-mesh.controls.mjs
deleted file mode 100644
index e1afd7b8136..00000000000
--- a/examples/src/examples/graphics/particles-mesh.controls.mjs
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Lifetime' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.lifetime' },
-                    min: 0,
-                    max: 5,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Num Particles' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.numParticles' },
-                    min: 1,
-                    max: 1000,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Lighting' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.lighting' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Align To Motion' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.alignToMotion' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/particles-snow.controls.jsx b/examples/src/examples/graphics/particles-snow.controls.jsx
new file mode 100644
index 00000000000..82eeacab66b
--- /dev/null
+++ b/examples/src/examples/graphics/particles-snow.controls.jsx
@@ -0,0 +1,27 @@
+import { BindingTwoWay, LabelGroup, Panel, BooleanInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Options'>
+                <LabelGroup text='Soft'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.soft' }}
+                        value={observer.get('data.soft')}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/particles-snow.controls.mjs b/examples/src/examples/graphics/particles-snow.controls.mjs
deleted file mode 100644
index 147d17e4c16..00000000000
--- a/examples/src/examples/graphics/particles-snow.controls.mjs
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, BooleanInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Options' },
-            jsx(
-                LabelGroup,
-                { text: 'Soft' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.soft' },
-                    value: observer.get('data.soft')
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/portal.controls.jsx b/examples/src/examples/graphics/portal.controls.jsx
new file mode 100644
index 00000000000..7ae467df46e
--- /dev/null
+++ b/examples/src/examples/graphics/portal.controls.jsx
@@ -0,0 +1,27 @@
+import { BindingTwoWay, BooleanInput, LabelGroup, Panel } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Camera Frame'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'cameraFrame' }}
+                        value={observer.get('cameraFrame') || false}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/portal.controls.mjs b/examples/src/examples/graphics/portal.controls.mjs
deleted file mode 100644
index 33853778932..00000000000
--- a/examples/src/examples/graphics/portal.controls.mjs
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Camera Frame' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'cameraFrame' },
-                    value: observer.get('cameraFrame') || false
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/post-effects.controls.jsx b/examples/src/examples/graphics/post-effects.controls.jsx
new file mode 100644
index 00000000000..b7cd7b9e066
--- /dev/null
+++ b/examples/src/examples/graphics/post-effects.controls.jsx
@@ -0,0 +1,162 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='BLOOM [KEY_1]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.bloom.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.bloom.bloomIntensity' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='threshold'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.bloom.bloomThreshold' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='blur amount'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.bloom.blurAmount' }}
+                        min={1}
+                        max={30}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='SEPIA [KEY_2]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.sepia.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='amount'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.sepia.amount' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='VIGNETTE [KEY_3]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.vignette.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='darkness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.vignette.darkness' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='offset'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.vignette.offset' }}
+                        max={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='BOKEH [KEY_4]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.bokeh.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='aperture'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.bokeh.aperture' }}
+                        max={0.2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='max blur'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.bokeh.maxBlur' }}
+                        max={0.1}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='SSAO [KEY_5]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.ssao.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.ssao.radius' }}
+                        max={10}
+                    />
+                </LabelGroup>
+                <LabelGroup text='samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.ssao.samples' }}
+                        max={32}
+                    />
+                </LabelGroup>
+                <LabelGroup text='brightness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.ssao.brightness' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='downscale'>
+                    <SelectInput
+                        options={[
+                            { v: 1, t: 'None' },
+                            { v: 2, t: '50%' },
+                            { v: '4', t: '25%' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'scripts.ssao.downscale' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='POST-PROCESS UI [KEY_6]'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.postProcessUI.enabled' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/post-effects.controls.mjs b/examples/src/examples/graphics/post-effects.controls.mjs
deleted file mode 100644
index 44b7f69cc37..00000000000
--- a/examples/src/examples/graphics/post-effects.controls.mjs
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'BLOOM [KEY_1]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.bloom.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.bloom.bloomIntensity' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'threshold' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.bloom.bloomThreshold' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'blur amount' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.bloom.blurAmount' },
-                    min: 1,
-                    max: 30
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'SEPIA [KEY_2]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.sepia.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'amount' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.sepia.amount' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'VIGNETTE [KEY_3]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.vignette.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'darkness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.vignette.darkness' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'offset' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.vignette.offset' },
-                    max: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'BOKEH [KEY_4]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.bokeh.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'aperture' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.bokeh.aperture' },
-                    max: 0.2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'max blur' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.bokeh.maxBlur' },
-                    max: 0.1
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'SSAO [KEY_5]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.ssao.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.ssao.radius' },
-                    max: 10
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.ssao.samples' },
-                    max: 32
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'brightness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.ssao.brightness' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'downscale' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 1, t: 'None' },
-                        { v: 2, t: '50%' },
-                        { v: '4', t: '25%' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'scripts.ssao.downscale' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'POST-PROCESS UI [KEY_6]' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.postProcessUI.enabled' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/post-processing.controls.jsx b/examples/src/examples/graphics/post-processing.controls.jsx
new file mode 100644
index 00000000000..d474dd8ad76
--- /dev/null
+++ b/examples/src/examples/graphics/post-processing.controls.jsx
@@ -0,0 +1,295 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    ColorPicker,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <LabelGroup text='enabled'>
+                <BooleanInput
+                    type='toggle'
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'data.enabled' }}
+                />
+            </LabelGroup>
+            <Panel headerText='Scene Rendering'>
+                <LabelGroup text='resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.scale' }}
+                        min={0.2}
+                        max={1}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='background'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.background' }}
+                        min={0}
+                        max={50}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='emissive'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.emissive' }}
+                        min={0}
+                        max={400}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Tonemapping'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.tonemapping' }}
+                        type='number'
+                        options={[
+                            { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
+                            { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
+                            { v: pc.TONEMAP_HEJL, t: 'HEJL' },
+                            { v: pc.TONEMAP_ACES, t: 'ACES' },
+                            { v: pc.TONEMAP_ACES2, t: 'ACES2' },
+                            { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Debug'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.debug' }}
+                        type='number'
+                        options={[
+                            { v: 0, t: 'NONE' },
+                            { v: 1, t: 'BLOOM' },
+                            { v: 2, t: 'VIGNETTE' },
+                            { v: 3, t: 'SCENE' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='BLOOM'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.bloom.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.bloom.intensity' }}
+                        min={0}
+                        max={100}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='blur level'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.bloom.blurLevel' }}
+                        min={1}
+                        max={16}
+                        precision={0}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Grading'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.grading.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='saturation'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.grading.saturation' }}
+                        min={0}
+                        max={2}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='brightness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.grading.brightness' }}
+                        min={0}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='contrast'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.grading.contrast' }}
+                        min={0.5}
+                        max={1.5}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Color Enhance'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='shadows'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.shadows' }}
+                        min={-3}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='highlights'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.highlights' }}
+                        min={-3}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='midtones'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.midtones' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='vibrance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.vibrance' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='dehaze'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.dehaze' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Vignette'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.vignette.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='inner'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.vignette.inner' }}
+                        min={0}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='outer'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.vignette.outer' }}
+                        min={0}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='curvature'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.vignette.curvature' }}
+                        min={0.01}
+                        max={10}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.vignette.intensity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='color'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.vignette.color' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Fringing'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.fringing.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.fringing.intensity' }}
+                        min={0}
+                        max={100}
+                        precision={0}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='TAA (Work in Progress)'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='jitter'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa.jitter' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/post-processing.controls.mjs b/examples/src/examples/graphics/post-processing.controls.mjs
deleted file mode 100644
index eca4f5fed97..00000000000
--- a/examples/src/examples/graphics/post-processing.controls.mjs
+++ /dev/null
@@ -1,351 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, ColorPicker, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            LabelGroup,
-            { text: 'enabled' },
-            jsx(BooleanInput, {
-                type: 'toggle',
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'data.enabled' }
-            })
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Scene Rendering' },
-            jsx(
-                LabelGroup,
-                { text: 'resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.scale' },
-                    min: 0.2,
-                    max: 1,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'background' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.background' },
-                    min: 0,
-                    max: 50,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'emissive' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.emissive' },
-                    min: 0,
-                    max: 400,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Tonemapping' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.tonemapping' },
-                    type: 'number',
-                    options: [
-                        { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
-                        { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
-                        { v: pc.TONEMAP_HEJL, t: 'HEJL' },
-                        { v: pc.TONEMAP_ACES, t: 'ACES' },
-                        { v: pc.TONEMAP_ACES2, t: 'ACES2' },
-                        { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Debug' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.debug' },
-                    type: 'number',
-                    options: [
-                        { v: 0, t: 'NONE' },
-                        { v: 1, t: 'BLOOM' },
-                        { v: 2, t: 'VIGNETTE' },
-                        { v: 3, t: 'SCENE' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'BLOOM' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.bloom.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.bloom.intensity' },
-                    min: 0,
-                    max: 100,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'blur level' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.bloom.blurLevel' },
-                    min: 1,
-                    max: 16,
-                    precision: 0
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Grading' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.grading.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'saturation' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.grading.saturation' },
-                    min: 0,
-                    max: 2,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'brightness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.grading.brightness' },
-                    min: 0,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'contrast' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.grading.contrast' },
-                    min: 0.5,
-                    max: 1.5,
-                    precision: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Color Enhance' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'shadows' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.shadows' },
-                    min: -3,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'highlights' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.highlights' },
-                    min: -3,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'midtones' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.midtones' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'vibrance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.vibrance' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'dehaze' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.dehaze' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Vignette' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.vignette.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'inner' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.vignette.inner' },
-                    min: 0,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'outer' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.vignette.outer' },
-                    min: 0,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'curvature' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.vignette.curvature' },
-                    min: 0.01,
-                    max: 10,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.vignette.intensity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'color' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.vignette.color' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Fringing' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.fringing.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.fringing.intensity' },
-                    min: 0,
-                    max: 100,
-                    precision: 0
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'TAA (Work in Progress)' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'jitter' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa.jitter' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/reflection-box.controls.jsx b/examples/src/examples/graphics/reflection-box.controls.jsx
new file mode 100644
index 00000000000..e838fe68941
--- /dev/null
+++ b/examples/src/examples/graphics/reflection-box.controls.jsx
@@ -0,0 +1,68 @@
+import { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Update'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.updateFrequency' }}
+                        type='number'
+                        options={[
+                            { v: 0, t: 'Once' },
+                            { v: 1, t: 'Every frame' },
+                            { v: 10, t: 'Every 10 frames' },
+                            { v: 30, t: 'Every 30 frames' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Gloss'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.gloss' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Metalness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.metalness' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Reflectivity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.reflectivity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Bumpiness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.bumpiness' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/reflection-box.controls.mjs b/examples/src/examples/graphics/reflection-box.controls.mjs
deleted file mode 100644
index c9c1fcbcabd..00000000000
--- a/examples/src/examples/graphics/reflection-box.controls.mjs
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Update' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.updateFrequency' },
-                    type: 'number',
-                    options: [
-                        { v: 0, t: 'Once' },
-                        { v: 1, t: 'Every frame' },
-                        { v: 10, t: 'Every 10 frames' },
-                        { v: 30, t: 'Every 30 frames' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Gloss' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.gloss' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Metalness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.metalness' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Reflectivity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.reflectivity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Bumpiness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.bumpiness' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/reflection-planar-blurred.controls.jsx b/examples/src/examples/graphics/reflection-planar-blurred.controls.jsx
new file mode 100644
index 00000000000..bd9b8b4abea
--- /dev/null
+++ b/examples/src/examples/graphics/reflection-planar-blurred.controls.jsx
@@ -0,0 +1,73 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Blurred Planar Reflection'>
+                <LabelGroup text='Resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.resolution' }}
+                        min={0.1}
+                        max={1.0}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blur Amount'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.blurAmount' }}
+                        min={0}
+                        max={1.0}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.intensity' }}
+                        min={0}
+                        max={1.0}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Fade Strength'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.fadeStrength' }}
+                        min={0.1}
+                        max={5.0}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Angle Fade'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.angleFade' }}
+                        min={0.1}
+                        max={1.0}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Height Range'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.heightRange' }}
+                        min={0.001}
+                        max={1.0}
+                        precision={3}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/reflection-planar-blurred.controls.mjs b/examples/src/examples/graphics/reflection-planar-blurred.controls.mjs
deleted file mode 100644
index 4a0ee638b45..00000000000
--- a/examples/src/examples/graphics/reflection-planar-blurred.controls.mjs
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Blurred Planar Reflection' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.resolution' },
-                    min: 0.1,
-                    max: 1.0,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blur Amount' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.blurAmount' },
-                    min: 0,
-                    max: 1.0,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.intensity' },
-                    min: 0,
-                    max: 1.0,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Fade Strength' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.fadeStrength' },
-                    min: 0.1,
-                    max: 5.0,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Angle Fade' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.angleFade' },
-                    min: 0.1,
-                    max: 1.0,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Height Range' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.heightRange' },
-                    min: 0.001,
-                    max: 1.0,
-                    precision: 3
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/shadow-cascades.controls.jsx b/examples/src/examples/graphics/shadow-cascades.controls.jsx
new file mode 100644
index 00000000000..28a797c8d59
--- /dev/null
+++ b/examples/src/examples/graphics/shadow-cascades.controls.jsx
@@ -0,0 +1,117 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Shadow Cascade Settings'>
+                <LabelGroup text='Filtering'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowType' }}
+                        type='number'
+                        options={[
+                            { v: pc.SHADOW_PCF1_32F, t: 'PCF1_32F' },
+                            { v: pc.SHADOW_PCF3_32F, t: 'PCF3_32F' },
+                            { v: pc.SHADOW_PCF5_32F, t: 'PCF5_32F' },
+                            { v: pc.SHADOW_PCF1_16F, t: 'PCF1_16F' },
+                            { v: pc.SHADOW_PCF3_16F, t: 'PCF3_16F' },
+                            { v: pc.SHADOW_PCF5_16F, t: 'PCF5_16F' },
+                            { v: pc.SHADOW_VSM_16F, t: 'VSM_16F' },
+                            { v: pc.SHADOW_VSM_32F, t: 'VSM_32F' },
+                            { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Count'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.numCascades' }}
+                        min={1}
+                        max={4}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Every Frame'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.everyFrame' }}
+                        value={observer.get('settings.light.everyFrame')}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowResolution' }}
+                        min={128}
+                        max={2048}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Distribution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.cascadeDistribution' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blend'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.cascadeBlend' }}
+                        min={0}
+                        max={0.2}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='VSM Blur'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.vsmBlurSize' }}
+                        min={1}
+                        max={25}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='PCSS Penumbra'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.penumbraSize' }}
+                        min={0}
+                        max={0.2}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='PCSS Falloff'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.penumbraFalloff' }}
+                        min={1}
+                        max={10}
+                        precision={1}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/shadow-cascades.controls.mjs b/examples/src/examples/graphics/shadow-cascades.controls.mjs
deleted file mode 100644
index d04faa5d9f1..00000000000
--- a/examples/src/examples/graphics/shadow-cascades.controls.mjs
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Shadow Cascade Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Filtering' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowType' },
-                    type: 'number',
-                    options: [
-                        { v: pc.SHADOW_PCF1_32F, t: 'PCF1_32F' },
-                        { v: pc.SHADOW_PCF3_32F, t: 'PCF3_32F' },
-                        { v: pc.SHADOW_PCF5_32F, t: 'PCF5_32F' },
-                        { v: pc.SHADOW_PCF1_16F, t: 'PCF1_16F' },
-                        { v: pc.SHADOW_PCF3_16F, t: 'PCF3_16F' },
-                        { v: pc.SHADOW_PCF5_16F, t: 'PCF5_16F' },
-                        { v: pc.SHADOW_VSM_16F, t: 'VSM_16F' },
-                        { v: pc.SHADOW_VSM_32F, t: 'VSM_32F' },
-                        { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Count' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.numCascades' },
-                    min: 1,
-                    max: 4,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Every Frame' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.everyFrame' },
-                    value: observer.get('settings.light.everyFrame')
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowResolution' },
-                    min: 128,
-                    max: 2048,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Distribution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.cascadeDistribution' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blend' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.cascadeBlend' },
-                    min: 0,
-                    max: 0.2,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'VSM Blur' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.vsmBlurSize' },
-                    min: 1,
-                    max: 25,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'PCSS Penumbra' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.penumbraSize' },
-                    min: 0,
-                    max: 0.2,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'PCSS Falloff' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.penumbraFalloff' },
-                    min: 1,
-                    max: 10,
-                    precision: 1
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/shadow-catcher.controls.jsx b/examples/src/examples/graphics/shadow-catcher.controls.jsx
new file mode 100644
index 00000000000..5eda84cbd29
--- /dev/null
+++ b/examples/src/examples/graphics/shadow-catcher.controls.jsx
@@ -0,0 +1,47 @@
+import { BindingTwoWay, BooleanInput, LabelGroup, Panel } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Enable'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.catcher' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Affect Scene'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.affectScene' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotate'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.rotate' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='DOF'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dof' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/shadow-catcher.controls.mjs b/examples/src/examples/graphics/shadow-catcher.controls.mjs
deleted file mode 100644
index 323bc0373e3..00000000000
--- a/examples/src/examples/graphics/shadow-catcher.controls.mjs
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Enable' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.catcher' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Affect Scene' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.affectScene' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotate' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.rotate' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'DOF' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dof' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/shadow-soft.controls.jsx b/examples/src/examples/graphics/shadow-soft.controls.jsx
new file mode 100644
index 00000000000..14be7421301
--- /dev/null
+++ b/examples/src/examples/graphics/shadow-soft.controls.jsx
@@ -0,0 +1,77 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Soft Shadow Settings'>
+                <LabelGroup text='Soft Shadows'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.soft' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowResolution' }}
+                        min={512}
+                        max={4096}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Penumbra'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.penumbraSize' }}
+                        min={0}
+                        max={0.2}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Falloff'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.penumbraFalloff' }}
+                        min={1}
+                        max={10}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowSamples' }}
+                        min={1}
+                        max={128}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Blocker Samples'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'settings.light.shadowBlockerSamples' }}
+                        min={0}
+                        max={128}
+                        precision={0}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/shadow-soft.controls.mjs b/examples/src/examples/graphics/shadow-soft.controls.mjs
deleted file mode 100644
index 785fa3e75dc..00000000000
--- a/examples/src/examples/graphics/shadow-soft.controls.mjs
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Soft Shadow Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Soft Shadows' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.soft' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowResolution' },
-                    min: 512,
-                    max: 4096,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Penumbra' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.penumbraSize' },
-                    min: 0,
-                    max: 0.2,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Falloff' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.penumbraFalloff' },
-                    min: 1,
-                    max: 10,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowSamples' },
-                    min: 1,
-                    max: 128,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Blocker Samples' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'settings.light.shadowBlockerSamples' },
-                    min: 0,
-                    max: 128,
-                    precision: 0
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/sky.controls.jsx b/examples/src/examples/graphics/sky.controls.jsx
new file mode 100644
index 00000000000..5f301b69da6
--- /dev/null
+++ b/examples/src/examples/graphics/sky.controls.jsx
@@ -0,0 +1,150 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    VectorInput,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    SelectInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Sky'>
+                <LabelGroup text='Preset'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skybox.preset' }}
+                        type='string'
+                        options={[
+                            { v: 'Street Dome', t: 'Street Dome' },
+                            { v: 'Street Infinite', t: 'Street Infinite' },
+                            { v: 'Room', t: 'Room' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Type'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skybox.type' }}
+                        type='string'
+                        options={[
+                            { v: pc.SKYTYPE_INFINITE, t: 'Infinite' },
+                            { v: pc.SKYTYPE_BOX, t: 'Box' },
+                            { v: pc.SKYTYPE_DOME, t: 'Dome' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Exposure'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skybox.exposure' }}
+                        min={0}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Rotation'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skybox.rotation' }}
+                        min={0}
+                        max={360}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Scale'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skybox.scale' }}
+                        value={[1, 1, 1]}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Position'>
+                    <VectorInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skybox.position' }}
+                        value={[0, 0, 0]}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Tripod Y'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.skybox.tripodY' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Color Enhance'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='shadows'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.shadows' }}
+                        min={-3}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='highlights'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.highlights' }}
+                        min={-3}
+                        max={3}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='midtones'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.midtones' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='vibrance'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.vibrance' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='dehaze'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.colorEnhance.dehaze' }}
+                        min={-1}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/sky.controls.mjs b/examples/src/examples/graphics/sky.controls.mjs
deleted file mode 100644
index 3a32586a59d..00000000000
--- a/examples/src/examples/graphics/sky.controls.mjs
+++ /dev/null
@@ -1,164 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, VectorInput, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Sky' },
-            jsx(
-                LabelGroup,
-                { text: 'Preset' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skybox.preset' },
-                    type: 'string',
-                    options: [
-                        { v: 'Street Dome', t: 'Street Dome' },
-                        { v: 'Street Infinite', t: 'Street Infinite' },
-                        { v: 'Room', t: 'Room' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Type' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skybox.type' },
-                    type: 'string',
-                    options: [
-                        { v: pc.SKYTYPE_INFINITE, t: 'Infinite' },
-                        { v: pc.SKYTYPE_BOX, t: 'Box' },
-                        { v: pc.SKYTYPE_DOME, t: 'Dome' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Exposure' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skybox.exposure' },
-                    min: 0,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Rotation' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skybox.rotation' },
-                    min: 0,
-                    max: 360,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Scale' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skybox.scale' },
-                    value: [1, 1, 1],
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Position' },
-                jsx(VectorInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skybox.position' },
-                    value: [0, 0, 0],
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Tripod Y' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.skybox.tripodY' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Color Enhance' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'shadows' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.shadows' },
-                    min: -3,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'highlights' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.highlights' },
-                    min: -3,
-                    max: 3,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'midtones' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.midtones' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'vibrance' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.vibrance' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'dehaze' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.colorEnhance.dehaze' },
-                    min: -1,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/graphics/taa.controls.jsx b/examples/src/examples/graphics/taa.controls.jsx
new file mode 100644
index 00000000000..d2f918274cf
--- /dev/null
+++ b/examples/src/examples/graphics/taa.controls.jsx
@@ -0,0 +1,68 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Scene Rendering'>
+                <LabelGroup text='resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.scale' }}
+                        min={0.5}
+                        max={1}
+                        precision={1}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Bloom'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.bloom' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='TAA'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='sharpness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.sharpness' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='jitter'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa.jitter' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/graphics/taa.controls.mjs b/examples/src/examples/graphics/taa.controls.mjs
deleted file mode 100644
index 50d0a3ce918..00000000000
--- a/examples/src/examples/graphics/taa.controls.mjs
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Scene Rendering' },
-            jsx(
-                LabelGroup,
-                { text: 'resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.scale' },
-                    min: 0.5,
-                    max: 1,
-                    precision: 1
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Bloom' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.bloom' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'TAA' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'sharpness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.sharpness' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'jitter' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa.jitter' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/loaders/gltf-export.controls.jsx b/examples/src/examples/loaders/gltf-export.controls.jsx
new file mode 100644
index 00000000000..7e117d5bb49
--- /dev/null
+++ b/examples/src/examples/loaders/gltf-export.controls.jsx
@@ -0,0 +1,14 @@
+import { Button } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return <Button text='Download GLTF' onClick={() => observer.emit('download')} />;
+}
diff --git a/examples/src/examples/loaders/gltf-export.controls.mjs b/examples/src/examples/loaders/gltf-export.controls.mjs
deleted file mode 100644
index 4424162fc4b..00000000000
--- a/examples/src/examples/loaders/gltf-export.controls.mjs
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { Button } = ReactPCUI;
-    return jsx(Button, {
-        text: 'Download GLTF',
-        onClick: () => observer.emit('download')
-    });
-};
diff --git a/examples/src/examples/loaders/usdz-export.controls.jsx b/examples/src/examples/loaders/usdz-export.controls.jsx
new file mode 100644
index 00000000000..0ba1a8bbdcd
--- /dev/null
+++ b/examples/src/examples/loaders/usdz-export.controls.jsx
@@ -0,0 +1,14 @@
+import { Button } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return <Button text='Download USDZ' onClick={() => observer.emit('download')} />;
+}
diff --git a/examples/src/examples/loaders/usdz-export.controls.mjs b/examples/src/examples/loaders/usdz-export.controls.mjs
deleted file mode 100644
index 9ad2ef4a2f3..00000000000
--- a/examples/src/examples/loaders/usdz-export.controls.mjs
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { Button } = ReactPCUI;
-    return jsx(Button, {
-        text: 'Download USDZ',
-        onClick: () => observer.emit('download')
-    });
-};
diff --git a/examples/src/examples/materials/material-refraction.controls.jsx b/examples/src/examples/materials/material-refraction.controls.jsx
new file mode 100644
index 00000000000..264372a69ac
--- /dev/null
+++ b/examples/src/examples/materials/material-refraction.controls.jsx
@@ -0,0 +1,26 @@
+import { BindingTwoWay, BooleanInput, LabelGroup, Panel } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Dynamic'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.dynamic' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/materials/material-refraction.controls.mjs b/examples/src/examples/materials/material-refraction.controls.mjs
deleted file mode 100644
index 8b9ec6b4d96..00000000000
--- a/examples/src/examples/materials/material-refraction.controls.mjs
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Dynamic' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.dynamic' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/misc/annotations.controls.jsx b/examples/src/examples/misc/annotations.controls.jsx
new file mode 100644
index 00000000000..d7d3fb5ad7f
--- /dev/null
+++ b/examples/src/examples/misc/annotations.controls.jsx
@@ -0,0 +1,57 @@
+import { BindingTwoWay, ColorPicker, LabelGroup, Panel, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Annotations'>
+                <LabelGroup text='Hotspot Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.hotspotSize' }}
+                        min={10}
+                        max={50}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Hotspot Color'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.hotspotColor' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Hover Color'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.hoverColor' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Opacity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.opacity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Behind Opacity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.behindOpacity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/misc/annotations.controls.mjs b/examples/src/examples/misc/annotations.controls.mjs
deleted file mode 100644
index f81af01580e..00000000000
--- a/examples/src/examples/misc/annotations.controls.mjs
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, ColorPicker, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Annotations' },
-            jsx(
-                LabelGroup,
-                { text: 'Hotspot Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.hotspotSize' },
-                    min: 10,
-                    max: 50
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Hotspot Color' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.hotspotColor' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Hover Color' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.hoverColor' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Opacity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.opacity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Behind Opacity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.behindOpacity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/misc/editor.controls.jsx b/examples/src/examples/misc/editor.controls.jsx
new file mode 100644
index 00000000000..fc9e8c590c2
--- /dev/null
+++ b/examples/src/examples/misc/editor.controls.jsx
@@ -0,0 +1,196 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    SelectInput,
+    ColorPicker
+} from '@playcanvas/pcui/react';
+import { useState } from 'react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    const [type, setType] = useState('translate');
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
+
+    // observe changes to the camera and gizmo type
+    observer.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
+        const [category, key] = path.split('.');
+        switch (category) {
+            case 'camera': {
+                switch (key) {
+                    case 'proj':
+                        setType(value);
+                        break;
+                }
+                break;
+            }
+            case 'gizmo': {
+                switch (key) {
+                    case 'type':
+                        setType(value);
+                        break;
+                }
+                break;
+            }
+        }
+    });
+
+    return (
+        <>
+            <Panel headerText='Transform'>
+                <LabelGroup text='Type'>
+                    <SelectInput
+                        options={[
+                            { v: 'translate', t: 'Translate' },
+                            { v: 'rotate', t: 'Rotate' },
+                            { v: 'scale', t: 'Scale' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.type' }}
+                        onSelect={setType}
+                    />
+                </LabelGroup>
+                {(type === 'translate' || type === 'rotate') && (
+                    <LabelGroup text='Coord Space'>
+                        <SelectInput
+                            options={[
+                                { v: 'world', t: 'World' },
+                                { v: 'local', t: 'Local' }
+                            ]}
+                            binding={new BindingTwoWay()}
+                            link={{ observer, path: 'gizmo.coordSpace' }}
+                        />
+                    </LabelGroup>
+                )}
+                <LabelGroup text='Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.size' }}
+                        min={0.1}
+                        max={10.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Snap Increment'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'gizmo.snapIncrement' }}
+                        min={1}
+                        max={10}
+                        precision={0}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Camera'>
+                <LabelGroup text='Projection'>
+                    <SelectInput
+                        options={[
+                            { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
+                            { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'camera.proj' }}
+                        onSelect={value => setProj((parseInt(value, 10) || 1) - 1)}
+                    />
+                </LabelGroup>
+                {proj === pc.PROJECTION_PERSPECTIVE && (
+                    <LabelGroup text='FOV'>
+                        <SliderInput
+                            binding={new BindingTwoWay()}
+                            link={{ observer, path: 'camera.fov' }}
+                            min={30}
+                            max={100}
+                        />
+                    </LabelGroup>
+                )}
+            </Panel>
+            <Panel headerText='Grid'>
+                <LabelGroup text='Resolution'>
+                    <SelectInput
+                        options={[
+                            { v: 3, t: 'High' },
+                            { v: 2, t: 'Medium' },
+                            { v: 1, t: 'Low' }
+                        ]}
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'grid.resolution' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Color X'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'grid.colorX' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Color Z'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'grid.colorZ' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='View Cube'>
+                <LabelGroup text='Color X'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'viewCube.colorX' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Color Y'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'viewCube.colorY' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Color Z'>
+                    <ColorPicker
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'viewCube.colorZ' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Radius'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'viewCube.radius' }}
+                        min={10}
+                        max={50}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Text Size'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'viewCube.textSize' }}
+                        min={1}
+                        max={50}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Line Thickness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'viewCube.lineThickness' }}
+                        min={1}
+                        max={20}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Line Length'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'viewCube.lineLength' }}
+                        min={10}
+                        max={200}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/misc/editor.controls.mjs b/examples/src/examples/misc/editor.controls.mjs
deleted file mode 100644
index 4be9ebd2448..00000000000
--- a/examples/src/examples/misc/editor.controls.mjs
+++ /dev/null
@@ -1,220 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput, ColorPicker } = ReactPCUI;
-    const { useState } = React;
-
-    const [type, setType] = useState('translate');
-    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
-
-    // observe changes to the camera and gizmo type
-    observer.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
-        const [category, key] = path.split('.');
-        switch (category) {
-            case 'camera': {
-                switch (key) {
-                    case 'proj':
-                        setType(value);
-                        break;
-                }
-                break;
-            }
-            case 'gizmo': {
-                switch (key) {
-                    case 'type':
-                        setType(value);
-                        break;
-                }
-                break;
-            }
-        }
-    });
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Transform' },
-            jsx(
-                LabelGroup,
-                { text: 'Type' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 'translate', t: 'Translate' },
-                        { v: 'rotate', t: 'Rotate' },
-                        { v: 'scale', t: 'Scale' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.type' },
-                    onSelect: setType
-                })
-            ),
-            (type === 'translate' || type === 'rotate') &&
-                jsx(
-                    LabelGroup,
-                    { text: 'Coord Space' },
-                    jsx(SelectInput, {
-                        options: [
-                            { v: 'world', t: 'World' },
-                            { v: 'local', t: 'Local' }
-                        ],
-                        binding: new BindingTwoWay(),
-                        link: { observer, path: 'gizmo.coordSpace' }
-                    })
-                ),
-            jsx(
-                LabelGroup,
-                { text: 'Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.size' },
-                    min: 0.1,
-                    max: 10.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Snap Increment' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'gizmo.snapIncrement' },
-                    min: 1,
-                    max: 10,
-                    precision: 0
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Camera' },
-            jsx(
-                LabelGroup,
-                { text: 'Projection' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
-                        { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'camera.proj' },
-                    onSelect: value => setProj((parseInt(value, 10) || 1) - 1)
-                })
-            ),
-            proj === pc.PROJECTION_PERSPECTIVE &&
-                jsx(
-                    LabelGroup,
-                    { text: 'FOV' },
-                    jsx(SliderInput, {
-                        binding: new BindingTwoWay(),
-                        link: { observer, path: 'camera.fov' },
-                        min: 30,
-                        max: 100
-                    })
-                )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Grid' },
-            jsx(
-                LabelGroup,
-                { text: 'Resolution' },
-                jsx(SelectInput, {
-                    options: [
-                        { v: 3, t: 'High' },
-                        { v: 2, t: 'Medium' },
-                        { v: 1, t: 'Low' }
-                    ],
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'grid.resolution' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Color X' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'grid.colorX' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Color Z' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'grid.colorZ' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'View Cube' },
-            jsx(
-                LabelGroup,
-                { text: 'Color X' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'viewCube.colorX' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Color Y' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'viewCube.colorY' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Color Z' },
-                jsx(ColorPicker, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'viewCube.colorZ' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Radius' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'viewCube.radius' },
-                    min: 10,
-                    max: 50
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Text Size' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'viewCube.textSize' },
-                    min: 1,
-                    max: 50
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Line Thickness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'viewCube.lineThickness' },
-                    min: 1,
-                    max: 20
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Line Length' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'viewCube.lineLength' },
-                    min: 10,
-                    max: 200
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/misc/multi-app.controls.jsx b/examples/src/examples/misc/multi-app.controls.jsx
new file mode 100644
index 00000000000..5a2da31f804
--- /dev/null
+++ b/examples/src/examples/misc/multi-app.controls.jsx
@@ -0,0 +1,44 @@
+import { BindingTwoWay, Panel, Label, Button } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='WebGPU'>
+                <Button text='Add' onClick={() => observer.emit('add:webgpu')} />
+                <Button text='Remove' onClick={() => observer.emit('remove:webgpu')} />
+                <Label
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'webgpu' }}
+                    value={observer.get('webgpu')}
+                />
+            </Panel>
+            <Panel headerText='WebGL 2'>
+                <Button text='Add' onClick={() => observer.emit('add:webgl2')} />
+                <Button text='Remove' onClick={() => observer.emit('remove:webgl2')} />
+                <Label
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'webgl2' }}
+                    value={observer.get('webgl2')}
+                />
+            </Panel>
+            <Panel headerText='Null'>
+                <Button text='Add' onClick={() => observer.emit('add:null')} />
+                <Button text='Remove' onClick={() => observer.emit('remove:null')} />
+                <Label
+                    binding={new BindingTwoWay()}
+                    link={{ observer, path: 'null' }}
+                    value={observer.get('null')}
+                />
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/misc/multi-app.controls.mjs b/examples/src/examples/misc/multi-app.controls.mjs
deleted file mode 100644
index 79282ba700a..00000000000
--- a/examples/src/examples/misc/multi-app.controls.mjs
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, Panel, Label, Button } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'WebGPU' },
-            jsx(Button, {
-                text: 'Add',
-                onClick: () => observer.emit('add:webgpu')
-            }),
-            jsx(Button, {
-                text: 'Remove',
-                onClick: () => observer.emit('remove:webgpu')
-            }),
-            jsx(Label, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'webgpu' },
-                value: observer.get('webgpu')
-            })
-        ),
-        jsx(
-            Panel,
-            { headerText: 'WebGL 2' },
-            jsx(Button, {
-                text: 'Add',
-                onClick: () => observer.emit('add:webgl2')
-            }),
-            jsx(Button, {
-                text: 'Remove',
-                onClick: () => observer.emit('remove:webgl2')
-            }),
-            jsx(Label, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'webgl2' },
-                value: observer.get('webgl2')
-            })
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Null' },
-            jsx(Button, {
-                text: 'Add',
-                onClick: () => observer.emit('add:null')
-            }),
-            jsx(Button, {
-                text: 'Remove',
-                onClick: () => observer.emit('remove:null')
-            }),
-            jsx(Label, {
-                binding: new BindingTwoWay(),
-                link: { observer, path: 'null' },
-                value: observer.get('null')
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/shaders/cloud-shadows.controls.jsx b/examples/src/examples/shaders/cloud-shadows.controls.jsx
new file mode 100644
index 00000000000..eacc5d69753
--- /dev/null
+++ b/examples/src/examples/shaders/cloud-shadows.controls.jsx
@@ -0,0 +1,55 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Cloud Shadows'>
+                <LabelGroup text='Speed'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.speed' }}
+                        min={0}
+                        max={0.2}
+                        precision={3}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Direction'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.direction' }}
+                        min={0}
+                        max={360}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.intensity' }}
+                        min={0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Scale'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scale' }}
+                        min={0.01}
+                        max={0.5}
+                        precision={3}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/shaders/cloud-shadows.controls.mjs b/examples/src/examples/shaders/cloud-shadows.controls.mjs
deleted file mode 100644
index 0b8a9f57656..00000000000
--- a/examples/src/examples/shaders/cloud-shadows.controls.mjs
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Cloud Shadows' },
-            jsx(
-                LabelGroup,
-                { text: 'Speed' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.speed' },
-                    min: 0,
-                    max: 0.2,
-                    precision: 3
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Direction' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.direction' },
-                    min: 0,
-                    max: 360,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.intensity' },
-                    min: 0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Scale' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scale' },
-                    min: 0.01,
-                    max: 0.5,
-                    precision: 3
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/shaders/ground-fog.controls.jsx b/examples/src/examples/shaders/ground-fog.controls.jsx
new file mode 100644
index 00000000000..0b85327002c
--- /dev/null
+++ b/examples/src/examples/shaders/ground-fog.controls.jsx
@@ -0,0 +1,22 @@
+import { BindingTwoWay, BooleanInput, LabelGroup } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <LabelGroup text='softness'>
+            <BooleanInput
+                type='toggle'
+                binding={new BindingTwoWay()}
+                link={{ observer, path: 'data.softness' }}
+            />
+        </LabelGroup>
+    );
+}
diff --git a/examples/src/examples/shaders/ground-fog.controls.mjs b/examples/src/examples/shaders/ground-fog.controls.mjs
deleted file mode 100644
index 2f95835aa8f..00000000000
--- a/examples/src/examples/shaders/ground-fog.controls.mjs
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup } = ReactPCUI;
-    return jsx(
-        LabelGroup,
-        { text: 'softness' },
-        jsx(BooleanInput, {
-            type: 'toggle',
-            binding: new BindingTwoWay(),
-            link: {
-                observer,
-                path: 'data.softness'
-            }
-        })
-    );
-};
diff --git a/examples/src/examples/shaders/shader-hatch.controls.jsx b/examples/src/examples/shaders/shader-hatch.controls.jsx
new file mode 100644
index 00000000000..2789fb8ad87
--- /dev/null
+++ b/examples/src/examples/shaders/shader-hatch.controls.jsx
@@ -0,0 +1,75 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    BooleanInput,
+    SelectInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Color'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.color' }}
+                        min={0.0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Metalness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.metalness' }}
+                        min={0.0}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Tonemapping'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.tonemapping' }}
+                        type='number'
+                        options={[
+                            { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
+                            { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
+                            { v: pc.TONEMAP_HEJL, t: 'HEJL' },
+                            { v: pc.TONEMAP_ACES, t: 'ACES' },
+                            { v: pc.TONEMAP_ACES2, t: 'ACES2' },
+                            { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Fog'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.fog' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Toon'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.toon' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/shaders/shader-hatch.controls.mjs b/examples/src/examples/shaders/shader-hatch.controls.mjs
deleted file mode 100644
index b0b183a24f7..00000000000
--- a/examples/src/examples/shaders/shader-hatch.controls.mjs
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Color' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.color' },
-                    min: 0.0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Metalness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.metalness' },
-                    min: 0.0,
-                    max: 1,
-                    precision: 2
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Tonemapping' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.tonemapping' },
-                    type: 'number',
-                    options: [
-                        { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
-                        { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
-                        { v: pc.TONEMAP_HEJL, t: 'HEJL' },
-                        { v: pc.TONEMAP_ACES, t: 'ACES' },
-                        { v: pc.TONEMAP_ACES2, t: 'ACES2' },
-                        { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Fog' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.fog' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Toon' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.toon' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/shaders/texture-array.controls.jsx b/examples/src/examples/shaders/texture-array.controls.jsx
new file mode 100644
index 00000000000..a03418fa3b4
--- /dev/null
+++ b/examples/src/examples/shaders/texture-array.controls.jsx
@@ -0,0 +1,26 @@
+import { BindingTwoWay, LabelGroup, Panel, BooleanInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Texture Arrays'>
+                <LabelGroup text='Show mipmaps'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'mipmaps' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/shaders/texture-array.controls.mjs b/examples/src/examples/shaders/texture-array.controls.mjs
deleted file mode 100644
index 56129ac6ecc..00000000000
--- a/examples/src/examples/shaders/texture-array.controls.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, BooleanInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Texture Arrays' },
-            jsx(
-                LabelGroup,
-                { text: 'Show mipmaps' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: {
-                        observer,
-                        path: 'mipmaps'
-                    }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/test/contact-hardening-shadows.controls.jsx b/examples/src/examples/test/contact-hardening-shadows.controls.jsx
new file mode 100644
index 00000000000..a7b6a567c77
--- /dev/null
+++ b/examples/src/examples/test/contact-hardening-shadows.controls.jsx
@@ -0,0 +1,145 @@
+import {
+    BindingTwoWay,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    SelectInput,
+    BooleanInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Area light'>
+                <LabelGroup text='Enabled'>
+                    <BooleanInput
+                        id='area-light'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.area.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.area.intensity' }}
+                        min={0.0}
+                        max={32.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Softness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.area.size' }}
+                        min={0.01}
+                        max={32.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shadows'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.area.shadowType' }}
+                        options={[
+                            { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' },
+                            { v: pc.SHADOW_PCF5_32F, t: 'PCF_32F' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Point light'>
+                <LabelGroup text='Enabled'>
+                    <BooleanInput
+                        id='point-light'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.point.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.point.intensity' }}
+                        min={0.0}
+                        max={32.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Softness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.point.size' }}
+                        min={0.01}
+                        max={32.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shadows'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.point.shadowType' }}
+                        options={[
+                            { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' },
+                            { v: pc.SHADOW_PCF5_32F, t: 'PCF_32F' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Directional light'>
+                <LabelGroup text='Enabled'>
+                    <BooleanInput
+                        id='directional-light'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.directional.enabled' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Intensity'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.directional.intensity' }}
+                        min={0.0}
+                        max={32.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Softness'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.directional.size' }}
+                        min={0.01}
+                        max={32.0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Shadows'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.directional.shadowType' }}
+                        options={[
+                            { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' },
+                            { v: pc.SHADOW_PCF5_32F, t: 'PCF_32F' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Animate'>
+                <LabelGroup text='Cycle Active Light'>
+                    <BooleanInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.cycle' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Animate Lights'>
+                    <BooleanInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'script.animate' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/contact-hardening-shadows.controls.mjs b/examples/src/examples/test/contact-hardening-shadows.controls.mjs
deleted file mode 100644
index 8f86205c4cc..00000000000
--- a/examples/src/examples/test/contact-hardening-shadows.controls.mjs
+++ /dev/null
@@ -1,166 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Area light' },
-            jsx(
-                LabelGroup,
-                { text: 'Enabled' },
-                jsx(BooleanInput, {
-                    id: 'area-light',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.area.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.area.intensity' },
-                    min: 0.0,
-                    max: 32.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Softness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.area.size' },
-                    min: 0.01,
-                    max: 32.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shadows' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.area.shadowType' },
-                    options: [
-                        { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' },
-                        { v: pc.SHADOW_PCF5_32F, t: 'PCF_32F' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Point light' },
-            jsx(
-                LabelGroup,
-                { text: 'Enabled' },
-                jsx(BooleanInput, {
-                    id: 'point-light',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.point.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.point.intensity' },
-                    min: 0.0,
-                    max: 32.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Softness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.point.size' },
-                    min: 0.01,
-                    max: 32.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shadows' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.point.shadowType' },
-                    options: [
-                        { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' },
-                        { v: pc.SHADOW_PCF5_32F, t: 'PCF_32F' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Directional light' },
-            jsx(
-                LabelGroup,
-                { text: 'Enabled' },
-                jsx(BooleanInput, {
-                    id: 'directional-light',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.directional.enabled' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Intensity' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.directional.intensity' },
-                    min: 0.0,
-                    max: 32.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Softness' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.directional.size' },
-                    min: 0.01,
-                    max: 32.0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Shadows' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.directional.shadowType' },
-                    options: [
-                        { v: pc.SHADOW_PCSS_32F, t: 'PCSS_32F' },
-                        { v: pc.SHADOW_PCF5_32F, t: 'PCF_32F' }
-                    ]
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Animate' },
-            jsx(
-                LabelGroup,
-                { text: 'Cycle Active Light' },
-                jsx(BooleanInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.cycle' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Animate Lights' },
-                jsx(BooleanInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'script.animate' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/test/detail-map.controls.jsx b/examples/src/examples/test/detail-map.controls.jsx
new file mode 100644
index 00000000000..ab5eb491c69
--- /dev/null
+++ b/examples/src/examples/test/detail-map.controls.jsx
@@ -0,0 +1,40 @@
+import { BindingTwoWay, LabelGroup, Panel, BooleanInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Detail Maps'>
+                <LabelGroup text='Diffuse'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.diffuse' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Normal'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.normal' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='AO'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.ao' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/detail-map.controls.mjs b/examples/src/examples/test/detail-map.controls.mjs
deleted file mode 100644
index 5b46ff5a64a..00000000000
--- a/examples/src/examples/test/detail-map.controls.mjs
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, BooleanInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Detail Maps' },
-            jsx(
-                LabelGroup,
-                { text: 'Diffuse' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.diffuse' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Normal' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.normal' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'AO' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ao' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/test/global-shader-properties.controls.jsx b/examples/src/examples/test/global-shader-properties.controls.jsx
new file mode 100644
index 00000000000..fcafbf060a7
--- /dev/null
+++ b/examples/src/examples/test/global-shader-properties.controls.jsx
@@ -0,0 +1,62 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SelectInput
+} from '@playcanvas/pcui/react';
+
+import * as pc from 'playcanvas';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Tonemapping'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.tonemapping' }}
+                        type='number'
+                        options={[
+                            { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
+                            { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
+                            { v: pc.TONEMAP_HEJL, t: 'HEJL' },
+                            { v: pc.TONEMAP_ACES, t: 'ACES' },
+                            { v: pc.TONEMAP_ACES2, t: 'ACES2' },
+                            { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Fog'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.fog' }}
+                        type='string'
+                        options={[
+                            { v: pc.FOG_NONE, t: 'NONE' },
+                            { v: pc.FOG_LINEAR, t: 'LINEAR' },
+                            { v: pc.FOG_EXP, t: 'EXP' },
+                            { v: pc.FOG_EXP2, t: 'EXP2' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Gamma'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.gamma' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/global-shader-properties.controls.mjs b/examples/src/examples/test/global-shader-properties.controls.mjs
deleted file mode 100644
index 73fd1adc51b..00000000000
--- a/examples/src/examples/test/global-shader-properties.controls.mjs
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as pc from 'playcanvas';
-
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Tonemapping' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.tonemapping' },
-                    type: 'number',
-                    options: [
-                        { v: pc.TONEMAP_LINEAR, t: 'LINEAR' },
-                        { v: pc.TONEMAP_FILMIC, t: 'FILMIC' },
-                        { v: pc.TONEMAP_HEJL, t: 'HEJL' },
-                        { v: pc.TONEMAP_ACES, t: 'ACES' },
-                        { v: pc.TONEMAP_ACES2, t: 'ACES2' },
-                        { v: pc.TONEMAP_NEUTRAL, t: 'NEUTRAL' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Fog' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.fog' },
-                    type: 'string',
-                    options: [
-                        { v: pc.FOG_NONE, t: 'NONE' },
-                        { v: pc.FOG_LINEAR, t: 'LINEAR' },
-                        { v: pc.FOG_EXP, t: 'EXP' },
-                        { v: pc.FOG_EXP2, t: 'EXP2' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Gamma' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.gamma' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/test/parallax-mapping.controls.jsx b/examples/src/examples/test/parallax-mapping.controls.jsx
new file mode 100644
index 00000000000..4c99652c651
--- /dev/null
+++ b/examples/src/examples/test/parallax-mapping.controls.jsx
@@ -0,0 +1,28 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='Height'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.height' }}
+                        min={0.0}
+                        max={2}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/parallax-mapping.controls.mjs b/examples/src/examples/test/parallax-mapping.controls.mjs
deleted file mode 100644
index 01e6500f37e..00000000000
--- a/examples/src/examples/test/parallax-mapping.controls.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: 'Height' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.height' },
-                    min: 0.0,
-                    max: 2,
-                    precision: 2
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/test/radix-sort-compute.controls.jsx b/examples/src/examples/test/radix-sort-compute.controls.jsx
new file mode 100644
index 00000000000..124a7ddc248
--- /dev/null
+++ b/examples/src/examples/test/radix-sort-compute.controls.jsx
@@ -0,0 +1,112 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    Button,
+    LabelGroup,
+    Panel,
+    SliderInput,
+    SelectInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Compute Radix Sort'>
+                <LabelGroup text='Elements (K)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.elementsK' }}
+                        min={1}
+                        max={30000}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Bits'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.bits' }}
+                        options={[
+                            { v: 8, t: '8 bits' },
+                            { v: 16, t: '16 bits' },
+                            { v: 24, t: '24 bits' },
+                            { v: 32, t: '32 bits' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Radix mode'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.mode' }}
+                        type='string'
+                        options={[
+                            { v: '4-shared-mem', t: '4-bit shared (portable)' },
+                            { v: 'onesweep', t: 'OneSweep (fused, NVIDIA)' }
+                        ]}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Render'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.render' }}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Validation'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.validation' }}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='Benchmark'>
+                <LabelGroup text='Run up to'>
+                    <SelectInput
+                        type='number'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.benchMaxElements' }}
+                        options={[
+                            { v: 100_000, t: '100K' },
+                            { v: 500_000, t: '500K' },
+                            { v: 1_000_000, t: '1M' },
+                            { v: 2_000_000, t: '2M' },
+                            { v: 3_000_000, t: '3M' },
+                            { v: 4_000_000, t: '4M' },
+                            { v: 5_000_000, t: '5M' },
+                            { v: 6_000_000, t: '6M' },
+                            { v: 8_000_000, t: '8M' },
+                            { v: 10_000_000, t: '10M' },
+                            { v: 15_000_000, t: '15M' },
+                            { v: 20_000_000, t: '20M' },
+                            { v: 25_000_000, t: '25M' },
+                            { v: 30_000_000, t: '30M' },
+                            { v: 40_000_000, t: '40M' },
+                            { v: 50_000_000, t: '50M' }
+                        ]}
+                    />
+                </LabelGroup>
+                <Button
+                    text='Run'
+                    onClick={() => {
+                        observer.emit('benchmark');
+                    }}
+                />
+                <Button
+                    text='Validate'
+                    onClick={() => {
+                        observer.emit('validate');
+                    }}
+                />
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/radix-sort-compute.controls.mjs b/examples/src/examples/test/radix-sort-compute.controls.mjs
deleted file mode 100644
index 4d3735987b3..00000000000
--- a/examples/src/examples/test/radix-sort-compute.controls.mjs
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, Button, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Compute Radix Sort' },
-            jsx(
-                LabelGroup,
-                { text: 'Elements (K)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.elementsK' },
-                    min: 1,
-                    max: 30000,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Bits' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.bits' },
-                    options: [
-                        { v: 8, t: '8 bits' },
-                        { v: 16, t: '16 bits' },
-                        { v: 24, t: '24 bits' },
-                        { v: 32, t: '32 bits' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Radix mode' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.mode' },
-                    type: 'string',
-                    options: [
-                        { v: '4-shared-mem', t: '4-bit shared (portable)' },
-                        { v: 'onesweep', t: 'OneSweep (fused, NVIDIA)' }
-                    ]
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Render' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.render' }
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Validation' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.validation' }
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'Benchmark' },
-            jsx(
-                LabelGroup,
-                { text: 'Run up to' },
-                jsx(SelectInput, {
-                    type: 'number',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.benchMaxElements' },
-                    options: [
-                        { v: 100_000, t: '100K' },
-                        { v: 500_000, t: '500K' },
-                        { v: 1_000_000, t: '1M' },
-                        { v: 2_000_000, t: '2M' },
-                        { v: 3_000_000, t: '3M' },
-                        { v: 4_000_000, t: '4M' },
-                        { v: 5_000_000, t: '5M' },
-                        { v: 6_000_000, t: '6M' },
-                        { v: 8_000_000, t: '8M' },
-                        { v: 10_000_000, t: '10M' },
-                        { v: 15_000_000, t: '15M' },
-                        { v: 20_000_000, t: '20M' },
-                        { v: 25_000_000, t: '25M' },
-                        { v: 30_000_000, t: '30M' },
-                        { v: 40_000_000, t: '40M' },
-                        { v: 50_000_000, t: '50M' }
-                    ]
-                })
-            ),
-            jsx(Button, {
-                text: 'Run',
-                onClick: () => {
-                    observer.emit('benchmark');
-                }
-            }),
-            jsx(Button, {
-                text: 'Validate',
-                onClick: () => {
-                    observer.emit('validate');
-                }
-            })
-        )
-    );
-};
diff --git a/examples/src/examples/test/radix-sort-indirect-compute.controls.jsx b/examples/src/examples/test/radix-sort-indirect-compute.controls.jsx
new file mode 100644
index 00000000000..3d6ec8b24be
--- /dev/null
+++ b/examples/src/examples/test/radix-sort-indirect-compute.controls.jsx
@@ -0,0 +1,45 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Indirect Radix Sort Test'>
+                <LabelGroup text='Elements (K)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.elementsK' }}
+                        min={1}
+                        max={10000}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Bits'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.bits' }}
+                        options={[
+                            { v: 4, t: '4 bits (1 pass)' },
+                            { v: 8, t: '8 bits (2 passes)' },
+                            { v: 12, t: '12 bits (3 passes)' },
+                            { v: 16, t: '16 bits (4 passes)' },
+                            { v: 20, t: '20 bits (5 passes)' },
+                            { v: 24, t: '24 bits (6 passes)' },
+                            { v: 28, t: '28 bits (7 passes)' },
+                            { v: 32, t: '32 bits (8 passes)' }
+                        ]}
+                    />
+                </LabelGroup>
+                {/* Visible count auto-oscillates (10%-90%) to simulate camera rotation */}
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/radix-sort-indirect-compute.controls.mjs b/examples/src/examples/test/radix-sort-indirect-compute.controls.mjs
deleted file mode 100644
index 9e54d0247be..00000000000
--- a/examples/src/examples/test/radix-sort-indirect-compute.controls.mjs
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Indirect Radix Sort Test' },
-            jsx(
-                LabelGroup,
-                { text: 'Elements (K)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.elementsK' },
-                    min: 1,
-                    max: 10000,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Bits' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.bits' },
-                    options: [
-                        { v: 4, t: '4 bits (1 pass)' },
-                        { v: 8, t: '8 bits (2 passes)' },
-                        { v: 12, t: '12 bits (3 passes)' },
-                        { v: 16, t: '16 bits (4 passes)' },
-                        { v: 20, t: '20 bits (5 passes)' },
-                        { v: 24, t: '24 bits (6 passes)' },
-                        { v: 28, t: '28 bits (7 passes)' },
-                        { v: 32, t: '32 bits (8 passes)' }
-                    ]
-                })
-            )
-            // Visible count now oscillates automatically (10%-90%) to simulate camera rotation
-        )
-    );
-};
diff --git a/examples/src/examples/test/radix-sort.controls.jsx b/examples/src/examples/test/radix-sort.controls.jsx
new file mode 100644
index 00000000000..80b1889aacc
--- /dev/null
+++ b/examples/src/examples/test/radix-sort.controls.jsx
@@ -0,0 +1,42 @@
+import { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Radix Sort'>
+                <LabelGroup text='Elements (K)'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.elementsK' }}
+                        min={1}
+                        max={10000}
+                        precision={0}
+                    />
+                </LabelGroup>
+                <LabelGroup text='Bits'>
+                    <SelectInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'options.bits' }}
+                        options={[
+                            { v: 4, t: '4 bits (1 pass)' },
+                            { v: 8, t: '8 bits (2 passes)' },
+                            { v: 12, t: '12 bits (3 passes)' },
+                            { v: 16, t: '16 bits (4 passes)' },
+                            { v: 20, t: '20 bits (5 passes)' },
+                            { v: 24, t: '24 bits (6 passes)' }
+                        ]}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/radix-sort.controls.mjs b/examples/src/examples/test/radix-sort.controls.mjs
deleted file mode 100644
index 9ea010a56a1..00000000000
--- a/examples/src/examples/test/radix-sort.controls.mjs
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
-
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Radix Sort' },
-            jsx(
-                LabelGroup,
-                { text: 'Elements (K)' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.elementsK' },
-                    min: 1,
-                    max: 10000,
-                    precision: 0
-                })
-            ),
-            jsx(
-                LabelGroup,
-                { text: 'Bits' },
-                jsx(SelectInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'options.bits' },
-                    options: [
-                        { v: 4, t: '4 bits (1 pass)' },
-                        { v: 8, t: '8 bits (2 passes)' },
-                        { v: 12, t: '12 bits (3 passes)' },
-                        { v: 16, t: '16 bits (4 passes)' },
-                        { v: 20, t: '20 bits (5 passes)' },
-                        { v: 24, t: '24 bits (6 passes)' }
-                    ]
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/test/taa-alpha.controls.jsx b/examples/src/examples/test/taa-alpha.controls.jsx
new file mode 100644
index 00000000000..43188e9dccf
--- /dev/null
+++ b/examples/src/examples/test/taa-alpha.controls.jsx
@@ -0,0 +1,43 @@
+import {
+    BindingTwoWay,
+    BooleanInput,
+    LabelGroup,
+    Panel,
+    SliderInput
+} from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Scene'>
+                <LabelGroup text='resolution'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.scene.scale' }}
+                        min={0.2}
+                        max={1}
+                        precision={2}
+                    />
+                </LabelGroup>
+            </Panel>
+            <Panel headerText='TAA'>
+                <LabelGroup text='enabled'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.taa.enabled' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/test/taa-alpha.controls.mjs b/examples/src/examples/test/taa-alpha.controls.mjs
deleted file mode 100644
index 6d01cec06f6..00000000000
--- a/examples/src/examples/test/taa-alpha.controls.mjs
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Scene' },
-            jsx(
-                LabelGroup,
-                { text: 'resolution' },
-                jsx(SliderInput, {
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.scene.scale' },
-                    min: 0.2,
-                    max: 1,
-                    precision: 2
-                })
-            )
-        ),
-        jsx(
-            Panel,
-            { headerText: 'TAA' },
-            jsx(
-                LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.taa.enabled' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/src/examples/user-interface/panel.controls.jsx b/examples/src/examples/user-interface/panel.controls.jsx
new file mode 100644
index 00000000000..07dfde500f6
--- /dev/null
+++ b/examples/src/examples/user-interface/panel.controls.jsx
@@ -0,0 +1,26 @@
+import { BindingTwoWay, BooleanInput, LabelGroup, Panel } from '@playcanvas/pcui/react';
+
+/**
+ * @import { Observer } from '@playcanvas/observer'
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @param {{ observer: Observer }} props - The control panel props.
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls({ observer }) {
+    return (
+        <>
+            <Panel headerText='Settings'>
+                <LabelGroup text='9-Sliced'>
+                    <BooleanInput
+                        type='toggle'
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.sliced' }}
+                    />
+                </LabelGroup>
+            </Panel>
+        </>
+    );
+}
diff --git a/examples/src/examples/user-interface/panel.controls.mjs b/examples/src/examples/user-interface/panel.controls.mjs
deleted file mode 100644
index 96a37c84745..00000000000
--- a/examples/src/examples/user-interface/panel.controls.mjs
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
-    const { BindingTwoWay, BooleanInput, LabelGroup, Panel } = ReactPCUI;
-    return fragment(
-        jsx(
-            Panel,
-            { headerText: 'Settings' },
-            jsx(
-                LabelGroup,
-                { text: '9-Sliced' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
-                    binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.sliced' }
-                })
-            )
-        )
-    );
-};
diff --git a/examples/templates/controls.jsx b/examples/templates/controls.jsx
new file mode 100644
index 00000000000..eb6c3c22ec6
--- /dev/null
+++ b/examples/templates/controls.jsx
@@ -0,0 +1,10 @@
+/**
+ * @import { ReactElement } from 'react'
+ */
+
+/**
+ * @returns {ReactElement} The control panel.
+ */
+export function Controls() {
+    return <></>;
+}
diff --git a/examples/templates/controls.mjs b/examples/templates/controls.mjs
deleted file mode 100644
index 557ad5b89d0..00000000000
--- a/examples/templates/controls.mjs
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @param {import('../src/app/components/Example.mjs').ControlOptions} options - The options.
- * @returns {JSX.Element} The returned JSX Element.
- */
-export function controls({ fragment }) {
-    return fragment();
-}
diff --git a/examples/tsconfig.examples.json b/examples/tsconfig.examples.json
index 6dfa10caff0..54f1f003d97 100644
--- a/examples/tsconfig.examples.json
+++ b/examples/tsconfig.examples.json
@@ -1,11 +1,14 @@
 {
     "extends": "./tsconfig.base.json",
     "compilerOptions": {
-        "checkJs": false
+        "checkJs": false,
+        "jsx": "react-jsx",
+        "jsxImportSource": "react"
     },
     "include": [
         "src/examples/**/*.example.mjs",
         "src/examples/**/*.controls.mjs",
+        "src/examples/**/*.controls.jsx",
         "src/app/**/*.d.ts"
     ],
     "exclude": [
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
index 2293cca850c..71eaf66fbd5 100644
--- a/examples/tsconfig.json
+++ b/examples/tsconfig.json
@@ -2,11 +2,14 @@
     "extends": "./tsconfig.base.json",
     "compilerOptions": {
         "checkJs": false,
+        "jsx": "react-jsx",
+        "jsxImportSource": "react",
         "outDir": "dist"
     },
     "include": [
         "src/**/*.mjs",
         "src/**/*.js",
+        "src/**/*.jsx",
         "src/**/*.d.ts",
         "iframe/**/*.mjs",
         "iframe/**/*.js",
diff --git a/examples/utils/build-examples.mjs b/examples/utils/build-examples.mjs
index dedfec5cff8..5c53a4df339 100644
--- a/examples/utils/build-examples.mjs
+++ b/examples/utils/build-examples.mjs
@@ -184,11 +184,7 @@ export const getExample = (name) => {
  * @returns {string} source file path.
  */
 export const getExamplePath = (item, file) => {
-    const input = path.join(item.path, `${item.exampleNameKebab}.${file}`);
-    if (fs.existsSync(input)) {
-        return input;
-    }
-    return file === 'controls.mjs' ? 'templates/controls.mjs' : input;
+    return path.join(item.path, `${item.exampleNameKebab}.${file}`);
 };
 
 /**
@@ -197,13 +193,9 @@ export const getExamplePath = (item, file) => {
  */
 export const getFiles = ({ path: dir, exampleNameKebab }) => {
     const prefix = `${exampleNameKebab}.`;
-    const files = fs.readdirSync(dir)
+    return fs.readdirSync(dir)
     .filter(file => file.startsWith(prefix))
     .map(file => file.replace(prefix, ''));
-    if (!files.includes('controls.mjs')) {
-        files.push('controls.mjs');
-    }
-    return files;
 };
 
 /**
@@ -322,7 +314,7 @@ export const getExampleTargets = () => {
                 assets.push({ src: input, dest: output });
                 continue;
             }
-            if (file === 'example.mjs' || file === 'controls.mjs') {
+            if (file === 'example.mjs') {
                 sources.push({ src: input, dest: output });
                 continue;
             }
diff --git a/examples/utils/vite-dev-server.mjs b/examples/utils/vite-dev-server.mjs
index c9324d0c75c..c00f1509685 100644
--- a/examples/utils/vite-dev-server.mjs
+++ b/examples/utils/vite-dev-server.mjs
@@ -424,7 +424,7 @@ const serveExampleFile = async (url, res) => {
     if (source === null) {
         return false;
     }
-    const code = file === 'example.mjs' || file === 'controls.mjs' ? transformSource(source) : source;
+    const code = file === 'example.mjs' ? transformSource(source) : source;
     sendText(res, code, 'text/javascript; charset=utf-8');
     return true;
 };