diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx
index 1d3af9e39e..95bfcdf9f6 100644
--- a/apps/www/components/theme-customizer.tsx
+++ b/apps/www/components/theme-customizer.tsx
@@ -510,6 +510,21 @@ function CustomizerCode() {
             <span className="line text-white">
               &nbsp;&nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
             </span>
+            {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+              (prefix) => (
+                <>
+                  <span className="line text-white">
+                    &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                    {
+                      activeTheme?.cssVars.light[
+                        prefix as keyof typeof activeTheme.cssVars.light
+                      ]
+                    }
+                    ;
+                  </span>
+                </>
+              )
+            )}
             <span className="line text-white">&nbsp;&nbsp;&#125;</span>
             <span className="line text-white">&nbsp;</span>
             <span className="line text-white">&nbsp;&nbsp;.dark &#123;</span>
@@ -563,6 +578,21 @@ function CustomizerCode() {
               &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
               {activeTheme?.cssVars.dark["ring"]};
             </span>
+            {["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
+              (prefix) => (
+                <>
+                  <span className="line text-white">
+                    &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                    {
+                      activeTheme?.cssVars.dark[
+                        prefix as keyof typeof activeTheme.cssVars.dark
+                      ]
+                    }
+                    ;
+                  </span>
+                </>
+              )
+            )}
             <span className="line text-white">&nbsp;&nbsp;&#125;</span>
             <span className="line text-white">&#125;</span>
           </code>
@@ -606,6 +636,11 @@ const BASE_STYLES_WITH_VARIABLES = `
     --input: <%- colors.light["input"] %>;
     --ring: <%- colors.light["ring"] %>;
     --radius: <%- radius %>rem;
+    --chart-1: <%- colors.light["chart1"] %>;
+    --chart-2: <%- colors.light["chart2"] %>;
+    --chart-3: <%- colors.light["chart3"] %>;
+    --chart-4: <%- colors.light["chart4"] %>;
+    --chart-5: <%- colors.light["chart5"] %>;
   }
 
   .dark {
@@ -628,6 +663,11 @@ const BASE_STYLES_WITH_VARIABLES = `
     --border: <%- colors.dark["border"] %>;
     --input: <%- colors.dark["input"] %>;
     --ring: <%- colors.dark["ring"] %>;
+    --chart-1: <%- colors.dark["chart1"] %>;
+    --chart-2: <%- colors.dark["chart2"] %>;
+    --chart-3: <%- colors.dark["chart3"] %>;
+    --chart-4: <%- colors.dark["chart4"] %>;
+    --chart-5: <%- colors.dark["chart5"] %>;
   }
 }
 `
diff --git a/apps/www/registry/themes.ts b/apps/www/registry/themes.ts
index 9ccf38de51..f787314c20 100644
--- a/apps/www/registry/themes.ts
+++ b/apps/www/registry/themes.ts
@@ -28,6 +28,11 @@ export const themes = [
         input: "240 5.9% 90%",
         ring: "240 5.9% 10%",
         radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "240 10% 3.9%",
@@ -49,6 +54,11 @@ export const themes = [
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "240 4.9% 83.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -81,6 +91,11 @@ export const themes = [
         input: "214.3 31.8% 91.4%",
         ring: "222.2 84% 4.9%",
         radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "222.2 84% 4.9%",
@@ -102,6 +117,11 @@ export const themes = [
         border: "217.2 32.6% 17.5%",
         input: "217.2 32.6% 17.5%",
         ring: "212.7 26.8% 83.9",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -134,6 +154,11 @@ export const themes = [
         input: "20 5.9% 90%",
         ring: "20 14.3% 4.1%",
         radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "20 14.3% 4.1%",
@@ -155,6 +180,11 @@ export const themes = [
         border: "12 6.5% 15.1%",
         input: "12 6.5% 15.1%",
         ring: "24 5.7% 82.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -187,6 +217,11 @@ export const themes = [
         input: "220 13% 91%",
         ring: "224 71.4% 4.1%",
         radius: "0.35rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "224 71.4% 4.1%",
@@ -208,6 +243,11 @@ export const themes = [
         border: "215 27.9% 16.9%",
         input: "215 27.9% 16.9%",
         ring: "216 12.2% 83.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -239,6 +279,11 @@ export const themes = [
         border: "0 0% 89.8%",
         input: "0 0% 89.8%",
         ring: "0 0% 3.9%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "0 0% 3.9%",
@@ -260,6 +305,11 @@ export const themes = [
         border: "0 0% 14.9%",
         input: "0 0% 14.9%",
         ring: "0 0% 83.1%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -292,6 +342,11 @@ export const themes = [
         input: "0 0% 89.8%",
         ring: "0 72.2% 50.6%",
         radius: "0.4rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "0 0% 3.9%",
@@ -313,6 +368,11 @@ export const themes = [
         border: "0 0% 14.9%",
         input: "0 0% 14.9%",
         ring: "0 72.2% 50.6%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -345,6 +405,11 @@ export const themes = [
         input: "240 5.9% 90%",
         ring: "346.8 77.2% 49.8%",
         radius: "0.5rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "20 14.3% 4.1%",
@@ -366,6 +431,11 @@ export const themes = [
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "346.8 77.2% 49.8%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -398,6 +468,11 @@ export const themes = [
         input: "20 5.9% 90%",
         ring: "24.6 95% 53.1%",
         radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "20 14.3% 4.1%",
@@ -419,6 +494,11 @@ export const themes = [
         border: "12 6.5% 15.1%",
         input: "12 6.5% 15.1%",
         ring: "20.5 90.2% 48.2%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -450,6 +530,11 @@ export const themes = [
         border: "240 5.9% 90%",
         input: "240 5.9% 90%",
         ring: "142.1 76.2% 36.3%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "20 14.3% 4.1%",
@@ -471,6 +556,11 @@ export const themes = [
         border: "240 3.7% 15.9%",
         input: "240 3.7% 15.9%",
         ring: "142.4 71.8% 29.2%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -502,6 +592,11 @@ export const themes = [
         border: "214.3 31.8% 91.4%",
         input: "214.3 31.8% 91.4%",
         ring: "221.2 83.2% 53.3%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "222.2 84% 4.9%",
@@ -523,6 +618,11 @@ export const themes = [
         border: "217.2 32.6% 17.5%",
         input: "217.2 32.6% 17.5%",
         ring: "224.3 76.3% 48%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -555,6 +655,11 @@ export const themes = [
         input: "20 5.9% 90%",
         ring: "20 14.3% 4.1%",
         radius: "0.95rem",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "20 14.3% 4.1%",
@@ -576,6 +681,11 @@ export const themes = [
         border: "12 6.5% 15.1%",
         input: "12 6.5% 15.1%",
         ring: "35.5 91.7% 32.9%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },
@@ -607,6 +717,11 @@ export const themes = [
         border: "220 13% 91%",
         input: "220 13% 91%",
         ring: "262.1 83.3% 57.8%",
+        "chart-1": "12 76% 61%",
+        "chart-2": "173 58% 39%",
+        "chart-3": "197 37% 24%",
+        "chart-4": "43 74% 66%",
+        "chart-5": "27 87% 67%",
       },
       dark: {
         background: "224 71.4% 4.1%",
@@ -628,6 +743,11 @@ export const themes = [
         border: "215 27.9% 16.9%",
         input: "215 27.9% 16.9%",
         ring: "263.4 70% 50.4%",
+        "chart-1": "220 70% 50%",
+        "chart-2": "160 60% 45%",
+        "chart-3": "30 80% 55%",
+        "chart-4": "280 65% 60%",
+        "chart-5": "340 75% 55%",
       },
     },
   },