From 6af67b96f601f10b730358a4c75fcc57cea41b21 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 2 Oct 2026 17:22:04 +1000
Subject: [PATCH] tone down sidebar demo icons and clip preview corners

---
 .../example/sidebar-collapsible-icon.tsx      | 72 ++++++++++---------
 .../registry/default/example/sidebar-demo.tsx | 65 +++++++++--------
 .../ui/src/components/shadcn/ui/sidebar.tsx   |  2 +-
 3 files changed, 77 insertions(+), 62 deletions(-)

diff --git a/apps/design-system/registry/default/example/sidebar-collapsible-icon.tsx b/apps/design-system/registry/default/example/sidebar-collapsible-icon.tsx
index 4dd6b31c6a6..599b3b478e8 100644
--- a/apps/design-system/registry/default/example/sidebar-collapsible-icon.tsx
+++ b/apps/design-system/registry/default/example/sidebar-collapsible-icon.tsx
@@ -24,40 +24,46 @@ const items = [
   { title: 'Settings', url: '#', icon: Settings },
 ]
 
+const menuButtonClassName =
+  '[&>svg]:size-4 text-foreground-muted data-[active=true]:text-foreground'
+
 export default function SidebarCollapsibleIcon() {
   return (
-    <SidebarProvider defaultOpen className="h-[480px] min-h-0! w-full overflow-hidden">
-      <Sidebar collapsible="icon">
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>Application</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {items.map((item) => (
-                  <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton
-                      asChild
-                      isActive={item.title === 'Home'}
-                      tooltip={item.title}
-                    >
-                      <a href={item.url}>
-                        <item.icon />
-                        <span>{item.title}</span>
-                      </a>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-        <SidebarRail />
-      </Sidebar>
-      <SidebarInset>
-        <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
-          <SidebarTrigger className="-ml-1" />
-        </header>
-      </SidebarInset>
-    </SidebarProvider>
+    <div className="h-[480px] w-full overflow-hidden">
+      <SidebarProvider defaultOpen className="h-full min-h-0!">
+        <Sidebar collapsible="icon" className="[&_[data-sidebar=sidebar]]:bg-transparent">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Application</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={item.title === 'Home'}
+                        tooltip={item.title}
+                        className={menuButtonClassName}
+                      >
+                        <a href={item.url}>
+                          <item.icon strokeWidth={1.5} />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger className="-ml-1 text-foreground-muted" />
+          </header>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
   )
 }
diff --git a/apps/design-system/registry/default/example/sidebar-demo.tsx b/apps/design-system/registry/default/example/sidebar-demo.tsx
index 2af2b059404..437c8367cda 100644
--- a/apps/design-system/registry/default/example/sidebar-demo.tsx
+++ b/apps/design-system/registry/default/example/sidebar-demo.tsx
@@ -23,35 +23,44 @@ const items = [
   { title: 'Settings', url: '#', icon: Settings },
 ]
 
+const menuButtonClassName =
+  '[&>svg]:size-4 text-foreground-muted data-[active=true]:text-foreground'
+
 export default function SidebarDemo() {
   return (
-    <SidebarProvider className="h-[480px] min-h-0! w-full overflow-hidden">
-      <Sidebar>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>Application</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {items.map((item) => (
-                  <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton asChild isActive={item.title === 'Home'}>
-                      <a href={item.url}>
-                        <item.icon />
-                        <span>{item.title}</span>
-                      </a>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-      <SidebarInset>
-        <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
-          <SidebarTrigger className="-ml-1" />
-        </header>
-      </SidebarInset>
-    </SidebarProvider>
+    <div className="h-[480px] w-full overflow-hidden">
+      <SidebarProvider className="h-full min-h-0!">
+        <Sidebar className="[&_[data-sidebar=sidebar]]:bg-transparent">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Application</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={item.title === 'Home'}
+                        className={menuButtonClassName}
+                      >
+                        <a href={item.url}>
+                          <item.icon strokeWidth={1.5} />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <SidebarInset>
+          <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger className="-ml-1 text-foreground-muted" />
+          </header>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
   )
 }
diff --git a/packages/ui/src/components/shadcn/ui/sidebar.tsx b/packages/ui/src/components/shadcn/ui/sidebar.tsx
index 24fdc0b08cc..724312aaec2 100644
--- a/packages/ui/src/components/shadcn/ui/sidebar.tsx
+++ b/packages/ui/src/components/shadcn/ui/sidebar.tsx
@@ -277,7 +277,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <PanelLeft />
+      <PanelLeft className="size-4" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )