diff --git a/package-lock.json b/package-lock.json
index dc6c9b8..b5f0692 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "cmdk": "^0.2.0",
         "date-fns": "^3.6.0",
         "input-otp": "^1.4.1",
-        "lucide-react": "^0.298.0",
+        "lucide-react": "^0.468.0",
         "react-day-picker": "^8.10.0",
         "react-icons": "^5.3.0",
         "react-resizable-panels": "^1.0.5",
@@ -14490,11 +14490,11 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.298.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.298.0.tgz",
-      "integrity": "sha512-tWoxZ663Zf/n8VxXTHnTJsU/w1ysWT1LORnIL1pzqElFdSqBhWbZeJ3sLdCZ5FpzpbkpkYEtluhuTyG2BTDYNQ==",
+      "version": "0.468.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.468.0.tgz",
+      "integrity": "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==",
       "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
     "node_modules/lz-string": {
diff --git a/package.json b/package.json
index 8a1873a..cb67a30 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "cmdk": "^0.2.0",
     "date-fns": "^3.6.0",
     "input-otp": "^1.4.1",
-    "lucide-react": "^0.298.0",
+    "lucide-react": "^0.468.0",
     "react-day-picker": "^8.10.0",
     "react-icons": "^5.3.0",
     "react-resizable-panels": "^1.0.5",
diff --git a/src/index.ts b/src/index.ts
index 95f40e5..775bfbc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -33,6 +33,7 @@ export * from "./shadcn/ui/scroll-area";
 export * from "./shadcn/ui/select";
 export * from "./shadcn/ui/separator";
 export * from "./shadcn/ui/sheet";
+export * from './shadcn/ui/sidebar';
 export * from "./shadcn/ui/skeleton";
 export * from "./shadcn/ui/slider";
 export * from "./shadcn/ui/switch";
diff --git a/src/shadcn/ui/button.tsx b/src/shadcn/ui/button.tsx
index 147bc00..54df553 100644
--- a/src/shadcn/ui/button.tsx
+++ b/src/shadcn/ui/button.tsx
@@ -1,11 +1,11 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "src/utils"
-
+ 
+import { cn } from "src"
+ 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -33,13 +33,13 @@ const buttonVariants = cva(
     },
   }
 )
-
+ 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
-
+ 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
@@ -53,5 +53,5 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   }
 )
 Button.displayName = "Button"
-
+ 
 export { Button, buttonVariants }
