diff --git a/docs/app/app.vue b/docs/app/app.vue
index 9880bed14c..459e658fd8 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -58,24 +58,28 @@ provide('navigation', rootNavigation)
     <Analytics />
     <SpeedInsights />
 
-    <div :class="[route.path.startsWith('/docs/') && 'root']">
-      <template v-if="!route.path.startsWith('/examples')">
-        <!-- <Banner /> -->
+    <div class="flex">
+      <div class="flex-1" :class="[route.path.startsWith('/docs/') && 'root']">
+        <template v-if="!route.path.startsWith('/examples')">
+          <!-- <Banner /> -->
 
-        <Header />
-      </template>
+          <Header />
+        </template>
 
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
 
-      <template v-if="!route.path.startsWith('/examples')">
-        <Footer />
+        <template v-if="!route.path.startsWith('/examples')">
+          <Footer />
 
-        <ClientOnly>
-          <Search :files="files" :navigation="navigationByFramework" />
-        </ClientOnly>
-      </template>
+          <ClientOnly>
+            <Search :files="files" :navigation="navigationByFramework" />
+          </ClientOnly>
+        </template>
+      </div>
+
+      <Chat />
     </div>
   </UApp>
 </template>
diff --git a/docs/app/components/search/SearchChat.vue b/docs/app/components/chat/Chat.vue
similarity index 52%
rename from docs/app/components/search/SearchChat.vue
rename to docs/app/components/chat/Chat.vue
index 7ab98f359e..a24ac62497 100644
--- a/docs/app/components/search/SearchChat.vue
+++ b/docs/app/components/chat/Chat.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DefineComponent } from 'vue'
 import { Chat } from '@ai-sdk/vue'
-import type { UIMessage, UIToolInvocation } from 'ai'
+import type { UIToolInvocation } from 'ai'
 import { DefaultChatTransport } from 'ai'
 import { splitByCase, upperFirst } from 'scule'
 import ProseStreamPre from '../prose/PreStream.vue'
@@ -10,12 +10,7 @@ const components = {
   pre: ProseStreamPre as unknown as DefineComponent
 }
 
-const messages = defineModel<UIMessage[]>('messages')
-const fullscreen = defineModel<boolean>('fullscreen')
-
-const emits = defineEmits<{
-  close: []
-}>()
+const { open, messages } = useChat()
 
 const input = ref('')
 
@@ -54,13 +49,10 @@ function onSubmit() {
   input.value = ''
 }
 
