diff --git a/app/App.vue b/app/App.vue
index de1f9b6..88fda6f 100644
--- a/app/App.vue
+++ b/app/App.vue
@@ -1,63 +1,103 @@
 <script lang="ts" setup>
-import router from './router'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { RouterLink, RouterView } from 'vue-router'
+import { ChevronDown, PanelLeft } from 'lucide-vue-next'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
+import router from './router'
 import { LumuixModeToggle } from '@/components/lumuix'
+import { SidebarProvider, Sidebar, SidebarContent, SidebarTrigger } from '@/components/sidebar'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarFooter,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarGroupAction
+} from '@/components/sidebar'
+import {  SidebarRail } from '@'
+
+const route = useRoute()
+const currentRoute = computed(() => route.path)
 
 const routes = router.getRoutes().filter((route) => route.children.length > 0)
 </script>
 
 <template>
-  <div>
-    <nav
-      id="nav-bar"
-      class="sticky top-0 z-10 flex h-fit w-full justify-between border-b border-slate-400 bg-background backdrop-blur dark:border-white">
-      <RouterLink to="/">
-        <img
-          src="/public/images/logo.png"
-          class="w-32"
-          alt="Lumuix Logo" />
-      </RouterLink>
-      <div class="text-primary my-auto mr-6 flex gap-2 font-bold">
-        <a href="https://github.com/SethSharp/lumuix"> 1.0.0-alpha.10.3 </a>
-        <LumuixModeToggle />
-      </div>
-    </nav>
-    <main>
-      <div class="flex">
-        <div class="h-screen w-1/4 bg-background">
-          <nav class="space-y-4 border-r border-slate-400 p-4 dark:border-white">
-            <div
-              v-for="group in routes"
-              :key="group.name">
-              <h3 class="text-lg font-medium text-heading">{{ group.name }}</h3>
+  <div class="flex">
+    <SidebarProvider>
+      <Sidebar side="left" variant="sidebar">
+        <SidebarHeader>
+          <RouterLink to="/">
+            <img
+              src="/public/images/logo.png"
+              class="w-full"
+              alt="Lumuix Logo" />
+          </RouterLink>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup
+            v-for="group in routes"
+            :key="group.name">
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <CollapsibleRoot default-open class="group/collapsible">
+                    <SidebarMenuItem>
+                      <SidebarGroupLabel as-child class="text-heading">
+                        <CollapsibleTrigger>
+                          <SidebarMenuButton>
+                            {{ group.name }}
+                            <ChevronDown />
+                          </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                      </SidebarGroupLabel>
+                      <CollapsibleContent>
+                        <SidebarMenuSub role="list">
+                          <SidebarMenuSubItem
+                            v-for="route in group.children"
+                            :key="route.name"
+                            class="hover:underline">
+                            <SidebarMenuButton :is-active="currentRoute === route.path" as-child>
+                              <RouterLink
+                                :to="route.path"
+                                class="text-text">
+                                {{ route.name }}
+                              </RouterLink>
+                            </SidebarMenuButton>
+                          </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </CollapsibleRoot>
+                </SidebarMenu>
+              </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+
+        <SidebarRail>
+          <div class="pl-10 py-3">
+            <PanelLeft />
+          </div>
+        </SidebarRail>
+
+        <SidebarFooter class="h-12 text-center">
+          <div class="text-primary m-auto flex gap-2 font-bold">
+            <a href="https://github.com/SethSharp/lumuix" class="my-auto"> 1.0.0-alpha.10.3 </a>
+            <LumuixModeToggle />
+          </div>
+        </SidebarFooter>
+      </Sidebar>
+    </SidebarProvider>
 
-              <ul
-                role="list"
-                class="flex flex-1 flex-col py-2">
-                <li>
-                  <ul class="space-y-2">
-                    <li
-                      v-for="route in group.children"
-                      :key="route.name"
-                      class="flex items-center hover:underline">
-                      <RouterLink
-                        :to="route.path"
-                        class="px-2 text-text">
-                        {{ route.name }}
-                      </RouterLink>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </div>
-          </nav>
-        </div>
-        <div class="w-3/4">
-          <component :is="$route.meta.layout">
-            <RouterView />
-          </component>
-        </div>
-      </div>
+    <main class="w-full px-8 p-4">
+      <component :is="$route.meta.layout">
+        <RouterView />
+      </component>
     </main>
   </div>
 </template>
