diff --git a/.changeset/cool-hounds-divide.md b/.changeset/cool-hounds-divide.md
new file mode 100644
index 00000000..26c95dc4
--- /dev/null
+++ b/.changeset/cool-hounds-divide.md
@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add support for box shadows in theme
diff --git a/apps/docs/data/default-theme.ts b/apps/docs/data/default-theme.ts
index edfdde09..13b3167e 100644
--- a/apps/docs/data/default-theme.ts
+++ b/apps/docs/data/default-theme.ts
@@ -270,7 +270,16 @@ export const defaultTheme: any = {
   },
   description: '',
   durations: [],
-  boxShadows: {},
+  boxShadows: {
+    0: '0px 3px 6px 0px rgba(0, 0, 0, 0.16), 0px 3px 6px 0px rgba(0, 0, 0, 0.23)',
+    1: '0px 14px 28px 0px rgba(0, 0, 0, 0.25), 0px 10px 10px 0px rgba(0, 0, 0, 0.22)',
+    2: '0px 1px 1px 0px rgba(0, 0, 0, 0.11), 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 4px 0px rgba(0, 0, 0, 0.11), 0px 6px 8px 0px rgba(0, 0, 0, 0.11), 0px 8px 16px 0px rgba(0, 0, 0, 0.11)',
+    3: '0px 1px 1px 0px rgba(0, 0, 0, 0.15), 0px 2px 2px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.15), 0px 8px 8px 0px rgba(0, 0, 0, 0.15)',
+    4: '0px 3px 6px 0px rgba(0, 0, 0, 0.16), 0px 3px 6px 0px rgba(0, 0, 0, 0.23)',
+    5: '0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.16), 0px 8px 8px 0px rgba(0, 0, 0, 0.20)',
+    6: '0px 14px 28px 0px rgba(0, 0, 0, 0.25), 0px 10px 10px 0px rgba(0, 0, 0, 0.22)',
+    7: '0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 6px 6px 0px rgba(0, 0, 0, 0.23)',
+  },
   textShadows: {},
   easingFunctions: {},
   gradients: {},
diff --git a/packages/gui/src/components/schemas/box-shadow.tsx b/packages/gui/src/components/schemas/box-shadow.tsx
index 3c869b3a..ee9bb103 100644
--- a/packages/gui/src/components/schemas/box-shadow.tsx
+++ b/packages/gui/src/components/schemas/box-shadow.tsx
@@ -3,6 +3,7 @@ import { joinSchemas } from './joinSchemas'
 import { listSchema } from './list'
 import { objectSchema } from './object'
 import { keyword, length } from './primitives'
+import { themeRecord } from './theme'
 import { toggle } from './toggle'
 
 const singleBoxShadow = objectSchema({
@@ -22,4 +23,5 @@ export const boxShadow = joinSchemas([
     itemSchema: singleBoxShadow,
   }),
   keyword(['none']),
+  themeRecord('boxShadows'),
 ])
diff --git a/packages/gui/src/components/schemas/theme.tsx b/packages/gui/src/components/schemas/theme.tsx
index 4ff2629e..1a2fb6b0 100644
--- a/packages/gui/src/components/schemas/theme.tsx
+++ b/packages/gui/src/components/schemas/theme.tsx
@@ -43,7 +43,7 @@ export function themeScale(path: string): DataTypeSchema<ThemeValue> {
   }
 }
 
-// Theme properties for stuff represented by a string names
+// Theme properties for stuff represented by a string name
 export function themeRecord(path: string): DataTypeSchema<ThemeNamedValue> {
   return {
     type: 'theme',