-function onClose(e: Event) {
-  e.preventDefault()
-
-  emits('close')
-}
+watch(messages, (newMessages) => {
+  if (newMessages === chat.messages) return
 
-onMounted(() => {
+  chat.messages = newMessages
   if (chat.lastMessage?.role === 'user') {
     chat.regenerate()
   }
@@ -99,56 +91,83 @@ const getCachedToolMessage = useMemoize((state: State, toolName: string, input:
 </script>
 
 <template>
-  <UChatPalette>
-    <UChatMessages
-      should-auto-scroll
-      :messages="chat.messages"
-      :status="chat.status"
-      :user="{ side: 'left', variant: 'naked', icon: 'i-lucide-user' }"
-      :assistant="{ icon: 'i-lucide-bot' }"
-    >
-      <template #content="{ message }">
-        <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`">
-          <MDCCached
-            v-if="part.type === 'text' && message.role === 'assistant'"
-            :value="part.text"
-            :cache-key="`${message.id}-${index}`"
-            :components="components"
-            :parser-options="{ highlight: false }"
-            class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
-          />
-          <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">
-            {{ part.text }}
-          </p>
-
-          <p v-else-if="part.type === 'dynamic-tool'" class="text-muted text-sm leading-6 my-1.5">
-            {{ getCachedToolMessage(part.state, part.toolName, JSON.stringify(part.input || {})) }}
-          </p>
-        </template>
-      </template>
-    </UChatMessages>
-
-    <template #prompt>
+  <USidebar
+    v-model:open="open"
+    side="right"
+    collapsible="offcanvas"
+    title="AI Assistant"
+    close
+    close-icon="i-lucide-chevron-right"
+    :ui="{ footer: 'sm:px-4', container: 'sticky' }"
+    :style="{ '--sidebar-width': '20rem' }"
+  >
+    <template #body>
+      <UTheme
+        :ui="{
+          prose: {
+            p: { base: 'my-2.5 text-sm/6' },
+            li: { base: 'my-0.5 text-sm/6' },
+            ul: { base: 'my-2.5' },
+            ol: { base: 'my-2.5' },
+            h1: { base: 'text-xl mb-4' },
+            h2: { base: 'text-lg mt-6 mb-3' },
+            h3: { base: 'text-base mt-4 mb-2' },
+            h4: { base: 'text-sm mt-3 mb-1.5' },
+            code: { base: 'text-xs' },
+            pre: { root: 'my-2.5', base: 'text-xs/5' },
+            table: { root: 'my-2.5' },
+            hr: { base: 'my-5' }
+          }
+        }"
+      >
+        <UChatMessages
+          should-auto-scroll
+          :messages="chat.messages"
+          :status="chat.status"
+          compact
+          class="px-0"
+          :user="{ ui: { content: 'text-sm/6', container: 'pb-2.5' } }"
+        >
+          <template #content="{ message }">
+            <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`">
+              <MDCCached
+                v-if="part.type === 'text' && message.role === 'assistant'"
+                :value="part.text"
+                :cache-key="`${message.id}-${index}`"
+                :components="components"
+                :parser-options="{ highlight: false }"
+                class="*:first:mt-0! *:last:mb-0!"
+              />
+              <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">
+                {{ part.text }}
+              </p>
+
+              <p v-else-if="part.type === 'dynamic-tool'" class="text-muted text-sm leading-6 my-1.5">
+                {{ getCachedToolMessage(part.state, part.toolName, JSON.stringify(part.input || {})) }}
+              </p>
+            </template>
+          </template>
+        </UChatMessages>
+      </UTheme>
+    </template>
+
+    <template #footer>
       <UChatPrompt
         v-model="input"
-        icon="i-lucide-message-circle"
-        variant="naked"
         :error="chat.error"
-        :ui="{ trailing: 'items-center' }"
+        size="sm"
+        :autoresize="open"
+        :ui="{ base: 'px-0' }"
         @submit="onSubmit"
-        @close="onClose"
       >
-        <template #trailing>
-          <UButton
-            :icon="fullscreen ? 'i-lucide-maximize' : 'i-lucide-minimize'"
-            color="neutral"
-            variant="ghost"
-            class="group"
-            :ui="{ leadingIcon: 'text-dimmed group-hover:text-muted transition' }"
-            @click="fullscreen = !fullscreen"
-          />
-        </template>
+        <UChatPromptSubmit
+          color="neutral"
+          size="sm"
+          :status="chat.status"
+          @stop="chat.stop()"
+          @reload="chat.regenerate()"
+        />
       </UChatPrompt>
     </template>
-  </UChatPalette>
+  </USidebar>
 </template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarCloseExample.vue b/docs/app/components/content/examples/sidebar/SidebarCloseExample.vue
new file mode 100644
index 0000000000..f65747149a
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarCloseExample.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const open = ref(true)
+
+const items: NavigationMenuItem[] = [{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex h-full w-full [contain:paint]">
+    <USidebar
+      v-model:open="open"
+      collapsible="offcanvas"
+      title="Navigation"
+      close
+      :ui="{ container: 'absolute' }"
+    >
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center gap-2 px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          @click="open = !open"
+        />
+
+        <span class="font-semibold text-sm">Page Title</span>
+      </div>
+
+      <div class="flex-1" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarCloseIconExample.vue b/docs/app/components/content/examples/sidebar/SidebarCloseIconExample.vue
new file mode 100644
index 0000000000..fc1f25ec5a
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarCloseIconExample.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const open = ref(true)
+
+const items: NavigationMenuItem[] = [{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex h-full w-full [contain:paint]">
+    <USidebar
+      v-model:open="open"
+      collapsible="offcanvas"
+      title="Navigation"
+      close
+      close-icon="i-lucide-arrow-left"
+      :ui="{ container: 'absolute' }"
+    >
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center gap-2 px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          @click="open = !open"
+        />
+
+        <span class="font-semibold text-sm">Page Title</span>
+      </div>
+
+      <div class="flex-1" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarDescriptionExample.vue b/docs/app/components/content/examples/sidebar/SidebarDescriptionExample.vue
new file mode 100644
index 0000000000..3f5ee516fe
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarDescriptionExample.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const open = ref(true)
+
+const items: NavigationMenuItem[] = [{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex h-full w-full [contain:paint]">
+    <USidebar
+      v-model:open="open"
+      collapsible="offcanvas"
+      title="Navigation"
+      description="Browse your workspace"
+      :ui="{ container: 'absolute' }"
+    >
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center gap-2 px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          @click="open = !open"
+        />
+
+        <span class="font-semibold text-sm">Page Title</span>
+      </div>
+
+      <div class="flex-1" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarExample.vue b/docs/app/components/content/examples/sidebar/SidebarExample.vue
new file mode 100644
index 0000000000..21716a3ce7
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarExample.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const route = useRoute()
+
+const variant = computed(() => (route.query.variant as 'sidebar' | 'floating' | 'inset') || 'sidebar')
+const collapsible = computed(() => (route.query.collapsible as 'offcanvas' | 'icon' | 'none') || 'icon')
+const side = computed(() => (route.query.side as 'left' | 'right') || 'left')
+const mode = computed(() => (route.query.mode as 'modal' | 'slideover' | 'drawer') || 'slideover')
+
+const open = ref(true)
+
+const items: NavigationMenuItem[] = [{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}, {
+  label: 'Settings',
+  icon: 'i-lucide-settings'
+}]
+</script>
+
+<template>
+  <div class="flex h-full w-full [contain:paint]">
+    <USidebar
+      v-model:open="open"
+      :variant="variant"
+      :collapsible="collapsible"
+      :side="side"
+      :mode="mode"
+      title="Navigation"
+      close
+      :ui="{ container: 'absolute' }"
+    >
+      <template #default="{ state }">
+        <UNavigationMenu
+          :collapsed="state === 'collapsed'"
+          :items="items"
+          orientation="vertical"
+        />
+      </template>
+
+      <template #footer="{ state }">
+        <UButton
+          :avatar="{ src: 'https://github.com/benjamincanac.png' }"
+          :label="state === 'collapsed' ? undefined : 'Benjamin'"
+          color="neutral"
+          variant="ghost"
+          class="w-full"
+        />
+      </template>
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center gap-2 px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          @click="open = !open"
+        />
+
+        <span class="font-semibold text-sm">Page Title</span>
+      </div>
+
+      <div class="flex-1" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarOpenExample.vue b/docs/app/components/content/examples/sidebar/SidebarOpenExample.vue
new file mode 100644
index 0000000000..c2bff58e64
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarOpenExample.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const open = ref(true)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+
+const items: NavigationMenuItem[] = [{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex h-full w-full [contain:paint]">
+    <USidebar v-model:open="open" collapsible="icon" :ui="{ container: 'absolute' }">
+      <template #header="{ state }">
+        <span v-if="state === 'expanded'" class="font-semibold text-sm">Navigation</span>
+      </template>
+
+      <UNavigationMenu
+        :collapsed="!open"
+        :items="items"
+        orientation="vertical"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center gap-2 px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          @click="open = !open"
+        />
+
+        <span class="font-semibold text-sm">Page Title</span>
+      </div>
+
+      <div class="flex-1" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarPersistExample.vue b/docs/app/components/content/examples/sidebar/SidebarPersistExample.vue
new file mode 100644
index 0000000000..45199e0139
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarPersistExample.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const open = useLocalStorage('sidebar-open', true)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+
+const items: NavigationMenuItem[] = [{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex h-full w-full [contain:paint]">
+    <USidebar v-model:open="open" collapsible="icon" :ui="{ container: 'absolute' }">
+      <template #header="{ state }">
+        <span v-if="state === 'expanded'" class="font-semibold text-sm">Navigation</span>
+      </template>
+
+      <UNavigationMenu
+        :collapsed="!open"
+        :items="items"
+        orientation="vertical"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center gap-2 px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          @click="open = !open"
+        />
+
+        <span class="font-semibold text-sm">Page Title</span>
+      </div>
+
+      <div class="flex-1" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarTitleExample.vue b/docs/app/components/content/examples/sidebar/SidebarTitleExample.vue
new file mode 100644
index 0000000000..95424d0602
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarTitleExample.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const open = ref(true)
+
+const items: NavigationMenuItem[] = [{
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex h-full w-full [contain:paint]">
+    <USidebar
+      v-model:open="open"
+      collapsible="offcanvas"
+      title="Navigation"
+      :ui="{ container: 'absolute' }"
+    >
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center gap-2 px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          @click="open = !open"
+        />
+
+        <span class="font-semibold text-sm">Page Title</span>
+      </div>
+
+      <div class="flex-1" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/search/Search.vue b/docs/app/components/search/Search.vue
index d7375ead63..ca6d8fdd9b 100644
--- a/docs/app/components/search/Search.vue
+++ b/docs/app/components/search/Search.vue
@@ -14,7 +14,7 @@ defineProps<{
   navigation?: ContentNavigationItem[]
 }>()
 
-const { links, groups, fullscreen, chat, searchTerm, messages } = useSearch()
+const { links, groups, searchTerm } = useSearch()
 const { track } = useAnalytics()
 
 watchDebounced(searchTerm, (term) => {
@@ -22,12 +22,6 @@ watchDebounced(searchTerm, (term) => {
     track('Search Performed', { term })
   }
 }, { debounce: 500 })
-
-function onClose() {
-  chat.value = false
-
-  fullscreen.value = false
-}
 </script>
 
 <template>
@@ -37,11 +31,6 @@ function onClose() {
     :files="files"
     :groups="groups"
     :navigation="navigation"
-    :fullscreen="fullscreen"
     :fuse="{ resultLimit: 115 }"
-  >
-    <template v-if="chat" #content>
-      <SearchChat v-model:messages="messages" v-model:fullscreen="fullscreen" @close="onClose" />
-    </template>
-  </UContentSearch>
+  />
 </template>
diff --git a/docs/app/composables/useChat.ts b/docs/app/composables/useChat.ts
new file mode 100644
index 0000000000..089de4efe7
--- /dev/null
+++ b/docs/app/composables/useChat.ts
@@ -0,0 +1,12 @@
+import type { UIMessage } from 'ai'
+import { createSharedComposable } from '@vueuse/core'
+
+export const useChat = createSharedComposable(() => {
+  const open = ref(false)
+  const messages = ref<UIMessage[]>([])
+
+  return {
+    open,
+    messages
+  }
+})
diff --git a/docs/app/composables/useSearch.ts b/docs/app/composables/useSearch.ts
index a675f40b54..622137b743 100644
--- a/docs/app/composables/useSearch.ts
+++ b/docs/app/composables/useSearch.ts
@@ -1,18 +1,12 @@
-import type { UIMessage } from 'ai'
-
 export function useSearch() {
   const route = useRoute()
   const { frameworks } = useFrameworks()
   const { track } = useAnalytics()
+  const { open, messages } = useChat()
 
-  const chat = ref(false)
-  const fullscreen = ref(false)
   const searchTerm = ref('')
-  const messages = ref<UIMessage[]>([])
-
-  function onSelect(e: any) {
-    e.preventDefault()
 
+  function onSelect() {
     track('AI Chat Opened', { hasSearchTerm: !!searchTerm.value })
 
     messages.value = searchTerm.value
@@ -27,7 +21,7 @@ export function useSearch() {
           parts: [{ type: 'text', text: 'Hello, how can I help you today?' }]
         }]
 
-    chat.value = true
+    open.value = true
   }
 
   const links = computed(() => [!searchTerm.value && {
@@ -134,9 +128,6 @@ export function useSearch() {
   return {
     links,
     groups,
-    chat,
-    fullscreen,
-    searchTerm,
-    messages
+    searchTerm
   }
 }
diff --git a/docs/app/pages/docs/[...slug].vue b/docs/app/pages/docs/[...slug].vue
index 8a17c3be22..3b2f2d8f17 100644
--- a/docs/app/pages/docs/[...slug].vue
+++ b/docs/app/pages/docs/[...slug].vue
@@ -86,16 +86,24 @@ useHead({
   ]
 })
 
-const communityLinks = computed(() => [{
+const { open, messages } = useChat()
+
+const links = computed(() => [{
   icon: 'i-lucide-file-pen',
   label: 'Edit this page',
   to: `https://github.com/nuxt/ui/edit/v4/docs/content/${page?.value?.stem}.md`,
   target: '_blank'
 }, {
-  icon: 'i-lucide-star',
-  label: 'Star on GitHub',
-  to: `https://github.com/nuxt/ui`,
-  target: '_blank'
+  icon: 'i-lucide-bot',
+  label: 'Explain with AI',
+  onClick: () => {
+    messages.value = [{
+      id: String(Date.now()),
+      role: 'user',
+      parts: [{ type: 'text', text: `Read the documentation page at ${page.value?.path} and summarize it. I want to ask questions about it.` }]
+    }]
+    open.value = true
+  }
 }])
 </script>
 
@@ -148,11 +156,11 @@ const communityLinks = computed(() => [{
     </UPageBody>
 
     <template v-if="page?.body?.toc?.links?.length" #right>
-      <UContentToc :links="page.body.toc.links" class="z-[2]">
+      <UContentToc :links="page.body.toc.links" class="z-2">
         <template #bottom>
           <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
-          <UPageLinks title="Community" :links="communityLinks" />
+          <UPageLinks :links="links" />
 
           <USeparator type="dashed" />
 
diff --git a/docs/content/docs/1.getting-started/5.theme/2.css-variables.md b/docs/content/docs/1.getting-started/5.theme/2.css-variables.md
index b0d5202390..9610a89068 100644
--- a/docs/content/docs/1.getting-started/5.theme/2.css-variables.md
+++ b/docs/content/docs/1.getting-started/5.theme/2.css-variables.md
@@ -373,7 +373,7 @@ Nuxt UI provides a `--ui-header-height` CSS variable that controls the height of
 
 ```css
 :root {
-  --ui-header-height: --spacing(16);
+  --ui-header-height: 4rem;
 }
 ```
 
diff --git a/docs/content/docs/2.components/dashboard-sidebar.md b/docs/content/docs/2.components/dashboard-sidebar.md
index 9fec5099fe..3b61bd6094 100644
--- a/docs/content/docs/2.components/dashboard-sidebar.md
+++ b/docs/content/docs/2.components/dashboard-sidebar.md
@@ -10,7 +10,13 @@ links:
 
 ## Usage
 
-The DashboardSidebar component is used to display a sidebar. Its state (size, collapsed, etc.) will be saved based on the `storage` and `storage-key` props you provide to the [DashboardGroup](/docs/components/dashboard-group#props) component.
+The DashboardSidebar component is used to display a sidebar in a dashboard layout. It supports drag-to-resize, state persistence and integrates with [DashboardGroup](/docs/components/dashboard-group), [DashboardPanel](/docs/components/dashboard-panel) and [DashboardNavbar](/docs/components/dashboard-navbar).
+
+::tip{to="/docs/components/sidebar"}
+**DashboardSidebar vs Sidebar**: This component is designed for dashboard layouts with drag-to-resize, state persistence and `DashboardGroup` integration. For a simple, standalone sidebar (chat panel, settings, navigation), use [Sidebar](/docs/components/sidebar) instead.
+::
+
+Its state (size, collapsed, etc.) will be saved based on the `storage` and `storage-key` props you provide to the [DashboardGroup](/docs/components/dashboard-group#props) component.
 
 Use it inside the default slot of the [DashboardGroup](/docs/components/dashboard-group) component:
 
diff --git a/docs/content/docs/2.components/sidebar.md b/docs/content/docs/2.components/sidebar.md
new file mode 100644
index 0000000000..9ac32857cd
--- /dev/null
+++ b/docs/content/docs/2.components/sidebar.md
@@ -0,0 +1,274 @@
+---
+title: Sidebar
+description: 'A collapsible sidebar with multiple visual variants.'
+category: layout
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Sidebar.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The Sidebar component is a standalone, fixed sidebar that pushes the page content. On desktop, it renders inline and can be collapsed; on mobile, it opens as a sheet (Modal, Slideover or Drawer).
+
+::tip{to="/docs/components/dashboard-sidebar"}
+**Sidebar vs DashboardSidebar**: This component is a simple, standalone sidebar you can drop anywhere (chat panel, settings, navigation). If you need drag-to-resize, state persistence and integration with [DashboardGroup](/docs/components/dashboard-group), use [DashboardSidebar](/docs/components/dashboard-sidebar) instead.
+::
+
+Use the `title`, `description` and `close` props to customize the sidebar header just like the [Modal](/docs/components/modal), [Slideover](/docs/components/slideover) and [Drawer](/docs/components/drawer) components.
+
+Use the `body`, `default` and `footer` slots to customize the sidebar content. The `v-model:open` directive is viewport-aware: on desktop it controls the expanded/collapsed state, on mobile it controls the sheet menu.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the visual style of the sidebar. Defaults to `sidebar`.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+options:
+  - name: 'variant'
+    label: 'variant'
+    default: 'sidebar'
+    items:
+      - sidebar
+      - floating
+      - inset
+---
+::
+
+### Collapsible
+
+Use the `collapsible` prop to change the collapse behavior of the sidebar. Defaults to `none`.
+
+- `offcanvas`: The sidebar slides out of view completely.
+- `icon`: The sidebar shrinks to icon-only width.
+- `none`: The sidebar is not collapsible.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+options:
+  - name: 'collapsible'
+    label: 'collapsible'
+    default: 'icon'
+    items:
+      - offcanvas
+      - icon
+      - none
+---
+::
+
+::tip{to="#slots"}
+You can access the `state` in the slot props to customize the content of the sidebar when it is collapsed.
+::
+
+### Side
+
+Use the `side` prop to change the side of the sidebar. Defaults to `left`.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+options:
+  - name: 'side'
+    label: 'side'
+    default: 'left'
+    items:
+      - left
+      - right
+---
+::
+
+### Title
+
+Use the `title` prop to set the title of the sidebar header.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-title-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+---
+::
+
+### Description
+
+Use the `description` prop to set the description of the sidebar header.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-description-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+---
+::
+
+### Close
+
+Use the `close` prop to display a close button in the sidebar header. The close button is only rendered when `collapsible` is not `none`.
+
+You can pass any property from the [Button](/docs/components/button) component to customize it.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-close-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+---
+::
+
+### Close Icon
+
+Use the `close-icon` prop to customize the close button [Icon](/docs/components/icon). Defaults to `i-lucide-x`.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-close-icon-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+---
+::
+
+::tip
+You can use the `#title`, `#description` and `#close` slots to customize them.
+::
+
+### Width
+
+The sidebar width is controlled by the `--sidebar-width` CSS variable (defaults to `28rem`). The collapsed icon width is controlled by `--sidebar-width-icon` (defaults to `4rem`).
+
+Override them globally in your CSS or per-instance with the `style` attribute:
+
+```vue
+<USidebar :style="{ '--sidebar-width': '20rem' }" />
+```
+
+### With Navbar
+
+To position the sidebar below a fixed navbar, customize the container position using the `ui` prop:
+
+```vue
+<USidebar
+  :ui="{
+    gap: 'h-[calc(100vh-var(--ui-header-height))]',
+    container: 'top-[var(--ui-header-height)] bottom-0 h-[calc(100vh-var(--ui-header-height))]'
+  }"
+/>
+```
+
+::note
+The `--ui-header-height` variable defaults to `4rem` and is used by the [Header](/docs/components/header) and [DashboardNavbar](/docs/components/dashboard-navbar) components. Adjust it if your navbar uses a different height.
+::
+
+### Mode
+
+Use the `mode` prop to change the mode of the sidebar menu on mobile. Defaults to `slideover`.
+
+::component-example
+---
+collapse: true
+name: 'sidebar-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+options:
+  - name: 'mode'
+    label: 'mode'
+    default: 'slideover'
+    items:
+      - modal
+      - slideover
+      - drawer
+---
+::
+
+::tip{to="#props"}
+You can use the `menu` prop to customize the menu of the sidebar, it will adapt depending on the mode you choose.
+::
+
+## Examples
+
+### Control open state
+
+You can control the open state by using the `open` prop or the `v-model:open` directive. On desktop it controls the expanded/collapsed state, on mobile it opens/closes the sheet menu.
+
+::component-example
+---
+name: 'sidebar-open-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+---
+::
+
+::note
+In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can toggle the open state of the Sidebar by pressing :kbd{value="O"}.
+::
+
+### Persist open state
+
+Use [`useLocalStorage`](https://vueuse.org/core/useLocalStorage/) from VueUse or [`useCookie`](https://nuxt.com/docs/4.x/api/composables/use-cookie) instead of `ref` to persist the sidebar state across page reloads.
+
+::component-example
+---
+name: 'sidebar-persist-example'
+class: '!p-0 !justify-start'
+overflowHidden: true
+containerClass: 'h-[500px]'
+---
+::
+
+::note
+The only difference with the previous example is replacing `ref(true)` with `useLocalStorage('sidebar-open', true)`.
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/public/components/dark/sidebar.png b/docs/public/components/dark/sidebar.png
new file mode 100644
index 0000000000..5c368a6838
Binary files /dev/null and b/docs/public/components/dark/sidebar.png differ
diff --git a/docs/public/components/light/sidebar.png b/docs/public/components/light/sidebar.png
new file mode 100644
index 0000000000..3191d1beef
Binary files /dev/null and b/docs/public/components/light/sidebar.png differ
diff --git a/playgrounds/nuxt/app/app.vue b/playgrounds/nuxt/app/app.vue
index 2e635104d3..3d2df62db2 100644
--- a/playgrounds/nuxt/app/app.vue
+++ b/playgrounds/nuxt/app/app.vue
@@ -51,7 +51,9 @@ provide('components', components)
         </template>
       </UDashboardSidebar>
 
+      <NuxtPage v-if="route.path.startsWith('/components/sidebar')" />
       <UDashboardPanel
+        v-else
         :ui="{
           body: [
             'justify-center items-center',
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index ef65d4352c..74ee6c99b8 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -70,6 +70,7 @@ const components = [
   'select',
   'separator',
   'shortcuts',
+  'sidebar',
   'skeleton',
   'slideover',
   'slider',
diff --git a/playgrounds/nuxt/app/pages/components/sidebar.vue b/playgrounds/nuxt/app/pages/components/sidebar.vue
new file mode 100644
index 0000000000..a5d833502f
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/sidebar.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import { Chat } from '@ai-sdk/vue'
+import theme from '#build/ui/sidebar'
+
+const variants = Object.keys(theme.variants.variant)
+
+const input = ref('')
+const openLeft = ref(false)
+const openRight = ref(true)
+const variant = ref('sidebar' as const)
+
+const messages: UIMessage[] = [{
+  id: '1',
+  role: 'user',
+  parts: [{ type: 'text', text: 'What is Nuxt UI?' }]
+}, {
+  id: '2',
+  role: 'assistant',
+  parts: [{ type: 'text', text: 'Nuxt UI is a Vue component library built on Reka UI, Tailwind CSS, and Tailwind Variants. It provides 125+ accessible components for building modern web apps.' }]
+}]
+
+const chat = new Chat({
+  messages,
+  onError() {}
+})
+
+function onSubmit() {
+  chat.sendMessage({ text: input.value })
+  input.value = ''
+}
+</script>
+
+<template>
+  <div class="flex flex-1">
+    <USidebar
+      v-model:open="openLeft"
+      side="left"
+      :variant="variant"
+      collapsible="icon"
+      rail
+      :ui="{ container: 'relative' }"
+    >
+      <UNavigationMenu
+        :items="[{ label: 'Home', icon: 'i-lucide-home', to: '/' }, { label: 'Chat', icon: 'i-lucide-message-circle', to: '/chat' }]"
+        orientation="vertical"
+        :ui="{ link: 'p-1.5' }"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col overflow-hidden lg:peer-data-[variant=inset]:my-2 lg:peer-data-[variant=floating]:my-2 lg:peer-data-[variant=inset]:ms-0 lg:peer-data-[variant=inset]:rounded-xl lg:peer-data-[variant=inset]:shadow-sm lg:peer-data-[variant=inset]:ring lg:peer-data-[variant=inset]:ring-default">
+      <Navbar class="relative w-full">
+        <USelect v-model="variant" :items="variants" />
+
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          @click="openLeft = !openLeft"
+        />
+        <UButton
+          icon="i-lucide-panel-right"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          @click="openRight = !openRight"
+        />
+      </Navbar>
+
+      <div class="flex-1 p-6">
+        <USkeleton class="size-full animate-pulse" />
+      </div>
+    </div>
+
+    <USidebar
+      v-model:open="openRight"
+      side="right"
+      collapsible="offcanvas"
+      :variant="variant"
+      title="AI Chat"
+      close
+      rail
+      :style="{ '--sidebar-width': '20rem' }"
+    >
+      <template #body>
+        <UChatMessages
+          :messages="chat.messages"
+          :status="chat.status"
+          compact
+          class="px-0"
+        />
+      </template>
+
+      <template #footer>
+        <UChatPrompt
+          v-model="input"
+          :error="chat.error"
+          variant="subtle"
+          size="sm"
+          :ui="{ base: 'px-0' }"
+          @submit="onSubmit"
+        >
+          <UChatPromptSubmit size="sm" :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
+        </UChatPrompt>
+      </template>
+    </USidebar>
+  </div>
+</template>
diff --git a/src/runtime/components/Sidebar.vue b/src/runtime/components/Sidebar.vue
new file mode 100644
index 0000000000..e5e4f55efa
--- /dev/null
+++ b/src/runtime/components/Sidebar.vue
@@ -0,0 +1,329 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/sidebar'
+import type { ButtonProps, DrawerProps, IconProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types'
+import type { ComponentConfig } from '../types/tv'
+
+type Sidebar = ComponentConfig<typeof theme, AppConfig, 'sidebar'>
+
+type SidebarState = 'expanded' | 'collapsed'
+type SidebarMode = 'modal' | 'slideover' | 'drawer'
+type SidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never
+
+export interface SidebarProps<T extends SidebarMode = SidebarMode> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'aside'
+   */
+  as?: any
+  /**
+   * The visual variant of the sidebar.
+   * @defaultValue 'sidebar'
+   */
+  variant?: Sidebar['variants']['variant']
+  /**
+   * The collapse behavior of the sidebar.
+   * - `offcanvas`: The sidebar slides out of view completely.
+   * - `icon`: The sidebar shrinks to icon-only width.
+   * - `none`: The sidebar is not collapsible.
+   * @defaultValue 'none'
+   */
+  collapsible?: Sidebar['variants']['collapsible']
+  /**
+   * The side to render the sidebar on.
+   * @defaultValue 'left'
+   */
+  side?: Sidebar['variants']['side']
+  /**
+   * The title displayed in the sidebar header.
+   */
+  title?: string
+  /**
+   * The description displayed in the sidebar header.
+   */
+  description?: string
+  /**
+   * Display a close button to collapse the sidebar.
+   * Only renders when `collapsible` is not `none`.
+   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  close?: boolean | Omit<ButtonProps, LinkPropsKeys>
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
+   */
+  closeIcon?: IconProps['name']
+  /**
+   * Display a rail on the sidebar edge to toggle collapse.
+   * Only renders when `collapsible` is not `none`.
+   * @defaultValue false
+   */
+  rail?: boolean
+  /**
+   * The mode of the sidebar menu on mobile.
+   * @defaultValue 'slideover'
+   */
+  mode?: T
+  /**
+   * The props for the sidebar menu component on mobile.
+   */
+  menu?: SidebarMenu<T>
+  class?: any
+  ui?: Sidebar['slots']
+}
+
+export interface SidebarSlots {
+  header(props: { state: SidebarState, open: boolean, close: () => void }): any
+  title(props?: {}): any
+  description(props?: {}): any
+  actions(props?: {}): any
+  close(props: { ui: Sidebar['ui'] }): any
+  body(props: { state: SidebarState, open: boolean, close: () => void }): any
+  default(props: { state: SidebarState, open: boolean, close: () => void }): any
+  footer(props: { state: SidebarState, open: boolean, close: () => void }): any
+  rail(props: { ui: Sidebar['ui'] }): any
+  content(props: { close: () => void }): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends SidebarMode">
+import { computed, ref, toRef, watch } from 'vue'
+import { Primitive } from 'reka-ui'
+import { defu } from 'defu'
+import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useComponentUI } from '../composables/useComponentUI'
+import { useLocale } from '../composables/useLocale'
+import { tv } from '../utils/tv'
+import UButton from './Button.vue'
+import USlideover from './Slideover.vue'
+import UModal from './Modal.vue'
+import UDrawer from './Drawer.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<SidebarProps<T>>(), {
+  as: 'aside',
+  variant: 'sidebar',
+  collapsible: 'none',
+  side: 'left',
+  close: false,
+  rail: false,
+  mode: 'slideover' as never
+})
+const slots = defineSlots<SidebarSlots>()
+
+const [DefineInnerTemplate, ReuseInnerTemplate] = createReusableTemplate()
+
+const isMobile = useMediaQuery('(max-width: 1023px)')
+
+// Viewport-aware open model: on desktop controls expanded/collapsed, on mobile controls the sheet
+const modelOpen = defineModel<boolean>('open', { default: true })
+const openMobile = ref(false)
+
+// Saved desktop state so viewport transitions don't lose it
+const desktopOpen = ref(modelOpen.value)
+
+const open = computed({
+  get: () => isMobile.value ? openMobile.value : modelOpen.value,
+  set: (value: boolean) => {
+    if (isMobile.value) {
+      openMobile.value = value
+    } else {
+      modelOpen.value = value
+    }
+  }
+})
+
+// Handle viewport transitions and initial mobile state
+watch(isMobile, (mobile) => {
+  if (mobile) {
+    // Save desktop state and align model to mobile (closed)
+    desktopOpen.value = modelOpen.value
+    modelOpen.value = false
+  } else {
+    // Restore desktop state
+    modelOpen.value = desktopOpen.value
+  }
+}, { immediate: true })
+
+// Sync model changes into mobile state
+watch(modelOpen, (value) => {
+  if (isMobile.value) {
+    openMobile.value = value
+  }
+})
+
+// Sync mobile dismissal (overlay click, swipe) back to model so toggle stays in sync
+watch(openMobile, (value) => {
+  if (isMobile.value) {
+    modelOpen.value = value
+  }
+})
+
+const { t } = useLocale()
+const appConfig = useAppConfig() as Sidebar['AppConfig']
+const uiProp = useComponentUI('sidebar', props)
+
+const state = computed<SidebarState>(() => modelOpen.value ? 'expanded' : 'collapsed')
+
+// Close button only works when collapsible is not 'none'
+const canClose = computed(() => props.close && props.collapsible !== 'none')
+
+function closeSidebar() {
+  open.value = false
+}
+
+const hasHeader = computed(() => !!slots.header || props.title || !!slots.title || props.description || !!slots.description || !!slots.actions || canClose.value || !!slots.close)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.sidebar || {}) })({
+  side: props.side,
+  variant: props.variant,
+  collapsible: props.collapsible
+}))
+
+const Menu = computed(() => ({
+  slideover: USlideover,
+  modal: UModal,
+  drawer: UDrawer
+})[props.mode as SidebarMode])
+
+const menuProps = toRef(() => defu(props.menu, {
+  title: props.title,
+  description: props.description,
+  close: props.close,
+  closeIcon: props.closeIcon,
+  content: {
+    onOpenAutoFocus: (e: Event) => e.preventDefault()
+  }
+}, props.mode === 'modal' ? { fullscreen: true, transition: false } : props.mode === 'slideover' ? { side: props.side } : {}) as SidebarMenu<T>)
+</script>
+
+<template>
+  <DefineInnerTemplate>
+    <div data-slot="inner" :class="ui.inner({ class: uiProp?.inner })">
+      <div v-if="hasHeader" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+        <slot name="header" :state="state" :open="open" :close="closeSidebar">
+          <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+            <p v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </p>
+
+            <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </p>
+          </div>
+
+          <slot name="actions" />
+
+          <slot name="close" :ui="ui">
+            <UButton
+              v-if="canClose"
+              :icon="closeIcon || appConfig.ui.icons.close"
+              color="neutral"
+              variant="ghost"
+              :aria-label="t('sidebar.close')"
+              v-bind="(typeof props.close === 'object' ? props.close : {})"
+              data-slot="close"
+              :class="ui.close({ class: uiProp?.close })"
+              @click="closeSidebar"
+            />
+          </slot>
+        </slot>
+      </div>
+
+      <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+        <slot name="body" :state="state" :open="open" :close="closeSidebar">
+          <slot :state="state" :open="open" :close="closeSidebar" />
+        </slot>
+      </div>
+
+      <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+        <slot name="footer" :state="state" :open="open" :close="closeSidebar" />
+      </div>
+    </div>
+  </DefineInnerTemplate>
+
+  <!-- Non-collapsible: simple inline sidebar -->
+  <Primitive
+    v-if="collapsible === 'none'"
+    :as="as"
+    v-bind="$attrs"
+    data-slot="root"
+    :data-variant="variant"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+  >
+    <ReuseInnerTemplate />
+  </Primitive>
+
+  <!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+  <template v-else>
+    <Primitive
+      :as="as"
+      v-bind="$attrs"
+      data-slot="root"
+      :data-state="state"
+      :data-collapsible="state === 'collapsed' ? collapsible : undefined"
+      :data-variant="variant"
+      :data-side="side"
+      :class="ui.root({ class: [uiProp?.root, props.class] })"
+    >
+      <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+      <div
+        data-slot="gap"
+        :data-state="state"
+        :class="ui.gap({ class: uiProp?.gap })"
+      />
+
+      <!-- Fixed container: the actual visible sidebar -->
+      <div
+        data-slot="container"
+        :data-state="state"
+        :class="ui.container({ class: uiProp?.container })"
+      >
+        <ReuseInnerTemplate />
+
+        <slot v-if="rail" name="rail" :ui="ui">
+          <button
+            data-slot="rail"
+            :data-state="state"
+            :aria-label="t('sidebar.toggle')"
+            :tabindex="-1"
+            :class="ui.rail({ class: uiProp?.rail })"
+            @click="open = !open"
+          />
+        </slot>
+      </div>
+    </Primitive>
+
+    <!-- Mobile menu -->
+    <Menu
+      v-if="isMobile"
+      v-model:open="openMobile"
+      v-bind="menuProps"
+      :ui="{
+        overlay: ui.overlay({ class: uiProp?.overlay })
+      }"
+    >
+      <template v-if="!!slots.content" #content="contentData">
+        <slot name="content" v-bind="contentData" :close="closeSidebar" />
+      </template>
+
+      <template #body>
+        <slot name="body" :state="'expanded'" :open="true" :close="closeSidebar">
+          <slot :state="'expanded'" :open="true" :close="closeSidebar" />
+        </slot>
+      </template>
+
+      <template v-if="!!slots.footer" #footer>
+        <slot name="footer" :state="'expanded'" :open="true" :close="closeSidebar" />
+      </template>
+    </Menu>
+  </template>
+</template>
diff --git a/src/runtime/index.css b/src/runtime/index.css
index 25caadb162..11f685d967 100644
--- a/src/runtime/index.css
+++ b/src/runtime/index.css
@@ -7,7 +7,9 @@
 
 @layer theme {
   :root, :host {
-    --ui-header-height: --spacing(16);
+    --ui-header-height: 4rem;
+    --ui-radius: 0.25rem;
+    --ui-container: 80rem;
   }
 
   :root, :host, .light {
@@ -28,9 +30,6 @@
     --ui-border-muted: var(--ui-color-neutral-200);
     --ui-border-accented: var(--ui-color-neutral-300);
     --ui-border-inverted: var(--ui-color-neutral-900);
-
-    --ui-radius: 0.25rem;
-    --ui-container: 80rem;
   }
 
   .dark {
diff --git a/src/runtime/locale/ar.ts b/src/runtime/locale/ar.ts
index f501153e02..ce2153966e 100644
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -113,6 +113,10 @@ export default defineLocale<Messages>({
         copy: 'نسخ الكود إلى الحافظة'
       }
     },
+    sidebar: {
+      close: 'إغلاق',
+      toggle: 'تبديل'
+    },
     selectMenu: {
       create: 'إنشاء "{label}"',
       noData: 'لا توجد بيانات',
diff --git a/src/runtime/locale/az.ts b/src/runtime/locale/az.ts
index fd745722c5..5315439a60 100644
--- a/src/runtime/locale/az.ts
+++ b/src/runtime/locale/az.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kodu buferə kopyala'
       }
     },
+    sidebar: {
+      close: 'Bağla',
+      toggle: 'Dəyişdir'
+    },
     selectMenu: {
       create: '"{label}" yarat',
       noData: 'Məlumat yoxdur',
diff --git a/src/runtime/locale/be.ts b/src/runtime/locale/be.ts
index 84c078ca69..e70b70b847 100644
--- a/src/runtime/locale/be.ts
+++ b/src/runtime/locale/be.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Скапіяваць код у буфер абмену'
       }
     },
+    sidebar: {
+      close: 'Закрыць',
+      toggle: 'Пераключыць'
+    },
     selectMenu: {
       create: 'Стварыць "{label}"',
       noData: 'Няма даных',
diff --git a/src/runtime/locale/bg.ts b/src/runtime/locale/bg.ts
index f629c9f15a..9e613c37b3 100644
--- a/src/runtime/locale/bg.ts
+++ b/src/runtime/locale/bg.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Копирай кода в клипборда'
       }
     },
+    sidebar: {
+      close: 'Затворете',
+      toggle: 'Превключване'
+    },
     selectMenu: {
       create: 'Създайте "{label}"',
       noData: 'Няма данни',
diff --git a/src/runtime/locale/bn.ts b/src/runtime/locale/bn.ts
index fd113b0d29..b8603c9083 100644
--- a/src/runtime/locale/bn.ts
+++ b/src/runtime/locale/bn.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'কোড ক্লিপবোর্ডে কপি করুন'
       }
     },
+    sidebar: {
+      close: 'বন্ধ করুন',
+      toggle: 'টগল করুন'
+    },
     selectMenu: {
       create: '"{label}" তৈরি করুন',
       noData: 'কোন তথ্য নেই',
diff --git a/src/runtime/locale/ca.ts b/src/runtime/locale/ca.ts
index 6140fd8025..6c34d6a173 100644
--- a/src/runtime/locale/ca.ts
+++ b/src/runtime/locale/ca.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copiar codi al portapapers'
       }
     },
+    sidebar: {
+      close: 'Tancar',
+      toggle: 'Canviar'
+    },
     selectMenu: {
       create: 'Crear "{label}"',
       noData: 'Sense dades',
diff --git a/src/runtime/locale/ckb.ts b/src/runtime/locale/ckb.ts
index d7fcc45035..b8f44b5cbe 100644
--- a/src/runtime/locale/ckb.ts
+++ b/src/runtime/locale/ckb.ts
@@ -113,6 +113,10 @@ export default defineLocale<Messages>({
         copy: 'لەبەرگرتنەوەی کۆد'
       }
     },
+    sidebar: {
+      close: 'داخستن',
+      toggle: 'گۆڕین'
+    },
     selectMenu: {
       create: '"{label}" زیادکردنی',
       noData: 'هیچ داتایەک نییە',
diff --git a/src/runtime/locale/cs.ts b/src/runtime/locale/cs.ts
index 0703d84d95..9d984e249a 100644
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopírovat kód do schránky'
       }
     },
+    sidebar: {
+      close: 'Zavřít',
+      toggle: 'Přepnout'
+    },
     selectMenu: {
       create: 'Vytvořit "{label}"',
       noData: 'Žádná data',
diff --git a/src/runtime/locale/da.ts b/src/runtime/locale/da.ts
index 373e30f8fc..d333e6cd3e 100644
--- a/src/runtime/locale/da.ts
+++ b/src/runtime/locale/da.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopiér kode til udklipsholder'
       }
     },
+    sidebar: {
+      close: 'Luk',
+      toggle: 'Skift'
+    },
     selectMenu: {
       create: 'Opret "{label}"',
       noData: 'Ingen data',
diff --git a/src/runtime/locale/de.ts b/src/runtime/locale/de.ts
index 22f4432272..531c5f0cad 100644
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Code in die Zwischenablage kopieren'
       }
     },
+    sidebar: {
+      close: 'Schließen',
+      toggle: 'Umschalten'
+    },
     selectMenu: {
       create: '"{label}" erstellen',
       noData: 'Keine Daten',
diff --git a/src/runtime/locale/de_ch.ts b/src/runtime/locale/de_ch.ts
index e321f26a8a..b1c30714a0 100644
--- a/src/runtime/locale/de_ch.ts
+++ b/src/runtime/locale/de_ch.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Code in die Zwischenablage kopieren'
       }
     },
+    sidebar: {
+      close: 'Schliessen',
+      toggle: 'Umschalten'
+    },
     selectMenu: {
       create: '"{label}" erstellen',
       noData: 'Keine Daten',
diff --git a/src/runtime/locale/el.ts b/src/runtime/locale/el.ts
index 9422ca9c4a..c17aea7176 100644
--- a/src/runtime/locale/el.ts
+++ b/src/runtime/locale/el.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Αντιγραφή κώδικα στο πρόχειρο'
       }
     },
+    sidebar: {
+      close: 'Κλείσιμο',
+      toggle: 'Εναλλαγή'
+    },
     selectMenu: {
       create: 'Δημιουργία "{label}"',
       noData: 'Δεν υπάρχουν δεδομένα',
diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts
index 0cffb91108..98c3b437f2 100644
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copy code to clipboard'
       }
     },
+    sidebar: {
+      close: 'Close',
+      toggle: 'Toggle'
+    },
     selectMenu: {
       create: 'Create "{label}"',
       noData: 'No data',
diff --git a/src/runtime/locale/es.ts b/src/runtime/locale/es.ts
index 4c573edda9..ce879c2d5c 100644
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copiar código al portapapeles'
       }
     },
+    sidebar: {
+      close: 'Cerrar',
+      toggle: 'Alternar'
+    },
     selectMenu: {
       create: 'Crear "{label}"',
       noData: 'Sin datos',
diff --git a/src/runtime/locale/et.ts b/src/runtime/locale/et.ts
index f2ce4dd9be..e1ce346098 100644
--- a/src/runtime/locale/et.ts
+++ b/src/runtime/locale/et.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopeeri kood lõikelauale'
       }
     },
+    sidebar: {
+      close: 'Sulge',
+      toggle: 'Lülita'
+    },
     selectMenu: {
       create: 'Loo "{label}"',
       noData: 'Pole andmeid',
diff --git a/src/runtime/locale/eu.ts b/src/runtime/locale/eu.ts
index 077c12e176..ec845ea7e0 100644
--- a/src/runtime/locale/eu.ts
+++ b/src/runtime/locale/eu.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopiatu kodea clipboard-era'
       }
     },
+    sidebar: {
+      close: 'Itxi',
+      toggle: 'Txandakatu'
+    },
     selectMenu: {
       create: 'Sortu {label}',
       noData: 'Daturik gabe',
diff --git a/src/runtime/locale/fa_ir.ts b/src/runtime/locale/fa_ir.ts
index 147d82781a..189a140b25 100644
--- a/src/runtime/locale/fa_ir.ts
+++ b/src/runtime/locale/fa_ir.ts
@@ -113,6 +113,10 @@ export default defineLocale<Messages>({
         copy: 'کپی کد در کلیپ‌بورد'
       }
     },
+    sidebar: {
+      close: 'بستن',
+      toggle: 'تغییر وضعیت'
+    },
     selectMenu: {
       create: 'ایجاد "{label}"',
       noData: 'داده‌ای موجود نیست',
diff --git a/src/runtime/locale/fi.ts b/src/runtime/locale/fi.ts
index 311704e60a..320a159ad7 100644
--- a/src/runtime/locale/fi.ts
+++ b/src/runtime/locale/fi.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopioi koodi leikepöydälle'
       }
     },
+    sidebar: {
+      close: 'Sulje',
+      toggle: 'Vaihda'
+    },
     selectMenu: {
       create: 'Luo "{label}"',
       noData: 'Ei tietoja',
diff --git a/src/runtime/locale/fr.ts b/src/runtime/locale/fr.ts
index 1c74bc825f..7bf49e46a8 100644
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copier le code dans le presse-papiers'
       }
     },
+    sidebar: {
+      close: 'Fermer',
+      toggle: 'Basculer'
+    },
     selectMenu: {
       create: 'Créer "{label}"',
       noData: 'Aucune donnée',
diff --git a/src/runtime/locale/gl.ts b/src/runtime/locale/gl.ts
index 4ae693cf5a..223696259c 100644
--- a/src/runtime/locale/gl.ts
+++ b/src/runtime/locale/gl.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copiar código ao portapapeis'
       }
     },
+    sidebar: {
+      close: 'Pechar',
+      toggle: 'Alternar'
+    },
     selectMenu: {
       create: 'Crear "{label}"',
       noData: 'Sen datos',
diff --git a/src/runtime/locale/he.ts b/src/runtime/locale/he.ts
index 0855ec3088..0ae2d7d7c9 100644
--- a/src/runtime/locale/he.ts
+++ b/src/runtime/locale/he.ts
@@ -113,6 +113,10 @@ export default defineLocale<Messages>({
         copy: 'העתק קוד ללוח'
       }
     },
+    sidebar: {
+      close: 'סגור',
+      toggle: 'החלף'
+    },
     selectMenu: {
       create: 'צור "{label}"',
       noData: 'אין נתונים',
diff --git a/src/runtime/locale/hi.ts b/src/runtime/locale/hi.ts
index 61fa58bca1..cf17bd837c 100644
--- a/src/runtime/locale/hi.ts
+++ b/src/runtime/locale/hi.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'कोड को क्लिपबोर्ड पर कॉपी करें'
       }
     },
+    sidebar: {
+      close: 'बंद करें',
+      toggle: 'टॉगल करें'
+    },
     selectMenu: {
       create: '"{label}" बनाएँ',
       noData: 'कोई डेटा नहीं',
diff --git a/src/runtime/locale/hr.ts b/src/runtime/locale/hr.ts
index 8bed8ec9ba..51ee66e097 100644
--- a/src/runtime/locale/hr.ts
+++ b/src/runtime/locale/hr.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopiraj kod u međuspremnik'
       }
     },
+    sidebar: {
+      close: 'Zatvori',
+      toggle: 'Prebaci'
+    },
     selectMenu: {
       create: 'Stvori "{label}"',
       noData: 'Nema podataka',
diff --git a/src/runtime/locale/hu.ts b/src/runtime/locale/hu.ts
index e3a293b247..eee88a4d59 100644
--- a/src/runtime/locale/hu.ts
+++ b/src/runtime/locale/hu.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kód másolása a vágólapra'
       }
     },
+    sidebar: {
+      close: 'Bezárás',
+      toggle: 'Váltás'
+    },
     selectMenu: {
       create: '"{label}" létrehozása',
       noData: 'Nincs adat',
diff --git a/src/runtime/locale/hy.ts b/src/runtime/locale/hy.ts
index 43283166de..34f37c1cfa 100644
--- a/src/runtime/locale/hy.ts
+++ b/src/runtime/locale/hy.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Պատճենել կոդը սեղմատախտակին'
       }
     },
+    sidebar: {
+      close: 'Փակել',
+      toggle: 'Փոխարկել'
+    },
     selectMenu: {
       create: 'Ստեղծել "{label}"',
       noData: 'Տվյալներ չկան',
diff --git a/src/runtime/locale/id.ts b/src/runtime/locale/id.ts
index 686416e456..484a01a8de 100644
--- a/src/runtime/locale/id.ts
+++ b/src/runtime/locale/id.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Salin kode ke clipboard'
       }
     },
+    sidebar: {
+      close: 'Tutup',
+      toggle: 'Alihkan'
+    },
     selectMenu: {
       create: 'Buat "{label}"',
       noData: 'Tidak ada data',
diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts
index 90305cf035..71b2ddb017 100644
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copia codice negli appunti'
       }
     },
+    sidebar: {
+      close: 'Chiudi',
+      toggle: 'Alterna'
+    },
     selectMenu: {
       create: 'Crea "{label}"',
       noData: 'Nessun dato',
diff --git a/src/runtime/locale/ja.ts b/src/runtime/locale/ja.ts
index 90a16c8677..55a0dc6c15 100644
--- a/src/runtime/locale/ja.ts
+++ b/src/runtime/locale/ja.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'コードをクリップボードにコピー'
       }
     },
+    sidebar: {
+      close: '閉じる',
+      toggle: '切り替え'
+    },
     selectMenu: {
       create: '"{label}"を作成',
       noData: 'データがありません',
diff --git a/src/runtime/locale/ka.ts b/src/runtime/locale/ka.ts
index 798da9a72a..2334424507 100644
--- a/src/runtime/locale/ka.ts
+++ b/src/runtime/locale/ka.ts
@@ -114,6 +114,10 @@ export default defineLocale<Messages>({
         copy: 'კოდის კოპირება ბუფერში'
       }
     },
+    sidebar: {
+      close: 'დახურვა',
+      toggle: 'გადართვა'
+    },
     selectMenu: {
       create: 'დაამატე "{label}"', // "Create" translates as "შექმნა", but since we are simply adding new choice, creating sounds wrong, thus I chose to use "დაამატე", meaning "add".
       noData: 'მონაცემები არ არის',
diff --git a/src/runtime/locale/kk.ts b/src/runtime/locale/kk.ts
index 11e481a19f..9b37b7980f 100644
--- a/src/runtime/locale/kk.ts
+++ b/src/runtime/locale/kk.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Кодты алмасу буферіне көшіру'
       }
     },
+    sidebar: {
+      close: 'Жабу',
+      toggle: 'Ауыстыру'
+    },
     selectMenu: {
       create: '"{label}" жасау',
       noData: 'Деректер жоқ',
diff --git a/src/runtime/locale/km.ts b/src/runtime/locale/km.ts
index 2d4198de06..f796219163 100644
--- a/src/runtime/locale/km.ts
+++ b/src/runtime/locale/km.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'ចម្លងកូដទៅក្ដារតម្បៀតខ្ទាស់'
       }
     },
+    sidebar: {
+      close: 'បិទ',
+      toggle: 'បិទ/បើក'
+    },
     selectMenu: {
       create: 'បង្កើត "{label}"',
       noData: 'មិនមានទិន្នន័យ',
diff --git a/src/runtime/locale/ko.ts b/src/runtime/locale/ko.ts
index 7dc2e4411b..7d87757197 100644
--- a/src/runtime/locale/ko.ts
+++ b/src/runtime/locale/ko.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: '코드를 클립보드에 복사'
       }
     },
+    sidebar: {
+      close: '닫기',
+      toggle: '토글'
+    },
     selectMenu: {
       create: '"{label}" 생성',
       noData: '데이터가 없습니다.',
diff --git a/src/runtime/locale/ky.ts b/src/runtime/locale/ky.ts
index 8895876854..6a98779b7f 100644
--- a/src/runtime/locale/ky.ts
+++ b/src/runtime/locale/ky.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Кодду алмашуу буферине көчүрүү'
       }
     },
+    sidebar: {
+      close: 'Жабуу',
+      toggle: 'Которуу'
+    },
     selectMenu: {
       create: '"{label}" жасоо',
       noData: 'Маалымат жок',
diff --git a/src/runtime/locale/lb.ts b/src/runtime/locale/lb.ts
index f574b01612..a2e6913ce3 100644
--- a/src/runtime/locale/lb.ts
+++ b/src/runtime/locale/lb.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Code an d\'Zwëschspäicher kopéieren'
       }
     },
+    sidebar: {
+      close: 'Zoumaachen',
+      toggle: 'Ëmschalten'
+    },
     selectMenu: {
       create: '"{label}" erstellen',
       noData: 'Keng Donnéeën',
diff --git a/src/runtime/locale/lo.ts b/src/runtime/locale/lo.ts
index 48a317b513..0badee4c94 100644
--- a/src/runtime/locale/lo.ts
+++ b/src/runtime/locale/lo.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'ຄັດລອກໂຄ້ດ'
       }
     },
+    sidebar: {
+      close: 'ປິດ',
+      toggle: 'ສະລັບ'
+    },
     selectMenu: {
       create: 'ສ້າງ "{label}"',
       noData: 'ບໍ່ມີຂໍ້ມູນ',
diff --git a/src/runtime/locale/lt.ts b/src/runtime/locale/lt.ts
index 110847e4cd..5d6ef3676e 100644
--- a/src/runtime/locale/lt.ts
+++ b/src/runtime/locale/lt.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopijuoti kodą į iškarpinę'
       }
     },
+    sidebar: {
+      close: 'Uždaryti',
+      toggle: 'Perjungti'
+    },
     selectMenu: {
       create: 'Sukurti „{label}"',
       noData: 'Nėra duomenų',
diff --git a/src/runtime/locale/mn.ts b/src/runtime/locale/mn.ts
index 0d801ef562..7961eba61f 100644
--- a/src/runtime/locale/mn.ts
+++ b/src/runtime/locale/mn.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Кодыг санах ойд хуулах'
       }
     },
+    sidebar: {
+      close: 'Хаах',
+      toggle: 'Сэлгэх'
+    },
     selectMenu: {
       create: '"{label}" үүсгэх',
       noData: 'Мэдээлэл байхгүй',
diff --git a/src/runtime/locale/ms.ts b/src/runtime/locale/ms.ts
index f021598c61..bab38b2d50 100644
--- a/src/runtime/locale/ms.ts
+++ b/src/runtime/locale/ms.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Salin kod ke papan klip'
       }
     },
