diff --git a/package-lock.json b/package-lock.json
index d0b7e27..05cb2bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18707,7 +18707,7 @@
     },
     "package": {
       "name": "@userfront/toolkit",
-      "version": "1.1.0-alpha.0",
+      "version": "1.1.0-alpha.1",
       "license": "MIT",
       "dependencies": {
         "@r2wc/react-to-web-component": "^2.0.2",
diff --git a/package/package-lock.json b/package/package-lock.json
index ea376e6..4eb87ae 100644
--- a/package/package-lock.json
+++ b/package/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@userfront/react",
-  "version": "1.0.6",
+  "version": "1.1.0-alpha.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@userfront/react",
-      "version": "1.0.6",
+      "version": "1.1.0-alpha.1",
       "license": "MIT",
       "dependencies": {
         "@r2wc/react-to-web-component": "^2.0.2",
diff --git a/package/package.json b/package/package.json
index 9f8a52f..b387a58 100644
--- a/package/package.json
+++ b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@userfront/toolkit",
-  "version": "1.1.0-alpha.0",
+  "version": "1.1.0-alpha.1",
   "description": "Bindings and components for authentication with Userfront with React, Vue, other frameworks, and plain JS + HTML",
   "type": "module",
   "directories": {
diff --git a/package/src/forms/UniversalForm.jsx b/package/src/forms/UniversalForm.jsx
index 2fabd6b..3b379b0 100644
--- a/package/src/forms/UniversalForm.jsx
+++ b/package/src/forms/UniversalForm.jsx
@@ -565,7 +565,7 @@ const componentForStep = (state) => {
 };
 
 const UniversalForm = ({
-  theme = {},
+  theme,
   state,
   isDemo = false,
   demoState = "live",
@@ -590,19 +590,19 @@ const UniversalForm = ({
   // Build the theme
 
   // Define CSS variables
-  const themeColors = theme.colors || {};
+  const themeColors = theme?.colors;
   const style = {
-    "--userfront-light-color": themeColors.light || "#ffffff",
-    "--userfront-dark-color": themeColors.dark || "#5e72e4",
-    "--userfront-accent-color": themeColors.accent || "#13a0ff",
+    "--userfront-light-color": themeColors?.light || "#ffffff",
+    "--userfront-dark-color": themeColors?.dark || "#5e72e4",
+    "--userfront-accent-color": themeColors?.accent || "#13a0ff",
   };
-  if (themeColors.lightBackground) {
+  if (themeColors?.lightBackground) {
     style["--userfront-light-background-color"] = themeColors.lightBackground;
   }
-  if (themeColors.darkBackground) {
+  if (themeColors?.darkBackground) {
     style["--userfront-dark-background-color"] = themeColors.darkBackground;
   }
-  if (theme.fontFamily) {
+  if (theme?.fontFamily) {
     style["--userfront-font-family"] = theme.fontFamily;
   }
 
@@ -610,28 +610,28 @@ const UniversalForm = ({
   // For now, "light scheme only" is default, to match existing behavior.
   // In a future iteration "auto scheme" should be made default
   let colorSchemeClass = "userfront-light-scheme";
-  if (theme.colorScheme === "dark") {
+  if (theme?.colorScheme === "dark") {
     colorSchemeClass = "userfront-dark-scheme";
   }
-  if (theme.colorScheme === "auto") {
+  if (theme?.colorScheme === "auto") {
     colorSchemeClass = "userfront-auto-scheme";
   }
 
   // CSS variables for sizing
-  if (theme.size === "compact") {
+  if (theme?.size === "compact") {
     style["--userfront-em-size"] = "14px";
     style["--userfront-spacing"] = "0.5em";
   }
-  if (theme.size === "mini") {
+  if (theme?.size === "mini") {
     style["--userfront-em-size"] = "12px";
     style["--userfront-spacing"] = "0.5em";
     style["--userfront-container-width"] = "250px";
   }
-  if (theme.size === "spaced") {
+  if (theme?.size === "spaced") {
     style["--userfront-em-size"] = "14px";
     style["--userfront-spacing"] = "20px";
   }
-  if (theme.size === "large") {
+  if (theme?.size === "large") {
     style["--userfront-em-size"] = "20px";
     style["--userfront-spacing"] = "18px";
   }
@@ -644,7 +644,7 @@ const UniversalForm = ({
     raisedButtons: "userfront-raised-buttons",
     dottedOutlines: "userfront-dotted-outlines",
   };
-  const extras = theme.extras || {};
+  const extras = theme?.extras || {};
   let customizationClasses = "";
   Object.entries(extras)
     .filter(([key, val]) => Boolean(val))
diff --git a/package/src/web-component.js b/package/src/web-component.js
index f63c32a..7142a13 100644
--- a/package/src/web-component.js
+++ b/package/src/web-component.js
@@ -23,6 +23,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         tenantId: "string",
         flow: "json",
+        theme: "json",
         compact: "boolean",
         redirect: "string",
         redirectOnLoadIfLoggedIn: "boolean",
@@ -37,6 +38,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         tenantId: "string",
         flow: "json",
+        theme: "json",
         compact: "boolean",
         redirect: "string",
         redirectOnLoadIfLoggedIn: "boolean",
@@ -51,6 +53,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         tenantId: "string",
         flow: "json",
+        theme: "json",
         compact: "boolean",
         redirect: "string",
         redirectOnLoadIfLoggedIn: "boolean",
@@ -65,6 +68,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         disabled: "boolean",
         redirect: "string",
+        theme: "json",
       },
     })
   );