diff --git a/stories/shadcn/sidebar.stories.tsx b/stories/shadcn/sidebar.stories.tsx
new file mode 100644
index 0000000..2efde8b
--- /dev/null
+++ b/stories/shadcn/sidebar.stories.tsx
@@ -0,0 +1,380 @@
+
+import {
+  AudioWaveform,
+  BookOpen,
+  Bot,
+  Box,
+  BoxIcon,
+  ChevronDown,
+  Command,
+  FolderIcon,
+  FoldersIcon,
+  Frame,
+  GalleryVerticalEnd,
+  HammerIcon,
+  Map,
+  PieChart,
+  Settings2,
+  SquareTerminal,
+  TerminalIcon,
+  Zap,
+} from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarProvider,
+  SidebarRail,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  SidebarTrigger,
+  Separator,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuItem,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  SidebarMenuButton,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "src"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  teams: [
+    {
+      name: "Acme Inc",
+      logo: GalleryVerticalEnd,
+      plan: "Enterprise",
+    },
+    {
+      name: "Acme Corp.",
+      logo: AudioWaveform,
+      plan: "Startup",
+    },
+    {
+      name: "Evil Corp.",
+      logo: Command,
+      plan: "Free",
+    },
+  ],
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      
+      items: [
+        {
+          title: "History",
+          url: "#",
+        },
+        {
+          title: "Starred",
+          url: "#",
+        },
+        {
+          title: "Settings",
+          url: "#",
+        },
+      ],
+    },
+  
+   
+  ],
+  
+}
+
+
+  
+  import type { Meta, StoryObj } from "@storybook/react";
+
+
+  
+
+const SidebarDemo = () => {
+    const data = {
+        user: {
+          name: "shadcn",
+          email: "m@example.com",
+          avatar: "/avatars/shadcn.jpg",
+        },
+        teams: [
+          {
+            name: "Acme Inc",
+            logo: GalleryVerticalEnd,
+            plan: "Enterprise",
+          },
+          {
+            name: "Acme Corp.",
+            logo: AudioWaveform,
+            plan: "Startup",
+          },
+          {
+            name: "Evil Corp.",
+            logo: Command,
+            plan: "Free",
+          },
+        ],
+        navMain: [
+          {
+            title: "folder123",
+            url: "#",
+            icon: FolderIcon,
+            
+            items: [
+              {
+                title: "circuitA",
+                url: "#",
+              },
+              {
+                title: "circuitB",
+                url: "#",
+              },
+              {
+                title: "circuitC",
+                url: "#",
+              },
+            ],
+          },
+          {
+            title: "folder123",
+            url: "#",
+            icon: FolderIcon,
+            
+            items: [
+              {
+                title: "circuitA",
+                url: "#",
+              },
+              {
+                title: "circuitB",
+                url: "#",
+              },
+              {
+                title: "circuitC",
+                url: "#",
+              },
+            ],
+          },
+          {
+            title: "folder123vv",
+            url: "#",
+            icon: FolderIcon,
+            
+            items: [
+              {
+                title: "circuitA",
+                url: "#",
+              },
+              {
+                title: "circuitB",
+                url: "#",
+              },
+              {
+                title: "circuitC",
+                url: "#",
+              },
+            ],
+          },
+          {
+            title: "foldeav",
+            url: "#",
+            icon: FolderIcon,
+            
+            items: [
+              {
+                title: "circuitA",
+                url: "#",
+              },
+              {
+                title: "circuitB",
+                url: "#",
+              },
+              {
+                title: "circuitC",
+                url: "#",
+              },
+            ],
+          },
+          {
+            title: "folder1234",
+            url: "#",
+            icon: FolderIcon,
+            
+            items: [
+              {
+                title: "circuitA",
+                url: "#",
+              },
+              {
+                title: "circuitB",
+                url: "#",
+              },
+              {
+                title: "circuitC",
+                url: "#",
+              },
+            ],
+          },
+         
+        
+        ],
+        jobs: [
+            {
+                title: "All",
+                url: "#",
+                icon: BoxIcon,
+              },
+            {
+              title: "Compile",
+              url: "#",
+              icon: HammerIcon,
+              
+              items: [
+                {
+                  title: "job1",
+                  url: "#",
+                },
+                {
+                  title: "job2",
+                  url: "#",
+                  icon: Box,
+                },
+                {
+                  title: "job3",
+                  url: "#",
+                },
+              ],
+            },
+            {
+              title: "Execute",
+              url: "#",
+              icon: Zap,
+              items: [
+                {
+                  title: "Genesis",
+                  url: "#",
+                },
+                {
+                  title: "Explorer",
+                  url: "#",
+                },
+                {
+                  title: "Quantum",
+                  url: "#",
+                },
+              ],
+            },
+            {
+              title: "QMCI",
+              url: "#",
+              icon: TerminalIcon,
+              items: [
+                {
+                  title: "Introduction",
+                  url: "#",
+                },
+                {
+                  title: "Get Started",
+                  url: "#",
+                },
+                {
+                  title: "Tutorials",
+                  url: "#",
+                },
+                {
+                  title: "Changelog",
+                  url: "#",
+                },
+              ],
+            },
+         
+          ],
+        projects: [
+          {
+            name: "Design Engineering",
+            url: "#",
+            icon: Frame,
+          },
+          {
+            name: "Sales & Marketing",
+            url: "#",
+            icon: PieChart,
+          },
+          {
+            name: "Travel",
+            url: "#",
+            icon: Map,
+          },
+        ],
+      }
+  return (
+    <SidebarProvider>
+    <Sidebar collapsible="icon" >
+      <SidebarHeader>
+    Header
+      </SidebarHeader>
+      <SidebarContent>
+    
+        Content
+      </SidebarContent>
+      <SidebarFooter>
+      <div>Footer</div>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+    <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+          </div>
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  
+  );
+};
+const meta: Meta<typeof SidebarDemo> = {
+  component: SidebarDemo,
+ 
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof SidebarDemo> = {
+  args: {},
+};