+    sidebar: {
+      close: 'Tutup',
+      toggle: 'Togol'
+    },
     selectMenu: {
       create: 'Cipta "{label}"',
       noData: 'Tiada data',
diff --git a/src/runtime/locale/nb_no.ts b/src/runtime/locale/nb_no.ts
index 5c92e3c79a..16885e6ac0 100644
--- a/src/runtime/locale/nb_no.ts
+++ b/src/runtime/locale/nb_no.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopier kode til utklippstavle'
       }
     },
+    sidebar: {
+      close: 'Lukk',
+      toggle: 'Veksle'
+    },
     selectMenu: {
       create: 'Opprett "{label}"',
       noData: 'Ingen data',
diff --git a/src/runtime/locale/nl.ts b/src/runtime/locale/nl.ts
index dba219d0f7..03699f43c3 100644
--- a/src/runtime/locale/nl.ts
+++ b/src/runtime/locale/nl.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Code naar klembord kopiëren'
       }
     },
+    sidebar: {
+      close: 'Sluiten',
+      toggle: 'Schakelen'
+    },
     selectMenu: {
       create: '"{label}" creëren',
       noData: 'Geen gegevens',
diff --git a/src/runtime/locale/pl.ts b/src/runtime/locale/pl.ts
index bbd092fa4c..73e0467e4b 100644
--- a/src/runtime/locale/pl.ts
+++ b/src/runtime/locale/pl.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopiuj kod do schowka'
       }
     },