diff --git a/app/layouts/MainLayout.vue b/app/layouts/MainLayout.vue
index 2bc5e3d..aa1c04a 100644
--- a/app/layouts/MainLayout.vue
+++ b/app/layouts/MainLayout.vue
@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="space-y-2 p-6 leading-loose bg-background h-screen">
+  <div class="space-y-2 leading-loose bg-background pt-6 pr-12 h-screen w-full">
     <slot name="breadcrumbs" />
 
     <h1 class="text-3xl font-bold text-heading">{{ $route.name }}</h1>
diff --git a/app/router.ts b/app/router.ts
index c3dede5..afa6f05 100644
--- a/app/router.ts
+++ b/app/router.ts
@@ -22,6 +22,7 @@ import {
   Select,
   Separator,
   Sheet,
+  Sidebar,
   Skeleton,
   Slider,
   Table,
@@ -228,6 +229,15 @@ const routes = [
           shadcn: true,
         },
       },
+      {
+        path: '/components/sidebar',
+        name: 'Sidebar',
+        component: Sidebar,
+        meta: {
+          layout: ComponentLayout,
+          shadcn: true,
+        },
+      },
       {
         path: '/components/skeleton',
         name: 'Skeleton',
@@ -298,7 +308,7 @@ const routes = [
 
 const router = createRouter({
   history: createWebHistory(),
-  linkActiveClass: '!font-medium underline',
+  linkActiveClass: '',
   routes,
 })
 
diff --git a/app/views/components/Sidebar.vue b/app/views/components/Sidebar.vue
new file mode 100644
index 0000000..732497d
--- /dev/null
+++ b/app/views/components/Sidebar.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { BlocksIcon, MoreHorizontal, PersonStanding, CheckCircle } from 'lucide-vue-next'
+// Sidebar is currently a WIP with 1/2 parts merged
+// https://github.com/unovue/shadcn-vue/pull/827
+// https://github.com/unovue/shadcn-vue/issues/805
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarContent,
+  SidebarTrigger,
+  SidebarMenuAction,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarGroup, SidebarMenu, SidebarGroupContent, SidebarGroupLabel
+} from '@/components/sidebar'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/dropdown-menu'
+
+const projects = [
+  {
+    name: 'Lumuix',
+    icon: BlocksIcon
+  },
+  {
+    name: 'Portfolio',
+    icon: PersonStanding
+  },
+  {
+    name: 'Habit Tracker',
+    icon: CheckCircle
+  }
+]
+</script>
+
+<template>
+  <SidebarProvider :default-open="false">
+    <SidebarTrigger />
+    <Sidebar collapsible="icon" side="right" variant="sidebar">
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            Projects
+          </SidebarGroupLabel>
+          <SidebarMenu>
+            <SidebarGroupContent>
+              <SidebarMenuItem v-for="project in projects">
+                <SidebarMenuButton asChild>
+                  <a href="#">
+                    <component :is="project.icon" />
+                    <span>{{ project.name }} </span>
+                  </a>
+                </SidebarMenuButton>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <SidebarMenuAction>
+                      <MoreHorizontal />
+                    </SidebarMenuAction>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="left" align="start">
+                    <DropdownMenuItem>
+                      <span>Edit Project</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <span>Delete Project</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarGroupContent>
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </SidebarProvider>
+</template>
\ No newline at end of file
diff --git a/app/views/index.ts b/app/views/index.ts
index 749a22d..ee072f4 100644
--- a/app/views/index.ts
+++ b/app/views/index.ts
@@ -20,6 +20,7 @@ export { default as RangeCalendar } from './components/RangeCalendar.vue'
 export { default as Select } from './components/Select.vue'
 export { default as Separator } from './components/Separator.vue'
 export { default as Sheet } from './components/Sheet.vue'
+export { default as Sidebar} from './components/Sidebar.vue'
 export { default as Skeleton } from './components/Skeleton.vue'
 export { default as Slider } from './components/Slider.vue'
 export { default as Table } from './components/Table.vue'
diff --git a/package-lock.json b/package-lock.json
index 2542b92..d2239ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1693,6 +1693,7 @@
       "version": "10.11.1",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
       "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
         "@vueuse/metadata": "10.11.1",
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
new file mode 100644
index 0000000..31e13fd
--- /dev/null
+++ b/src/components/sidebar/Sidebar.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Sheet from '@/components/sheet/Sheet.vue'
+import SheetContent from '@/components/sheet/SheetContent.vue'
+import { cn } from '@/lib/utils'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    side?: 'left' | 'right'
+    variant?: 'sidebar' | 'floating' | 'inset'
+    collapsible?: 'offcanvas' | 'icon' | 'none'
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    side: 'left',
+    variant: 'sidebar',
+    collapsible: 'offcanvas',
+  },
+)
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    :class="
+      cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)
+    "
+    v-bind="$attrs">
+    <slot />
+  </div>
+
+  <Sheet
+    v-else-if="isMobile"
+    :open="openMobile"
+    v-bind="$attrs"
+    @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-mobile="true"
+      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }">
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer hidden md:block"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side">
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="
+        cn(
+          'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+        )
+      " />
+    <div
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class,
+        )
+      "
+      v-bind="$attrs">
+      <div
+        data-sidebar="sidebar"
+        class="group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
new file mode 100644
index 0000000..926dd30
--- /dev/null
+++ b/src/components/sidebar/SidebarContent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="content"
+    :class="
+      cn(
+        'flex min-h-0 flex-1 flex-col overflow-auto bg-sidebar group-data-[collapsible=icon]:overflow-hidden',
+        props.class,
+      )
+    ">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarFooter.vue b/src/components/sidebar/SidebarFooter.vue
new file mode 100644
index 0000000..c99a399
--- /dev/null
+++ b/src/components/sidebar/SidebarFooter.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarGroup.vue b/src/components/sidebar/SidebarGroup.vue
new file mode 100644
index 0000000..66d307b
--- /dev/null
+++ b/src/components/sidebar/SidebarGroup.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarGroupAction.vue b/src/components/sidebar/SidebarGroupAction.vue
new file mode 100644
index 0000000..c1a8587
--- /dev/null
+++ b/src/components/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarGroupContent.vue b/src/components/sidebar/SidebarGroupContent.vue
new file mode 100644
index 0000000..966ce13
--- /dev/null
+++ b/src/components/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarGroupLabel.vue b/src/components/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 0000000..4f42cf3
--- /dev/null
+++ b/src/components/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    ">
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarHeader.vue b/src/components/sidebar/SidebarHeader.vue
new file mode 100644
index 0000000..64d7d29
--- /dev/null
+++ b/src/components/sidebar/SidebarHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarInput.vue b/src/components/sidebar/SidebarInput.vue
new file mode 100644
index 0000000..ea12427
--- /dev/null
+++ b/src/components/sidebar/SidebarInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Input from '@/components/inputs/Input.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Input
+    data-sidebar="input"
+    :class="
+      cn(
+        'focus-visible:ring-sidebar-ring h-8 w-full bg-background shadow-none focus-visible:ring-2',
+        props.class,
+      )
+    ">
+    <slot />
+  </Input>
+</template>
diff --git a/src/components/sidebar/SidebarInset.vue b/src/components/sidebar/SidebarInset.vue
new file mode 100644
index 0000000..b3b4809
--- /dev/null
+++ b/src/components/sidebar/SidebarInset.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <main
+    :class="
+      cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        props.class,
+      )
+    ">
+    <slot />
+  </main>
+</template>
diff --git a/src/components/sidebar/SidebarMenu.vue b/src/components/sidebar/SidebarMenu.vue
new file mode 100644
index 0000000..48be487
--- /dev/null
+++ b/src/components/sidebar/SidebarMenu.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+    <slot />
+  </ul>
+</template>
diff --git a/src/components/sidebar/SidebarMenuAction.vue b/src/components/sidebar/SidebarMenuAction.vue
new file mode 100644
index 0000000..d51b3cb
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      showOnHover?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'button',
+  },
+)
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-action"
+    :class="
+      cn(
+        'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class,
+      )
+    "
+    :as="as"
+    :as-child="asChild">
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarMenuBadge.vue b/src/components/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 0000000..e15993c
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarMenuButton.vue b/src/components/sidebar/SidebarMenuButton.vue
new file mode 100644
index 0000000..abb4e64
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { type Component, computed } from 'vue'
+import { useSidebar } from './utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
+import type { PrimitiveProps, AsTag } from 'radix-vue'
+import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component
+    }
+  >(),
+  {
+    as: 'button',
+    variant: 'default',
+    size: 'default',
+  },
+)
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = computed(() => {
+  const { tooltip, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <SidebarMenuButtonChild
+    v-if="!tooltip"
+    v-bind="{
+      ...delegatedProps,
+      ...$attrs,
+      as: props.as,
+    }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile">
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component
+        :is="tooltip"
+        v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/src/components/sidebar/SidebarMenuButtonChild.vue b/src/components/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 0000000..a0efa1f
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { type AsTag, Primitive, type PrimitiveProps } from 'radix-vue'
+import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  as?: AsTag
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs">
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarMenuItem.vue b/src/components/sidebar/SidebarMenuItem.vue
new file mode 100644
index 0000000..bfb97e0
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)">
+    <slot />
+  </li>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSkeleton.vue b/src/components/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 0000000..4421169
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Skeleton from '@/components/skeleton/Skeleton.vue'
+import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`
+})
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon" />
+
+    <Skeleton
+      class="h-4 max-w-[--skeleton-width] flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }" />
+  </div>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSub.vue b/src/components/sidebar/SidebarMenuSub.vue
new file mode 100644
index 0000000..e7e6ccc
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
+    <slot />
+  </ul>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSubButton.vue b/src/components/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 0000000..b3d82d9
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: 'sm' | 'md'
+      isActive?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'a',
+    size: 'md',
+  },
+)
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="
+      cn(
+        'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    ">
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/sidebar/SidebarMenuSubItem.vue b/src/components/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 0000000..fbc3fbf
--- /dev/null
+++ b/src/components/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
diff --git a/src/components/sidebar/SidebarProvider.vue b/src/components/sidebar/SidebarProvider.vue
new file mode 100644
index 0000000..91ef802
--- /dev/null
+++ b/src/components/sidebar/SidebarProvider.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { TooltipProvider } from 'radix-vue'
+import { useEventListener, useVModel } from '@vueuse/core'
+import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils'
+
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean
+    open?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    defaultOpen: true,
+    open: undefined,
+  },
+)
+
+const emits = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const isMobile = ref(false) // useIsMobile()
+const openMobile = ref(false)
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!open.value) : setOpen(!open.value)
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'))
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="
+        cn(
+          'group/sidebar-wrapper flex min-h-svh w-auto text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar',
+          props.class,
+        )
+      ">
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/src/components/sidebar/SidebarRail.vue b/src/components/sidebar/SidebarRail.vue
new file mode 100644
index 0000000..2fe25d7
--- /dev/null
+++ b/src/components/sidebar/SidebarRail.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="
+      cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class,
+      )
+    "
+    @click="toggleSidebar">
+    <slot />
+  </button>
+</template>
diff --git a/src/components/sidebar/SidebarSeparator.vue b/src/components/sidebar/SidebarSeparator.vue
new file mode 100644
index 0000000..b957a21
--- /dev/null
+++ b/src/components/sidebar/SidebarSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Separator from '@/components/separator/Separator.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Separator
+    data-sidebar="separator"
+    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+    <slot />
+  </Separator>
+</template>
diff --git a/src/components/sidebar/SidebarTrigger.vue b/src/components/sidebar/SidebarTrigger.vue
new file mode 100644
index 0000000..7175d14
--- /dev/null
+++ b/src/components/sidebar/SidebarTrigger.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Button from '@/components/button/Button.vue'
+import { cn } from '@/lib/utils'
+import { PanelLeft } from 'lucide-vue-next'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar">
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/src/components/sidebar/index.ts b/src/components/sidebar/index.ts
new file mode 100644
index 0000000..b137821
--- /dev/null
+++ b/src/components/sidebar/index.ts
@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/src/components/sidebar/utils.ts b/src/components/sidebar/utils.ts
new file mode 100644
index 0000000..3ded66c
--- /dev/null
+++ b/src/components/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'radix-vue'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')
diff --git a/src/index.ts b/src/index.ts
index c1e254f..7561be9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,6 +18,7 @@ export * from '@/components/range-calendar'
 export * from '@/components/select'
 export * from '@/components/separator'
 export * from '@/components/sheet'
+export * from '@/components/sidebar'
 export * from '@/components/skeleton'
 export * from '@/components/slider'
 export * from '@/components/table'
diff --git a/src/presets/preset.ts b/src/presets/preset.ts
index db2da4a..caf2652 100644
--- a/src/presets/preset.ts
+++ b/src/presets/preset.ts
@@ -62,6 +62,11 @@ export default {
           border: 'hsl(var(--card-border))',
           foreground: 'hsl(var(--card-foreground))',
         },
+
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+        },
       },
       borderRadius: {
         xl: 'calc(var(--radius) + 4px)',
diff --git a/src/presets/slate.css b/src/presets/slate.css
index 2322c3b..585789b 100644
--- a/src/presets/slate.css
+++ b/src/presets/slate.css
@@ -39,9 +39,27 @@
   --ring: 215 20.2% 65.1%;
 
   --radius: 0.5rem;
+
+  --sidebar: 0 0% 100%; /* white */
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 .dark {
+  --sidebar: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+
   --background: 229 84% 5%; /* slate-950 */
   --foreground: 214 32% 91%;