diff --git a/src/content/components/uikit/Alert/index.ts b/src/content/components/uikit/Alert/index.ts
index d70739722271..df2a8c69a794 100644
--- a/src/content/components/uikit/Alert/index.ts
+++ b/src/content/components/uikit/Alert/index.ts
@@ -18,7 +18,14 @@ export const alertConfig = {
         props: {
             theme: {
                 type: 'select',
-                values: mappingOptions(['normal', 'info', 'success', 'warning', 'danger']),
+                values: mappingOptions([
+                    'normal',
+                    'info',
+                    'success',
+                    'warning',
+                    'danger',
+                    'utility',
+                ]),
                 defaultValue: 'normal',
             },
             view: {
diff --git a/src/content/components/uikit/Button/index.ts b/src/content/components/uikit/Button/index.ts
index 39af8ecaf4b0..3e784c7ba3b9 100644
--- a/src/content/components/uikit/Button/index.ts
+++ b/src/content/components/uikit/Button/index.ts
@@ -28,12 +28,14 @@ export const buttonConfig = {
                     'outlined-success',
                     'outlined-warning',
                     'outlined-danger',
+                    'outlined-utility',
                     'flat',
                     'flat-action',
                     'flat-info',
                     'flat-success',
                     'flat-warning',
                     'flat-danger',
+                    'flat-utility',
                     'flat-secondary',
                     'normal-contrast',
                     'outlined-contrast',
diff --git a/src/content/components/uikit/Card/index.ts b/src/content/components/uikit/Card/index.ts
index 9aa4697f43b6..349c37c11a0c 100644
--- a/src/content/components/uikit/Card/index.ts
+++ b/src/content/components/uikit/Card/index.ts
@@ -17,7 +17,14 @@ export const cardConfig = {
         props: {
             theme: {
                 type: 'select',
-                values: mappingOptions(['normal', 'info', 'success', 'warning', 'danger']),
+                values: mappingOptions([
+                    'normal',
+                    'info',
+                    'success',
+                    'warning',
+                    'danger',
+                    'utility',
+                ]),
                 defaultValue: 'normal',
             },
             type: {
diff --git a/src/content/components/uikit/Toaster/index.ts b/src/content/components/uikit/Toaster/index.ts
index 8464cebba153..a784acb76c6c 100644
--- a/src/content/components/uikit/Toaster/index.ts
+++ b/src/content/components/uikit/Toaster/index.ts
@@ -31,7 +31,7 @@ const sandboxProps: Partial<ToasterSandboxProps> = {
     },
     theme: {
         type: 'select',
-        values: [undefined, 'info', 'success', 'warning', 'danger'].map((value) => ({
+        values: [undefined, 'info', 'success', 'warning', 'danger', 'utility'].map((value) => ({
             value: value === undefined ? 'undefined' : value,
             content: value === undefined ? 'none' : value,
         })),