+    sidebar: {
+      close: 'Zamknij',
+      toggle: 'Przełącz'
+    },
     selectMenu: {
       create: 'Utwórz "{label}"',
       noData: 'Brak danych',
diff --git a/src/runtime/locale/pt.ts b/src/runtime/locale/pt.ts
index 6a34792c38..f72c1f005f 100644
--- a/src/runtime/locale/pt.ts
+++ b/src/runtime/locale/pt.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copiar código para a área de transferência'
       }
     },
+    sidebar: {
+      close: 'Fechar',
+      toggle: 'Alternar'
+    },
     selectMenu: {
       create: 'Criar "{label}"',
       noData: 'Sem dados',
diff --git a/src/runtime/locale/pt_br.ts b/src/runtime/locale/pt_br.ts
index d08ac29858..0a7bbb902e 100644
--- a/src/runtime/locale/pt_br.ts
+++ b/src/runtime/locale/pt_br.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copiar código para a área de transferência'
       }
     },
+    sidebar: {
+      close: 'Fechar',
+      toggle: 'Alternar'
+    },
     selectMenu: {
       create: 'Criar "{label}"',
       noData: 'Nenhum dado',
diff --git a/src/runtime/locale/ro.ts b/src/runtime/locale/ro.ts
index 6f146592cd..401453b919 100644
--- a/src/runtime/locale/ro.ts
+++ b/src/runtime/locale/ro.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Copiază codul în clipboard'
       }
     },
