From e1dad5a683b7c2cd979ed7172b9def42806ce67c Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 18 May 2026 15:35:59 +0530
Subject: [PATCH 1/2] fix: sidebar css

---
 .../content/docs/components/sidebar/demo.ts   | 34 +++++++++----------
 .../components/sidebar/sidebar-main.tsx       |  1 +
 .../components/sidebar/sidebar.module.css     |  8 +++--
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/apps/www/src/content/docs/components/sidebar/demo.ts b/apps/www/src/content/docs/components/sidebar/demo.ts
index 227d6525e..ed96adc79 100644
--- a/apps/www/src/content/docs/components/sidebar/demo.ts
+++ b/apps/www/src/content/docs/components/sidebar/demo.ts
@@ -23,7 +23,7 @@ export const preview = {
   code: sidebarLayout(`
   <Sidebar defaultOpen>
     <Sidebar.Header>
-      <Flex align="center" gap={3}>
+      <Flex align="center" gap={3} style={{padding:"4px"}}>
         <IconButton size={4} aria-label="Logo">
           <BellIcon width={24} height={24} />
         </IconButton>
@@ -71,7 +71,7 @@ export const positionDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} position="left">
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -96,7 +96,7 @@ export const positionDemo = {
       code: sidebarLayoutRight(`
       <Sidebar open={true} position="right">
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -128,7 +128,7 @@ export const variantDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} variant="plain">
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -149,7 +149,7 @@ export const variantDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} variant="floating">
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -170,7 +170,7 @@ export const variantDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} variant="inset">
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -197,7 +197,7 @@ export const stateDemo = {
       name: 'Expanded',
       code: sidebarLayout(`<Sidebar open={true}>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -221,7 +221,7 @@ export const stateDemo = {
       name: 'Collapsed',
       code: sidebarLayout(`<Sidebar open={false}>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -245,7 +245,7 @@ export const stateDemo = {
       name: 'Uncontrolled',
       code: sidebarLayout(`<Sidebar>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -269,7 +269,7 @@ export const stateDemo = {
       name: 'Uncontrolled (default open)',
       code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -300,7 +300,7 @@ export const tooltipDemo = {
           tooltipMessage="Toggle navigation"
         >
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -326,7 +326,7 @@ export const collapsibleDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen collapsible={false}>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -348,7 +348,7 @@ export const hideTooltipDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen={false} hideCollapsedItemTooltip>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -373,7 +373,7 @@ export const collapsibleGroupDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -412,7 +412,7 @@ export const controlledGroupDemo = {
           return (
             ${sidebarLayout(`<Sidebar defaultOpen>
               <Sidebar.Header>
-                <Flex align="center" gap={3}>
+                <Flex align="center" gap={3} style={{padding:"4px"}}>
                   <IconButton size={4} aria-label="Logo">
                     <BellIcon width={24} height={24} />
                   </IconButton>
@@ -459,7 +459,7 @@ export const groupIconDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -492,7 +492,7 @@ export const moreDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3}>
+            <Flex align="center" gap={3} style={{padding:"4px"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
diff --git a/packages/raystack/components/sidebar/sidebar-main.tsx b/packages/raystack/components/sidebar/sidebar-main.tsx
index 1eaf5e7cb..59140bcbe 100644
--- a/packages/raystack/components/sidebar/sidebar-main.tsx
+++ b/packages/raystack/components/sidebar/sidebar-main.tsx
@@ -14,6 +14,7 @@ export function SidebarMain({
       className={cx(styles.main, className)}
       direction='column'
       role='group'
+      gap={3}
       aria-label='Main navigation'
       {...props}
     />
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index 2d6966542..b82b03cec 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -9,6 +9,7 @@
   flex-shrink: 0;
   background: var(--rs-color-background-base-primary);
   position: relative;
+  gap: var(--rs-space-6);
 }
 
 .root[data-position="left"] {
@@ -42,7 +43,7 @@
 
 .header {
   gap: var(--rs-space-3);
-  padding: var(--rs-space-2) var(--rs-space-5) var(--rs-space-7);
+  padding: 0 var(--rs-space-4);
   align-self: stretch;
   background: var(--rs-color-background-base-primary);
   overflow: hidden;
@@ -53,7 +54,6 @@
   overflow-y: auto;
   align-self: stretch;
   padding: 0 var(--rs-space-4);
-  gap: var(--rs-space-6);
   align-items: flex-start;
 }
 
@@ -243,6 +243,10 @@
   width: 100%;
 }
 
+.main .nav-group:not(:first-child) {
+  margin-top: var(--rs-space-4);
+}
+
 .root[data-closed] .nav-group {
   align-items: flex-start;
 }

From 77e19b9dd10e18c0f51854b509a045d52e267620 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 18 May 2026 15:43:54 +0530
Subject: [PATCH 2/2] fix: styles

---
 .../content/docs/components/sidebar/demo.ts   | 37 ++++++++++---------
 .../components/sidebar/sidebar-main.tsx       |  2 +-
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/www/src/content/docs/components/sidebar/demo.ts b/apps/www/src/content/docs/components/sidebar/demo.ts
index ed96adc79..f434643bb 100644
--- a/apps/www/src/content/docs/components/sidebar/demo.ts
+++ b/apps/www/src/content/docs/components/sidebar/demo.ts
@@ -23,7 +23,7 @@ export const preview = {
   code: sidebarLayout(`
   <Sidebar defaultOpen>
     <Sidebar.Header>
-      <Flex align="center" gap={3} style={{padding:"4px"}}>
+      <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
         <IconButton size={4} aria-label="Logo">
           <BellIcon width={24} height={24} />
         </IconButton>
@@ -34,6 +34,9 @@ export const preview = {
       <Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>
         Overview
       </Sidebar.Item>
+      <Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>
+        Preview
+      </Sidebar.Item>
       <Sidebar.Group label="Main">
         <Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>
           Dashboard
@@ -71,7 +74,7 @@ export const positionDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} position="left">
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -96,7 +99,7 @@ export const positionDemo = {
       code: sidebarLayoutRight(`
       <Sidebar open={true} position="right">
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -128,7 +131,7 @@ export const variantDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} variant="plain">
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -149,7 +152,7 @@ export const variantDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} variant="floating">
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -170,7 +173,7 @@ export const variantDemo = {
       code: sidebarLayout(`
       <Sidebar open={true} variant="inset">
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -197,7 +200,7 @@ export const stateDemo = {
       name: 'Expanded',
       code: sidebarLayout(`<Sidebar open={true}>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -221,7 +224,7 @@ export const stateDemo = {
       name: 'Collapsed',
       code: sidebarLayout(`<Sidebar open={false}>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -245,7 +248,7 @@ export const stateDemo = {
       name: 'Uncontrolled',
       code: sidebarLayout(`<Sidebar>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -269,7 +272,7 @@ export const stateDemo = {
       name: 'Uncontrolled (default open)',
       code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -300,7 +303,7 @@ export const tooltipDemo = {
           tooltipMessage="Toggle navigation"
         >
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -326,7 +329,7 @@ export const collapsibleDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen collapsible={false}>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -348,7 +351,7 @@ export const hideTooltipDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen={false} hideCollapsedItemTooltip>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -373,7 +376,7 @@ export const collapsibleGroupDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -412,7 +415,7 @@ export const controlledGroupDemo = {
           return (
             ${sidebarLayout(`<Sidebar defaultOpen>
               <Sidebar.Header>
-                <Flex align="center" gap={3} style={{padding:"4px"}}>
+                <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
                   <IconButton size={4} aria-label="Logo">
                     <BellIcon width={24} height={24} />
                   </IconButton>
@@ -459,7 +462,7 @@ export const groupIconDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
@@ -492,7 +495,7 @@ export const moreDemo = {
   type: 'code',
   code: sidebarLayout(`<Sidebar defaultOpen>
           <Sidebar.Header>
-            <Flex align="center" gap={3} style={{padding:"4px"}}>
+            <Flex align="center" gap={3} style={{padding:"var(--rs-space-2)"}}>
               <IconButton size={4} aria-label="Logo">
                 <BellIcon width={24} height={24} />
               </IconButton>
diff --git a/packages/raystack/components/sidebar/sidebar-main.tsx b/packages/raystack/components/sidebar/sidebar-main.tsx
index 59140bcbe..dc19f3b95 100644
--- a/packages/raystack/components/sidebar/sidebar-main.tsx
+++ b/packages/raystack/components/sidebar/sidebar-main.tsx
@@ -14,7 +14,7 @@ export function SidebarMain({
       className={cx(styles.main, className)}
       direction='column'
       role='group'
-      gap={3}
+      gap={2}
       aria-label='Main navigation'
       {...props}
     />