diff --git a/packages/raystack/components/sidebar/sidebar-item.tsx b/packages/raystack/components/sidebar/sidebar-item.tsx
index 2155482d..33986752 100644
--- a/packages/raystack/components/sidebar/sidebar-item.tsx
+++ b/packages/raystack/components/sidebar/sidebar-item.tsx
@@ -80,7 +80,11 @@ export const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
             leadingIcon
           )}
         </Flex>
-        {!isCollapsed && <span className={styles['nav-text']}>{children}</span>}
+        {!isCollapsed && (
+          <span className={cx(styles['nav-text'], classNames?.text)}>
+            {children}
+          </span>
+        )}
       </>
     );
 
diff --git a/packages/raystack/components/sidebar/sidebar-main.tsx b/packages/raystack/components/sidebar/sidebar-main.tsx
index cc33fe1b..c1a1d876 100644
--- a/packages/raystack/components/sidebar/sidebar-main.tsx
+++ b/packages/raystack/components/sidebar/sidebar-main.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { cx } from 'class-variance-authority';
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { Flex } from '../flex';
 import styles from './sidebar.module.css';
@@ -10,7 +11,7 @@ export const SidebarMain = forwardRef<
 >(({ className, children, ...props }, ref) => (
   <Flex
     ref={ref}
-    className={styles.main}
+    className={cx(styles.main, className)}
     direction='column'
     role='group'
     aria-label='Main navigation'
diff --git a/packages/raystack/components/sidebar/sidebar-misc.tsx b/packages/raystack/components/sidebar/sidebar-misc.tsx
index 36984eae..0e94eeec 100644
--- a/packages/raystack/components/sidebar/sidebar-misc.tsx
+++ b/packages/raystack/components/sidebar/sidebar-misc.tsx
@@ -12,7 +12,7 @@ export const SidebarHeader = forwardRef<
   <Flex
     align='center'
     ref={ref}
-    className={styles.header}
+    className={cx(styles.header, className)}
     role='banner'
     {...props}
   >
@@ -27,7 +27,7 @@ export const SidebarFooter = forwardRef<
 >(({ className, children, ...props }, ref) => (
   <Flex
     ref={ref}
-    className={styles.footer}
+    className={cx(styles.footer, className)}
     direction='column'
     role='group'
     aria-label='Footer navigation'
diff --git a/packages/raystack/components/sidebar/sidebar-root.tsx b/packages/raystack/components/sidebar/sidebar-root.tsx
index 4fd7faca..d9945cf0 100644
--- a/packages/raystack/components/sidebar/sidebar-root.tsx
+++ b/packages/raystack/components/sidebar/sidebar-root.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { cva } from 'class-variance-authority';
+import { cx } from 'class-variance-authority';
 import { Collapsible } from 'radix-ui';
 import {
   ComponentPropsWithoutRef,
@@ -23,8 +23,6 @@ export const SidebarContext = createContext<SidebarContextValue>({
   isCollapsed: false
 });
 
-const root = cva(styles.root);
-
 export interface SidebarRootProps
   extends ComponentPropsWithoutRef<typeof Collapsible.Root> {
   position?: 'left' | 'right';
@@ -71,7 +69,7 @@ export const SidebarRoot = forwardRef<
         <Tooltip.Provider>
           <Collapsible.Root
             ref={ref}
-            className={root({ className })}
+            className={cx(styles.root, className)}
             data-position={position}
             data-state={open ? 'expanded' : 'collapsed'}
             data-collapse-disabled={!collapsible}