+    sidebar: {
+      close: 'Închide',
+      toggle: 'Comutare'
+    },
     selectMenu: {
       create: 'Creează "{label}"',
       noData: 'Nu există date',
diff --git a/src/runtime/locale/ru.ts b/src/runtime/locale/ru.ts
index 52947bda1b..655e03d759 100644
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Скопировать код в буфер обмена'
       }
     },
+    sidebar: {
+      close: 'Закрыть',
+      toggle: 'Переключить'
+    },
     selectMenu: {
       create: 'Создать "{label}"',
       noData: 'Нет данных',
diff --git a/src/runtime/locale/sk.ts b/src/runtime/locale/sk.ts
index 0213784488..b9e1e644f7 100644
--- a/src/runtime/locale/sk.ts
+++ b/src/runtime/locale/sk.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopírovať kód do schránky'
       }
     },
+    sidebar: {
+      close: 'Zatvoriť',
+      toggle: 'Prepnúť'
+    },
     selectMenu: {
       create: 'Vytvoriť "{label}"',
       noData: 'Žiadne dáta',
diff --git a/src/runtime/locale/sl.ts b/src/runtime/locale/sl.ts
index 0478b93b99..e29c01d0c7 100644
--- a/src/runtime/locale/sl.ts
+++ b/src/runtime/locale/sl.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopiraj kodo v odložišče'
       }
     },
