diff --git a/apps/design-system/content/docs/components/sidebar.mdx b/apps/design-system/content/docs/components/sidebar.mdx
index 6408a1bce79..db88a7747b3 100644
--- a/apps/design-system/content/docs/components/sidebar.mdx
+++ b/apps/design-system/content/docs/components/sidebar.mdx
@@ -117,14 +117,14 @@ this config enable sidebar related style utilities like bg-sidebar
 ```javascript title="tailwind.config.js"
 // ...
 sidebar: {
-  DEFAULT: 'var(--sidebar-background)',
-  foreground: 'var(--sidebar-foreground)',
-  primary: 'var(--sidebar-primary)',
-  'primary-foreground': 'var(--sidebar-primary-foreground)',
-  accent: 'var(--sidebar-accent)',
-  'accent-foreground': 'var(--sidebar-accent-foreground)',
-  border: 'var(--sidebar-border)',
-  ring: 'var(--sidebar-ring)',
+  DEFAULT: 'hsl(var(--sidebar-background))',
+  foreground: 'hsl(var(--sidebar-foreground))',
+  primary: 'hsl(var(--sidebar-primary))',
+  'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  accent: 'hsl(var(--sidebar-accent))',
+  'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  border: 'hsl(var(--sidebar-border))',
+  ring: 'hsl(var(--sidebar-ring))',
 },
 // ...
 ```