diff --git a/renderers/react/src/v0_9/A2uiSurface.tsx b/renderers/react/src/v0_9/A2uiSurface.tsx
index 125593371..16bda2cf6 100644
--- a/renderers/react/src/v0_9/A2uiSurface.tsx
+++ b/renderers/react/src/v0_9/A2uiSurface.tsx
@@ -127,6 +127,18 @@ DeferredChild.displayName = 'DeferredChild';
 export const A2uiSurface: React.FC<{surface: SurfaceModel<ReactComponentImplementation>}> = ({
   surface,
 }) => {
+  const themeStyle = useMemo(() => {
+    const style: Record<string, string> = {};
+    if (surface.theme?.primaryColor) {
+      style['--a2ui-primary-color'] = surface.theme.primaryColor;
+    }
+    return style;
+  }, [surface.theme]);
+
   // The root component always has ID 'root' and base path '/'
-  return <DeferredChild surface={surface} id="root" basePath="/" />;
+  return (
+    <div style={themeStyle as React.CSSProperties}>
+      <DeferredChild surface={surface} id="root" basePath="/" />
+    </div>
+  );
 };
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Button.tsx b/renderers/react/src/v0_9/catalog/basic/components/Button.tsx
index b6489cf77..cc9cae9f4 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/Button.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/Button.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 export const Button = createReactComponent(ButtonApi, ({props, buildChild}) => {
   const style: React.CSSProperties = {
@@ -27,7 +27,7 @@ export const Button = createReactComponent(ButtonApi, ({props, buildChild}) => {
     border: props.variant === 'borderless' ? 'none' : '1px solid #ccc',
     backgroundColor:
       props.variant === 'primary'
-        ? 'var(--a2ui-primary-color, #007bff)'
+        ? PRIMARY_COLOR
         : props.variant === 'borderless'
           ? 'transparent'
           : '#fff',
diff --git a/renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx b/renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx
index 1c1a9da03..a2c4b0ea3 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 export const CheckBox = createReactComponent(CheckBoxApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,7 +36,7 @@ export const CheckBox = createReactComponent(CheckBoxApi, ({props}) => {
           type="checkbox"
           checked={!!props.value}
           onChange={onChange}
-          style={{cursor: 'pointer', outline: hasError ? '1px solid red' : 'none'}}
+          style={{cursor: 'pointer', outline: hasError ? '1px solid red' : 'none', accentColor: PRIMARY_COLOR}}
         />
         {props.label && (
           <label
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx b/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
index 20e77c5dc..b2d1ecdf7 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
@@ -17,7 +17,7 @@
 import React, {useState} from 'react';
 import {createReactComponent} from '../../../adapter';
 import {ChoicePickerApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 
 // The type of an option is deeply nested into the ChoicePickerApi schema, and
 // it seems z.infer is not inferring it correctly (?). We use `any` for now.
@@ -87,9 +87,9 @@ export const ChoicePicker = createReactComponent(ChoicePickerApi, ({props, conte
                   padding: '4px 12px',
                   borderRadius: '16px',
                   border: isSelected
-                    ? '1px solid var(--a2ui-primary-color, #007bff)'
+                    ? `1px solid ${PRIMARY_COLOR}`
                     : STANDARD_BORDER,
-                  backgroundColor: isSelected ? 'var(--a2ui-primary-color, #007bff)' : '#fff',
+                  backgroundColor: isSelected ? PRIMARY_COLOR : '#fff',
                   color: isSelected ? '#fff' : 'inherit',
                   cursor: 'pointer',
                   fontSize: '12px',
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Slider.tsx b/renderers/react/src/v0_9/catalog/basic/components/Slider.tsx
index dd50b5198..bf96df0f4 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/Slider.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/Slider.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {SliderApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 export const Slider = createReactComponent(SliderApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -51,7 +51,7 @@ export const Slider = createReactComponent(SliderApi, ({props}) => {
         max={props.max}
         value={props.value ?? 0}
         onChange={onChange}
-        style={{width: '100%', cursor: 'pointer'}}
+        style={{width: '100%', cursor: 'pointer', accentColor: PRIMARY_COLOR}}
       />
     </div>
   );
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx b/renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx
index 6a19dbae4..27b127300 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx
@@ -17,7 +17,7 @@
 import {useState} from 'react';
 import {createReactComponent} from '../../../adapter';
 import {TabsApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR} from '../utils';
 
 // The type of a tab is deeply nested into the TabsApi schema, and
 // it seems z.infer is not inferring it correctly (?). We use `any` for now.
@@ -42,10 +42,10 @@ export const Tabs = createReactComponent(TabsApi, ({props, buildChild}) => {
               border: 'none',
               background: 'none',
               borderBottom:
-                selectedIndex === i ? '2px solid var(--a2ui-primary-color, #007bff)' : 'none',
+                selectedIndex === i ? `2px solid ${PRIMARY_COLOR}` : 'none',
               fontWeight: selectedIndex === i ? 'bold' : 'normal',
               cursor: 'pointer',
-              color: selectedIndex === i ? 'var(--a2ui-primary-color, #007bff)' : 'inherit',
+              color: selectedIndex === i ? PRIMARY_COLOR : 'inherit',
             }}
           >
             {tab.title}
diff --git a/renderers/react/src/v0_9/catalog/basic/components/TextField.tsx b/renderers/react/src/v0_9/catalog/basic/components/TextField.tsx
index c5dbb1963..e0354ce77 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/TextField.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/TextField.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import {createReactComponent} from '../../../adapter';
 import {TextFieldApi} from '@a2ui/web_core/v0_9/basic_catalog';
-import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
+import {LEAF_MARGIN, PRIMARY_COLOR, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 
 export const TextField = createReactComponent(TextFieldApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -34,6 +34,7 @@ export const TextField = createReactComponent(TextFieldApi, ({props}) => {
     border: STANDARD_BORDER,
     borderRadius: STANDARD_RADIUS,
     boxSizing: 'border-box',
+    outlineColor: PRIMARY_COLOR,
   };
 
   // Note: To have a unique id without passing context we can use a random or provided id,
diff --git a/renderers/react/src/v0_9/catalog/basic/utils.ts b/renderers/react/src/v0_9/catalog/basic/utils.ts
index 375bac00d..8482a9bd7 100644
--- a/renderers/react/src/v0_9/catalog/basic/utils.ts
+++ b/renderers/react/src/v0_9/catalog/basic/utils.ts
@@ -28,6 +28,12 @@ export const STANDARD_BORDER = '1px solid #ccc';
 /** Standard border radius. */
 export const STANDARD_RADIUS = '8px';
 
+/** Default primary color, used as fallback when no theme is provided. */
+export const DEFAULT_PRIMARY_COLOR = '#007bff';
+
+/** CSS value referencing the theme primary color with fallback. */
+export const PRIMARY_COLOR = `var(--a2ui-primary-color, ${DEFAULT_PRIMARY_COLOR})`;
+
 export const mapJustify = (j?: string) => {
   switch (j) {
     case 'center':