+    sidebar: {
+      close: 'Zapri',
+      toggle: 'Preklopi'
+    },
     selectMenu: {
       create: 'Ustvari "{label}"',
       noData: 'Ni podatkov',
diff --git a/src/runtime/locale/sq.ts b/src/runtime/locale/sq.ts
index 93d282000b..4879646ec9 100644
--- a/src/runtime/locale/sq.ts
+++ b/src/runtime/locale/sq.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopjo kodin në kujtesë'
       }
     },
+    sidebar: {
+      close: 'Mbyll',
+      toggle: 'Ndërro'
+    },
     selectMenu: {
       create: 'Krijo "{label}"',
       noData: 'Nuk ka të dhëna',
diff --git a/src/runtime/locale/sv.ts b/src/runtime/locale/sv.ts
index 474a5d368f..d3adae9ade 100644
--- a/src/runtime/locale/sv.ts
+++ b/src/runtime/locale/sv.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kopiera kod till urklipp'
       }
     },
+    sidebar: {
+      close: 'Stäng',
+      toggle: 'Växla'
+    },
     selectMenu: {
       create: 'Skapa "{label}"',
       noData: 'Inga data',
diff --git a/src/runtime/locale/th.ts b/src/runtime/locale/th.ts
index aeb7a8285f..c18a4845d8 100644
--- a/src/runtime/locale/th.ts
+++ b/src/runtime/locale/th.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'คัดลอกโค้ดไปยังคลิปบอร์ด'
       }
     },
+    sidebar: {
+      close: 'ปิด',
+      toggle: 'สลับ'
+    },
     selectMenu: {
       create: 'สร้าง "{label}"',
       noData: 'ไม่มีข้อมูล',
diff --git a/src/runtime/locale/tj.ts b/src/runtime/locale/tj.ts
index 05d4ee8ef2..d245a61e37 100644
--- a/src/runtime/locale/tj.ts
+++ b/src/runtime/locale/tj.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Нусха бардоштан'
       }
     },
+    sidebar: {
+      close: 'Бастан',
+      toggle: 'Иваз кардан'
+    },
     selectMenu: {
       create: '"{label}" созед',
       noData: 'Маълумот нест',
diff --git a/src/runtime/locale/tr.ts b/src/runtime/locale/tr.ts
index fc0eb9a2bc..44857ddc23 100644
--- a/src/runtime/locale/tr.ts
+++ b/src/runtime/locale/tr.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Kodu panoya kopyala'
       }
     },
+    sidebar: {
+      close: 'Kapat',
+      toggle: 'Değiştir'
+    },
     selectMenu: {
       create: '"{label}" oluştur',
       noData: 'Veri yok',
diff --git a/src/runtime/locale/ug_cn.ts b/src/runtime/locale/ug_cn.ts
index 2b9375604e..bb75ea1c1a 100644
--- a/src/runtime/locale/ug_cn.ts
+++ b/src/runtime/locale/ug_cn.ts
@@ -113,6 +113,10 @@ export default defineLocale<Messages>({
         copy: 'كۆچۈرۈش'
       }
     },
+    sidebar: {
+      close: 'تاقاش',
+      toggle: 'ئالماشتۇرۇش'
+    },
     selectMenu: {
       create: '"{label}" نى قۇرۇش',
       noData: 'سانلىق مەلۇمات يوق',
diff --git a/src/runtime/locale/uk.ts b/src/runtime/locale/uk.ts
index b87905923a..4f63bf3bb9 100644
--- a/src/runtime/locale/uk.ts
+++ b/src/runtime/locale/uk.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Копіювати код у буфер обміну'
       }
     },
+    sidebar: {
+      close: 'Закрити',
+      toggle: 'Перемикнути'
+    },
     selectMenu: {
       create: 'Створити "{label}"',
       noData: 'Немає даних',
diff --git a/src/runtime/locale/ur.ts b/src/runtime/locale/ur.ts
index 0e68476e57..f095675ca0 100644
--- a/src/runtime/locale/ur.ts
+++ b/src/runtime/locale/ur.ts
@@ -113,6 +113,10 @@ export default defineLocale<Messages>({
         copy: 'کوڈ کاپی کریں'
       }
     },
+    sidebar: {
+      close: 'بند کریں',
+      toggle: 'ٹوگل کریں'
+    },
     selectMenu: {
       create: '"{label}" بنائیں',
       noData: 'کوئی ڈیٹا نہیں',
diff --git a/src/runtime/locale/uz.ts b/src/runtime/locale/uz.ts
index f840efcb45..73ee00617b 100644
--- a/src/runtime/locale/uz.ts
+++ b/src/runtime/locale/uz.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Koddan buferga nusxa olish'
       }
     },
+    sidebar: {
+      close: 'Yopish',
+      toggle: 'Almashtirish'
+    },
     selectMenu: {
       create: '"{label}" yaratish',
       noData: 'Maʼlumot yoʻq',
diff --git a/src/runtime/locale/vi.ts b/src/runtime/locale/vi.ts
index 979812f57e..0bfee3ea59 100644
--- a/src/runtime/locale/vi.ts
+++ b/src/runtime/locale/vi.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: 'Sao chép mã vào bộ nhớ tạm'
       }
     },
+    sidebar: {
+      close: 'Đóng',
+      toggle: 'Chuyển đổi'
+    },
     selectMenu: {
       create: 'Tạo "{label}"',
       noData: 'Không có dữ liệu',
diff --git a/src/runtime/locale/zh_cn.ts b/src/runtime/locale/zh_cn.ts
index 9f9338eb05..7184a497cb 100644
--- a/src/runtime/locale/zh_cn.ts
+++ b/src/runtime/locale/zh_cn.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: '复制代码到剪贴板'
       }
     },
+    sidebar: {
+      close: '关闭',
+      toggle: '切换'
+    },
     selectMenu: {
       create: '创建 "{label}"',
       noData: '没有数据',
diff --git a/src/runtime/locale/zh_tw.ts b/src/runtime/locale/zh_tw.ts
index bd282ded1a..8b0f6ba9d9 100644
--- a/src/runtime/locale/zh_tw.ts
+++ b/src/runtime/locale/zh_tw.ts
@@ -112,6 +112,10 @@ export default defineLocale<Messages>({
         copy: '複製程式碼到剪貼簿'
       }
     },
+    sidebar: {
+      close: '關閉',
+      toggle: '切換'
+    },
     selectMenu: {
       create: '建立「{label}」',
       noData: '沒有資料',
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 0693603371..b80fe527e9 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -95,6 +95,7 @@ export * from '../components/ScrollArea.vue'
 export * from '../components/Select.vue'
 export * from '../components/SelectMenu.vue'
 export * from '../components/Separator.vue'
+export * from '../components/Sidebar.vue'
 export * from '../components/Skeleton.vue'
 export * from '../components/Slideover.vue'
 export * from '../components/Slider.vue'
diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index 20beb0f16d..5d43fdcc08 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -116,6 +116,10 @@ export type Messages = {
       copy: string
     }
   }
+  sidebar: {
+    close: string
+    toggle: string
+  }
   selectMenu: {
     create: string
     noData: string
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 687acd97db..0fed9999de 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -93,6 +93,7 @@ export { default as scrollArea } from './scroll-area'
 export { default as select } from './select'
 export { default as selectMenu } from './select-menu'
 export { default as separator } from './separator'
+export { default as sidebar } from './sidebar'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as slider } from './slider'
diff --git a/src/theme/sidebar.ts b/src/theme/sidebar.ts
new file mode 100644
index 0000000000..48a36d7a68
--- /dev/null
+++ b/src/theme/sidebar.ts
@@ -0,0 +1,121 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem]',
+    gap: 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+    container: 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex',
+    inner: 'flex size-full flex-col overflow-hidden bg-default divide-y divide-default',
+    header: 'flex items-center gap-1.5 p-4 min-h-16',
+    wrapper: '',
+    title: 'text-highlighted font-semibold',
+    description: 'mt-1 text-muted text-sm',
+    close: 'absolute top-4 end-4',
+    body: 'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4',
+    footer: 'flex items-center gap-1.5 p-4',
+    rail: ['absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented)', options.theme.transitions && 'after:transition-colors'],
+    overlay: 'lg:hidden'
+  },
+  variants: {
+    side: {
+      left: {
+        container: 'left-0 border-e border-default'
+      },
+      right: {
+        container: 'right-0 border-s border-default'
+      }
+    },
+    collapsible: {
+      offcanvas: {
+        root: 'group/sidebar hidden lg:block',
+        gap: 'data-[state=collapsed]:w-0',
+        container: 'data-[state=collapsed]:w-0'
+      },
+      icon: {
+        root: 'group/sidebar hidden lg:block',
+        gap: 'data-[state=collapsed]:w-(--sidebar-width-icon)',
+        container: 'data-[state=collapsed]:w-(--sidebar-width-icon)',
+        header: 'group-data-[state=collapsed]/sidebar:overflow-hidden group-data-[state=collapsed]/sidebar:p-2',
+        body: 'group-data-[state=collapsed]/sidebar:overflow-hidden',
+        footer: 'group-data-[state=collapsed]/sidebar:overflow-hidden group-data-[state=collapsed]/sidebar:p-2'
+      },
+      none: {
+        root: 'h-full w-(--sidebar-width)'
+      }
+    },
+    variant: {
+      sidebar: {},
+      floating: {
+        container: 'p-2 border-0',
+        inner: 'rounded-lg border border-default shadow-sm'
+      },
+      inset: {
+        container: 'p-2 border-0',
+        inner: 'rounded-lg'
+      }
+    }
+  },
+  compoundVariants: [{
+    side: 'left' as const,
+    collapsible: 'offcanvas' as const,
+    class: {
+      rail: 'end-0 translate-x-1/2 data-[state=collapsed]:cursor-e-resize cursor-w-resize'
+    }
+  }, {
+    side: 'right' as const,
+    collapsible: 'offcanvas' as const,
+    class: {
+      rail: '-start-px -translate-x-1/2 data-[state=collapsed]:cursor-w-resize cursor-e-resize'
+    }
+  }, {
+    side: 'left' as const,
+    collapsible: 'icon' as const,
+    class: {
+      rail: 'end-0 translate-x-1/2 data-[state=collapsed]:cursor-e-resize cursor-w-resize'
+    }
+  }, {
+    side: 'right' as const,
+    collapsible: 'icon' as const,
+    class: {
+      rail: '-start-px -translate-x-1/2 data-[state=collapsed]:cursor-w-resize cursor-e-resize'
+    }
+  }, {
+    side: 'left' as const,
+    collapsible: 'none' as const,
+    class: {
+      root: 'border-e border-default'
+    }
+  }, {
+    side: 'right' as const,
+    collapsible: 'none' as const,
+    class: {
+      root: 'border-s border-default'
+    }
+  }, {
+    side: 'left' as const,
+    collapsible: 'offcanvas' as const,
+    class: {
+      container: 'data-[state=collapsed]:-left-(--sidebar-width)'
+    }
+  }, {
+    side: 'right' as const,
+    collapsible: 'offcanvas' as const,
+    class: {
+      container: 'data-[state=collapsed]:-right-(--sidebar-width)'
+    }
+  }, {
+    variant: 'floating' as const,
+    collapsible: 'icon' as const,
+    class: {
+      gap: 'data-[state=collapsed]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4))]',
+      container: 'data-[state=collapsed]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4)+2px)]'
+    }
+  }, {
+    variant: 'inset' as const,
+    collapsible: 'icon' as const,
+    class: {
+      gap: 'data-[state=collapsed]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4))]',
+      container: 'data-[state=collapsed]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4)+2px)]'
+    }
+  }]
+})
diff --git a/test/components/Sidebar.spec.ts b/test/components/Sidebar.spec.ts
new file mode 100644
index 0000000000..51e878bef0
--- /dev/null
+++ b/test/components/Sidebar.spec.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { axe } from 'vitest-axe'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import Sidebar from '../../src/runtime/components/Sidebar.vue'
+import type { SidebarProps, SidebarSlots } from '../../src/runtime/components/Sidebar.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/sidebar'
+
+describe('Sidebar', () => {
+  const variants = Object.keys(theme.variants.variant) as any
+  const collapsibles = Object.keys(theme.variants.collapsible) as any
+  const sides = Object.keys(theme.variants.side) as any
+
+  it.each([
+    // Props
+    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
+    ...collapsibles.map((collapsible: string) => [`with collapsible ${collapsible}`, { props: { collapsible } }]),
+    ...sides.map((side: string) => [`with side ${side}`, { props: { side } }]),
+    ['with title', { props: { title: 'Sidebar Title' } }],
+    ['with description', { props: { title: 'Sidebar Title', description: 'Sidebar Description' } }],
+    ['with close', { props: { title: 'Sidebar Title', close: true, collapsible: 'icon' as const } }],
+    ['with mode modal', { props: { mode: 'modal' as const, menu: { portal: false } } }],
+    ['with mode slideover', { props: { mode: 'slideover' as const, menu: { portal: false } } }],
+    ['with mode drawer', { props: { mode: 'drawer' as const, menu: { portal: false } } }],
+    ...collapsibles.filter((c: string) => c !== 'none').map((collapsible: string) => [`with collapsed ${collapsible}`, { props: { open: false, collapsible } }]),
+    ['with rail', { props: { rail: true, collapsible: 'icon' as const } }],
+    ['with class', { props: { class: 'custom-class' } }],
+    ['with ui', { props: { ui: { body: 'py-4' } } }],
+    // Slots
+    ['with header slot', { slots: { header: () => 'Header slot' } }],
+    ['with default slot', { slots: { default: () => 'Default slot' } }],
+    ['with body slot', { slots: { body: () => 'Body slot' } }],
+    ['with actions slot', { slots: { actions: () => 'Actions slot' } }],
+    ['with footer slot', { slots: { footer: () => 'Footer slot' } }],
+    ['with content slot', { slots: { content: () => 'Content slot' } }]
+  ])('renders %s correctly', async (_: string, options: { props?: SidebarProps, slots?: Partial<SidebarSlots> }) => {
+    const html = await ComponentRender(_, options, Sidebar)
+    expect(html).toMatchSnapshot()
+  })
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(Sidebar, {
+      props: {
+        variant: 'sidebar',
+        collapsible: 'icon'
+      }
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+})
diff --git a/test/components/__snapshots__/Sidebar-vue.spec.ts.snap b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
new file mode 100644
index 0000000000..f56106a809
--- /dev/null
+++ b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
@@ -0,0 +1,346 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Sidebar > renders with actions slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">
+      <!--v-if-->Actions slot
+      <!--v-if-->
+    </div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with body slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">Body slot</div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with class correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default custom-class">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with close correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16 group-data-[state=collapsed]/sidebar:overflow-hidden group-data-[state=collapsed]/sidebar:p-2">
+        <div data-slot="wrapper" class="">
+          <p data-slot="title" class="text-highlighted font-semibold">Sidebar Title</p>
+          <!--v-if-->
+        </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+          <!--v-if-->
+          <!--v-if-->
+        </button>
+      </div>
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsed icon correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="collapsed" data-collapsible="icon" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsed offcanvas correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="collapsed" data-collapsible="offcanvas" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-0 data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsible icon correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsible none correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with collapsible offcanvas correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-0 data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with content slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with default slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">Default slot</div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with description correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">
+      <div data-slot="wrapper" class="">
+        <p data-slot="title" class="text-highlighted font-semibold">Sidebar Title</p>
+        <p data-slot="description" class="mt-1 text-muted text-sm">Sidebar Description</p>
+      </div>
+      <!--v-if-->
+    </div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with footer slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <div data-slot="footer" class="flex items-center gap-1.5 p-4">Footer slot</div>
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with header slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">Header slot</div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with mode drawer correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with mode modal correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with mode slideover correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with rail correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div><button data-slot="rail" data-state="expanded" aria-label="Toggle" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 data-[state=collapsed]:cursor-e-resize cursor-w-resize"></button>
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with side left correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with side right correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-s border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with title correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">
+      <div data-slot="wrapper" class="">
+        <p data-slot="title" class="text-highlighted font-semibold">Sidebar Title</p>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with ui correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 py-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with variant floating correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="floating" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default rounded-lg border border-default shadow-sm">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with variant inset correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="inset" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default rounded-lg">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with variant sidebar correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
diff --git a/test/components/__snapshots__/Sidebar.spec.ts.snap b/test/components/__snapshots__/Sidebar.spec.ts.snap
new file mode 100644
index 0000000000..11aa13e37f
--- /dev/null
+++ b/test/components/__snapshots__/Sidebar.spec.ts.snap
@@ -0,0 +1,346 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Sidebar > renders with actions slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">
+      <!--v-if-->Actions slot
+      <!--v-if-->
+    </div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with body slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">Body slot</div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with class correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default custom-class">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with close correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16 group-data-[state=collapsed]/sidebar:overflow-hidden group-data-[state=collapsed]/sidebar:p-2">
+        <div data-slot="wrapper" class="">
+          <p data-slot="title" class="text-highlighted font-semibold">Sidebar Title</p>
+          <!--v-if-->
+        </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+          <!--v-if-->
+          <!--v-if-->
+        </button>
+      </div>
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsed icon correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="collapsed" data-collapsible="icon" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsed offcanvas correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="collapsed" data-collapsible="offcanvas" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="collapsed" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="collapsed" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-0 data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsible icon correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with collapsible none correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with collapsible offcanvas correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-0"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-0 data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with content slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with default slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">Default slot</div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with description correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">
+      <div data-slot="wrapper" class="">
+        <p data-slot="title" class="text-highlighted font-semibold">Sidebar Title</p>
+        <p data-slot="description" class="mt-1 text-muted text-sm">Sidebar Description</p>
+      </div>
+      <!--v-if-->
+    </div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with footer slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <div data-slot="footer" class="flex items-center gap-1.5 p-4">Footer slot</div>
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with header slot correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">Header slot</div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with mode drawer correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with mode modal correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with mode slideover correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with rail correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="sidebar" data-side="left" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] group/sidebar hidden lg:block">
+  <!-- Gap spacer: reserves layout space for the fixed sidebar -->
+  <div data-slot="gap" data-state="expanded" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear data-[state=collapsed]:w-(--sidebar-width-icon)"></div><!-- Fixed container: the actual visible sidebar -->
+  <div data-slot="container" data-state="expanded" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear lg:flex left-0 border-e border-default data-[state=collapsed]:w-(--sidebar-width-icon)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+      <!--v-if-->
+      <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 group-data-[state=collapsed]/sidebar:overflow-hidden"></div>
+      <!--v-if-->
+    </div><button data-slot="rail" data-state="expanded" aria-label="Toggle" tabindex="-1" class="absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px lg:flex hover:after:bg-(--ui-border-accented) after:transition-colors end-0 translate-x-1/2 data-[state=collapsed]:cursor-e-resize cursor-w-resize"></button>
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with side left correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with side right correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-s border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with title correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 min-h-16">
+      <div data-slot="wrapper" class="">
+        <p data-slot="title" class="text-highlighted font-semibold">Sidebar Title</p>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with ui correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 py-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with variant floating correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="floating" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default rounded-lg border border-default shadow-sm">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with variant inset correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="inset" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default rounded-lg">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;
+
+exports[`Sidebar > renders with variant sidebar correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<aside data-slot="root" data-variant="sidebar" class="peer [--sidebar-width:16rem] [--sidebar-width-icon:4rem] h-full w-(--sidebar-width) border-e border-default">
+  <div data-slot="inner" class="flex size-full flex-col overflow-hidden bg-default divide-y divide-default">
+    <!--v-if-->
+    <div data-slot="body" class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4"></div>
+    <!--v-if-->
+  </div>
+</aside>"
+`;