diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index 92bc09ebe6..5e90f55fd7 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -5,12 +5,6 @@ export default defineAppConfig({
     max: 5,
     expand: true
   },
-  theme: {
-    radius: 0.25,
-    blackAsPrimary: false,
-    icons: 'lucide',
-    font: 'Public Sans'
-  },
   ui: {
     colors: {
       primary: 'green',
diff --git a/docs/app/app.vue b/docs/app/app.vue
index 9880bed14c..0694de03c7 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -7,6 +7,7 @@ import { SpeedInsights } from '@vercel/speed-insights/nuxt'
 const route = useRoute()
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
+const { style, link } = useTheme()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs', ['framework', 'category', 'description']))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs', {
@@ -16,24 +17,18 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })
 
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
-const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
-const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
-const font = computed(() => `:root { --font-sans: '${appConfig.theme.font}', sans-serif; }`)
 
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
-  link: [
+  link: computed(() => [
     // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
-    { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
-  ],
-  style: [
-    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
-    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
-    { innerHTML: font, id: 'nuxt-ui-font', tagPriority: -2 }
-  ],
+    { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` },
+    ...link.value
+  ]),
+  style,
   htmlAttrs: {
     lang: 'en'
   }
@@ -58,22 +53,30 @@ 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 min-w-0" :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>
+      </div>
 
+      <template v-if="!route.path.startsWith('/examples')">
         <ClientOnly>
-          <Search :files="files" :navigation="navigationByFramework" />
+          <Chat />
         </ClientOnly>
       </template>
     </div>
diff --git a/docs/app/components/chat/Chat.vue b/docs/app/components/chat/Chat.vue
new file mode 100644
index 0000000000..d63db9dc92
--- /dev/null
+++ b/docs/app/components/chat/Chat.vue
@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import type { DefineComponent } from 'vue'
+import type { ToolUIPart, DynamicToolUIPart } from 'ai'
+import { DefaultChatTransport, isToolUIPart, isReasoningUIPart, isTextUIPart, getToolName } from 'ai'
+import { Chat } from '@ai-sdk/vue'
+import * as theme from '#build/ui'
+import ProseStreamPre from '../prose/PreStream.vue'
+
+const components = {
+  pre: ProseStreamPre as unknown as DefineComponent
+}
+
+const input = ref('')
+
+const toast = useToast()
+const { track } = useAnalytics()
+const { open, messages } = useChat()
+const { resetTheme, applyThemeSettings, hasCSSChanges, hasAppConfigChanges } = useTheme()
+
+const hasThemeChanges = computed(() => hasCSSChanges.value || hasAppConfigChanges.value)
+
+let _skipSync = false
+const _themeApplied = new Set<string>()
+function processThemeToolCalls() {
+  for (const message of chat.messages) {
+    if (message.role !== 'assistant') continue
+
+    for (const part of message.parts || []) {
+      if (!isToolUIPart(part)) continue
+      if (_themeApplied.has(part.toolCallId)) continue
+      if (part.state !== 'output-available' && part.state !== 'input-available') continue
+
+      const name = getToolName(part)
+      if (name === 'applyTheme' && part.input) {
+        _themeApplied.add(part.toolCallId)
+        applyThemeSettings(part.input)
+      } else if (name === 'resetTheme') {
+        _themeApplied.add(part.toolCallId)
+        resetTheme()
+      }
+    }
+  }
+}
+
+const chat = new Chat({
+  messages: messages.value,
+  transport: new DefaultChatTransport({
+    api: '/api/ai',
+    body: { theme }
+  }),
+  onError: (error) => {
+    let message = error.message
+    if (typeof message === 'string' && message[0] === '{') {
+      try {
+        message = JSON.parse(message).message || message
+      } catch {
+        // keep original message on malformed JSON
+      }
+    }
+
+    toast.add({
+      description: message,
+      icon: 'i-lucide-alert-circle',
+      color: 'error',
+      duration: 0
+    })
+  },
+  onFinish: () => {
+    processThemeToolCalls()
+    _skipSync = true
+    messages.value = chat.messages
+    nextTick(() => {
+      _skipSync = false
+    })
+  }
+})
+
+watchEffect(() => {
+  if (chat.status === 'streaming' && chat.messages.length) {
+    processThemeToolCalls()
+  }
+})
+
+const canClear = computed(() => messages.value.length > 0)
+
+function onSubmit() {
+  if (!input.value.trim()) {
+    return
+  }
+
+  track('AI Chat Message Sent')
+
+  chat.sendMessage({ text: input.value })
+
+  input.value = ''
+}
+
+// Sync external messages (e.g. from search→chat flow) into the chat instance.
+// When the last synced message is from the user, auto-regenerate the assistant response.
+// _skipSync prevents loops when onFinish writes back to the shared messages ref.
+watch(messages, (newMessages) => {
+  if (_skipSync) return
+
+  chat.messages = newMessages
+  if (chat.lastMessage?.role === 'user') {
+    chat.regenerate()
+  }
+})
+
+type ToolPart = ToolUIPart | DynamicToolUIPart
+type ToolState = ToolPart['state']
+
+function getToolMessage(state: ToolState, toolName: string, input: Record<string, string | undefined>) {
+  const searchVerb = state === 'output-available' ? 'Searched' : 'Searching'
+  const readVerb = state === 'output-available' ? 'Read' : 'Reading'
+  const applyVerb = state === 'output-available' ? 'Applied' : 'Applying'
+
+  return {
+    'list-components': `${searchVerb} components`,
+    'list-composables': `${searchVerb} composables`,
+    'get-component': `${readVerb} ${upperName(input.componentName || '')} component`,
+    'get-component-metadata': `${readVerb} metadata for component ${upperName(input.componentName || '')}`,
+    'list-templates': `${searchVerb} templates${input.category ? ` in ${input.category} category` : ''}`,
+    'get-template': `${readVerb} template ${upperName(input.templateName || '')}`,
+    'get-documentation-page': `${readVerb} ${input.path || ''} page`,
+    'list-documentation-pages': `${searchVerb} documentation pages`,
+    'list-getting-started-guides': `${searchVerb} documentation guides`,
+    'get-migration-guide': `${readVerb} migration guide${input.version ? ` for ${input.version}` : ''}`,
+    'list-examples': `${searchVerb} examples`,
+    'get-example': `${readVerb} ${upperName(input.exampleName || '')} example`,
+    'search-components-by-category': `${searchVerb} components${input.category ? ` in ${input.category} category` : ''}${input.search ? ` for "${input.search}"` : ''}`,
+    'getComponentTheme': `${readVerb} ${upperName(input.componentName || '')} theme`,
+    'applyTheme': `${applyVerb} theme changes`,
+    'resetTheme': `${state === 'output-available' ? 'Reset' : 'Resetting'} theme to defaults`
+  }[toolName] || `${searchVerb} ${toolName}`
+}
+
+const getCachedToolMessage = useMemoize((state: ToolState, toolName: string, input: string) =>
+  getToolMessage(state, toolName, JSON.parse(input))
+)
+
+function getToolText(part: ToolPart) {
+  return getCachedToolMessage(part.state, getToolName(part), JSON.stringify(part.input || {}))
+}
+
+function getToolIcon(part: ToolPart): string {
+  const toolName = getToolName(part)
+
+  const iconMap: Record<string, string> = {
+    'get-component': 'i-lucide-file-text',
+    'get-component-metadata': 'i-lucide-file-text',
+    'get-template': 'i-lucide-file-text',
+    'get-documentation-page': 'i-lucide-file-text',
+    'get-migration-guide': 'i-lucide-file-text',
+    'get-example': 'i-lucide-file-text',
+    'getComponentTheme': 'i-lucide-file-text',
+    'applyTheme': 'i-lucide-palette',
+    'resetTheme': 'i-lucide-palette'
+  }
+
+  return iconMap[toolName] || 'i-lucide-search'
+}
+
+function askQuestion(question: string) {
+  input.value = question
+  onSubmit()
+}
+
+const suggestions = [
+  {
+    category: 'Components',
+    items: [
+      'How to build a dashboard layout?',
+      'How to build a table with pagination?',
+      'How to create a form with validation?'
+    ]
+  },
+  {
+    category: 'Composables',
+    items: [
+      'How to show toast notifications?',
+      'How to define keyboard shortcuts?',
+      'How do I open a modal programmatically?'
+    ]
+  },
+  {
+    category: 'Theme',
+    items: [
+      'Create a black & white theme',
+      'Design a beautiful sakura-inspired theme',
+      'Surprise me with a creative and unique theme'
+    ]
+  }
+]
+
+function clearMessages() {
+  if (chat.status === 'streaming') {
+    chat.stop()
+  }
+  messages.value = []
+  chat.messages = []
+  _themeApplied.clear()
+}
+
+defineShortcuts({
+  meta_i: {
+    handler: () => {
+      open.value = !open.value
+    },
+    usingInput: true
+  }
+})
+</script>
+
+<template>
+  <USidebar
+    v-model:open="open"
+    side="right"
+    title="Ask AI"
+    rail
+    :style="{ '--sidebar-width': '24rem' }"
+    :ui="{ footer: 'p-0', actions: 'gap-0.5' }"
+  >
+    <template #actions>
+      <UTooltip v-if="hasThemeChanges" text="Reset theme">
+        <UButton
+          icon="i-lucide-rotate-ccw"
+          color="neutral"
+          variant="ghost"
+          @click="resetTheme"
+        />
+      </UTooltip>
+
+      <UTooltip v-if="canClear" text="Clear messages">
+        <UButton
+          icon="i-lucide-list-x"
+          color="neutral"
+          variant="ghost"
+          @click="clearMessages"
+        />
+      </UTooltip>
+    </template>
+
+    <template #close>
+      <UTooltip text="Close" :kbds="['meta', 'i']">
+        <UButton
+          icon="i-lucide-panel-right-close"
+          color="neutral"
+          variant="ghost"
+          aria-label="Close"
+          @click="open = false"
+        />
+      </UTooltip>
+    </template>
+
+    <UTheme
+      :ui="{
+        prose: {
+          p: { base: 'my-2 text-sm/6' },
+          li: { base: 'my-0.5 text-sm/6' },
+          ul: { base: 'my-2' },
+          ol: { base: 'my-2' },
+          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', base: 'text-xs/5' },
+          table: { root: 'my-2' },
+          hr: { base: 'my-4' }
+        }
+      }"
+    >
+      <UChatMessages
+        v-if="chat.messages.length"
+        should-auto-scroll
+        :messages="chat.messages"
+        :status="chat.status"
+        compact
+        class="px-0 gap-2"
+        :user="{ ui: { container: 'max-w-full' } }"
+        :assistant="{ ui: { content: 'flex flex-col gap-2' } }"
+      >
+        <template #content="{ message }">
+          <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
+            <ChatReasoning
+              v-if="isReasoningUIPart(part)"
+              :text="part.text"
+              :streaming="chat.status === 'streaming' && message.id === chat.messages.at(-1)?.id && index === message.parts.length - 1"
+              icon="i-lucide-brain"
+              chevron="leading"
+            >
+              <template #default="{ reasoningText }">
+                <MDCCached
+                  v-if="reasoningText"
+                  :value="reasoningText"
+                  :cache-key="`reasoning-${message.id}-${index}`"
+                  :parser-options="{ highlight: false }"
+                  class="*:first:mt-0 *:last:mb-0"
+                />
+              </template>
+            </ChatReasoning>
+            <MDCCached
+              v-else-if="isTextUIPart(part) && part.text.length > 0"
+              :value="part.text"
+              :cache-key="`${message.id}-${index}`"
+              :components="components"
+              :parser-options="{ highlight: false }"
+              class="*:first:mt-0 *:last:mb-0"
+            />
+            <ChatTool
+              v-else-if="isToolUIPart(part)"
+              :text="getToolText(part)"
+              :icon="getToolIcon(part)"
+              :streaming="part.state !== 'output-available'"
+            />
+          </template>
+        </template>
+      </UChatMessages>
+
+      <div v-else class="flex flex-col gap-6">
+        <UPageLinks
+          v-for="category in suggestions"
+          :key="category.category"
+          :title="category.category"
+          :links="category.items.map(item => ({ label: item, onClick: () => askQuestion(item) }))"
+        />
+      </div>
+    </UTheme>
+
+    <template #footer>
+      <UChatPrompt
+        v-model="input"
+        :error="chat.error"
+        placeholder="Ask me anything..."
+        variant="naked"
+        size="sm"
+        autofocus
+        :ui="{ base: 'px-0' }"
+        class="px-4"
+        @submit="onSubmit"
+      >
+        <template #footer>
+          <div class="flex items-center gap-1.5 text-xs text-dimmed">
+            <NuxtLink to="https://vercel.com/ai-gateway" target="_blank" class="inline-flex items-center gap-1 hover:text-muted transition-colors">
+              Powered by <UIcon name="i-simple-icons-vercel" class="size-3" /> AI Gateway
+            </NuxtLink>
+          </div>
+
+          <UChatPromptSubmit
+            size="sm"
+            :status="chat.status"
+            :disabled="!input.trim()"
+            @stop="chat.stop()"
+            @reload="chat.regenerate()"
+          />
+        </template>
+      </UChatPrompt>
+    </template>
+  </USidebar>
+</template>
diff --git a/docs/app/components/chat/ChatReasoning.vue b/docs/app/components/chat/ChatReasoning.vue
new file mode 100644
index 0000000000..e8a294968d
--- /dev/null
+++ b/docs/app/components/chat/ChatReasoning.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'
+import { useScroll, useResizeObserver } from '@vueuse/core'
+import ChatShimmer from './ChatShimmer.vue'
+
+const props = withDefaults(defineProps<{
+  text?: string
+  streaming?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  duration?: number
+  icon?: string
+  /**
+   * The position of the chevron icon.
+   * @defaultValue 'trailing'
+   */
+  chevron?: 'leading' | 'trailing'
+  /**
+   * The icon used for the chevron.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
+   */
+  chevronIcon?: string
+  autoCloseDelay?: number
+  class?: any
+}>(), {
+  open: undefined,
+  streaming: false,
+  chevron: 'trailing',
+  autoCloseDelay: 500
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const appConfig = useAppConfig()
+
+const isControlled = computed(() => props.open !== undefined)
+const internalOpen = ref(props.defaultOpen ?? props.streaming)
+const startTime = ref<number | null>(props.streaming ? Date.now() : null)
+const internalDuration = ref<number | undefined>(undefined)
+const autoCloseTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+
+watch(() => props.streaming, (streaming, wasStreaming) => {
+  if (streaming) {
+    if (autoCloseTimeout.value) {
+      clearTimeout(autoCloseTimeout.value)
+      autoCloseTimeout.value = null
+    }
+    if (!wasStreaming) {
+      setOpen(true)
+      startTime.value = Date.now()
+    }
+  } else if (wasStreaming) {
+    if (startTime.value !== null) {
+      internalDuration.value = Math.ceil((Date.now() - startTime.value) / 1000)
+      startTime.value = null
+    }
+    if (props.autoCloseDelay > 0) {
+      autoCloseTimeout.value = setTimeout(() => {
+        setOpen(false)
+      }, props.autoCloseDelay)
+    }
+  }
+}, { immediate: true })
+
+const actualDuration = computed(() => props.duration ?? internalDuration.value)
+
+const thinkingMessage = computed(() => {
+  if (props.streaming || actualDuration.value === 0) {
+    return 'Thinking...'
+  }
+  if (actualDuration.value === undefined) {
+    return 'Thought for a few seconds'
+  }
+
+  const d = actualDuration.value
+  if (d < 60) {
+    return `Thought for ${d} second${d === 1 ? '' : 's'}`
+  }
+
+  const minutes = Math.floor(d / 60)
+  return `Thought for ${minutes} minute${minutes === 1 ? '' : 's'}`
+})
+
+const resolvedOpen = computed(() => isControlled.value ? props.open : internalOpen.value)
+
+function setOpen(value: boolean) {
+  if (autoCloseTimeout.value) {
+    clearTimeout(autoCloseTimeout.value)
+    autoCloseTimeout.value = null
+  }
+  internalOpen.value = value
+  emit('update:open', value)
+}
+
+onUnmounted(() => {
+  if (autoCloseTimeout.value) {
+    clearTimeout(autoCloseTimeout.value)
+  }
+})
+
+const hasContent = computed(() => !!props.text || props.streaming)
+
+const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.chevronDown)
+
+const bodyRef = ref<HTMLElement>()
+const { arrivedState } = useScroll(bodyRef)
+const isOverflowing = ref(false)
+
+useResizeObserver(bodyRef, (entries) => {
+  const el = entries[0]?.target as HTMLElement | undefined
+  if (el) {
+    isOverflowing.value = el.scrollHeight > el.clientHeight
+  }
+})
+
+watch(() => props.text, () => {
+  if (props.streaming && bodyRef.value && arrivedState.bottom) {
+    nextTick(() => {
+      bodyRef.value!.scrollTop = bodyRef.value!.scrollHeight
+    })
+  }
+})
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-if="hasContent"
+    v-slot="{ open: isOpen }"
+    :open="resolvedOpen"
+    :unmount-on-hide="false"
+    data-slot="root"
+    :class="props.class"
+    @update:open="setOpen"
+  >
+    <CollapsibleTrigger as-child :disabled="!hasContent">
+      <button
+        type="button"
+        data-slot="trigger"
+        class="group flex w-full items-center gap-1.5 text-muted hover:text-default text-sm cursor-pointer disabled:cursor-default disabled:hover:text-muted transition-colors focus-visible:outline-offset-2 focus-visible:outline-primary min-w-0"
+      >
+        <span v-if="hasContent && chevron === 'leading' && icon" class="relative size-4 shrink-0">
+          <UIcon
+            :name="icon"
+            class="absolute inset-0 size-4 transition-opacity group-hover:opacity-0 group-data-[state=open]:opacity-0 duration-200"
+          />
+          <UIcon
+            :name="chevronIconName"
+            class="absolute inset-0 size-4 opacity-0 transition-all group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=open]:rotate-180 duration-200"
+          />
+        </span>
+        <UIcon
+          v-else-if="hasContent && chevron === 'leading'"
+          :name="chevronIconName"
+          class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"
+        />
+        <UIcon v-else-if="icon" :name="icon" class="size-4 shrink-0" />
+
+        <ChatShimmer v-if="streaming" :text="thinkingMessage" class="truncate" />
+        <span v-else class="truncate">{{ thinkingMessage }}</span>
+
+        <UIcon
+          v-if="hasContent && chevron === 'trailing'"
+          :name="chevronIconName"
+          class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"
+        />
+      </button>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent
+      data-slot="content"
+      class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+    >
+      <div class="relative pt-2">
+        <div v-if="isOverflowing && !arrivedState.top" class="absolute inset-x-0 top-2 h-6 bg-linear-to-b from-default to-transparent pointer-events-none" />
+        <div ref="bodyRef" data-slot="body" class="max-h-[200px] overflow-y-auto text-sm text-dimmed whitespace-pre-wrap">
+          <slot :open="isOpen" :reasoning-text="text || ''">
+            {{ text }}
+          </slot>
+        </div>
+        <div v-if="isOverflowing && !arrivedState.bottom" class="absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-default to-transparent pointer-events-none" />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
diff --git a/docs/app/components/chat/ChatShimmer.vue b/docs/app/components/chat/ChatShimmer.vue
new file mode 100644
index 0000000000..55bb1380e4
--- /dev/null
+++ b/docs/app/components/chat/ChatShimmer.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Motion } from 'motion-v'
+
+const props = withDefaults(defineProps<{
+  text: string
+  duration?: number
+  spread?: number
+  class?: any
+}>(), {
+  duration: 2,
+  spread: 2
+})
+
+const initial = { backgroundPosition: '100% center' }
+const animate = { backgroundPosition: '0% center' }
+
+const transition = computed(() => ({ repeat: Infinity, duration: props.duration, ease: 'linear' as const }))
+
+const dynamicSpread = computed(() => props.text.length * props.spread)
+
+const shimmerStyle = computed(() => ({
+  '--spread': `${dynamicSpread.value}px`,
+  'background-image': 'var(--bg), linear-gradient(var(--ui-text-muted), var(--ui-text-muted))'
+} as Record<string, string>))
+</script>
+
+<template>
+  <Motion
+    as="span"
+    :initial="initial"
+    :animate="animate"
+    :transition="transition"
+    :style="shimmerStyle"
+    data-slot="base"
+    :class="[props.class, 'bg-size-[250%_100%,auto] bg-clip-text text-transparent [background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread)))] will-change-[background-position]']"
+  >
+    {{ text }}
+  </Motion>
+</template>
diff --git a/docs/app/components/chat/ChatTool.vue b/docs/app/components/chat/ChatTool.vue
new file mode 100644
index 0000000000..660354adb0
--- /dev/null
+++ b/docs/app/components/chat/ChatTool.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'reka-ui'
+import ChatShimmer from './ChatShimmer.vue'
+
+const props = withDefaults(defineProps<{
+  text: string
+  suffix?: string
+  icon?: string
+  loading?: boolean
+  loadingIcon?: string
+  streaming?: boolean
+  variant?: 'inline' | 'card'
+  chevron?: 'leading' | 'trailing'
+  open?: boolean
+  defaultOpen?: boolean
+  class?: any
+}>(), {
+  variant: 'inline',
+  chevron: 'trailing',
+  open: undefined,
+  defaultOpen: false
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const slots = defineSlots<{
+  default?: () => any
+}>()
+
+const appConfig = useAppConfig()
+const chevronIcon = computed(() => appConfig.ui.icons?.chevronDown)
+const resolvedLoadingIcon = computed(() => props.loadingIcon || appConfig.ui.icons?.loading)
+const resolvedIcon = computed(() => props.loading ? resolvedLoadingIcon.value : props.icon)
+
+const isControlled = computed(() => props.open !== undefined)
+const internalOpen = ref(props.defaultOpen)
+const resolvedOpen = computed(() => isControlled.value ? props.open : internalOpen.value)
+
+function setOpen(value: boolean) {
+  internalOpen.value = value
+  emit('update:open', value)
+}
+
+const collapsible = computed(() => !!slots.default)
+</script>
+
+<template>
+  <CollapsibleRoot
+    :open="collapsible ? resolvedOpen : undefined"
+    data-slot="root"
+    :unmount-on-hide="false"
+    :class="[props.class, variant === 'card' && 'rounded-md ring ring-default overflow-hidden']"
+    @update:open="setOpen"
+  >
+    <CollapsibleTrigger as-child :disabled="!collapsible">
+      <button
+        type="button"
+        data-slot="trigger"
+        :class="[
+          'group flex w-full items-center gap-1.5 text-muted text-sm min-w-0',
+          variant === 'card' && 'px-2 py-1',
+          collapsible && 'cursor-pointer hover:text-default transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+        ]"
+      >
+        <span v-if="collapsible && chevron === 'leading' && resolvedIcon" class="relative size-4 shrink-0">
+          <UIcon
+            :name="resolvedIcon"
+            :class="[loading && 'animate-spin']"
+            class="absolute inset-0 size-4 transition-opacity group-hover:opacity-0 group-data-[state=open]:opacity-0 duration-200"
+          />
+          <UIcon
+            :name="chevronIcon"
+            class="absolute inset-0 size-4 opacity-0 transition-all group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=open]:rotate-180 duration-200"
+          />
+        </span>
+        <UIcon
+          v-else-if="collapsible && chevron === 'leading'"
+          :name="chevronIcon"
+          class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"
+        />
+        <UIcon
+          v-else-if="resolvedIcon"
+          :name="resolvedIcon"
+          :class="[loading && 'animate-spin']"
+          class="size-4 shrink-0"
+        />
+
+        <span class="truncate">
+          <ChatShimmer v-if="streaming" :text="text" />
+          <template v-else>{{ text }}</template>
+          <span v-if="suffix" class="text-dimmed ms-1">{{ suffix }}</span>
+        </span>
+
+        <UIcon
+          v-if="collapsible && chevron === 'trailing'"
+          :name="chevronIcon"
+          :class="[variant === 'card' && 'ms-auto']"
+          class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"
+        />
+      </button>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent
+      v-if="collapsible"
+      data-slot="content"
+      class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+    >
+      <div data-slot="body" class="relative" :class="[variant === 'card' ? 'border-t border-default p-2' : 'pt-2']">
+        <slot />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
diff --git a/docs/app/components/content/IconsTheme.vue b/docs/app/components/content/IconsTheme.vue
index d19d13681d..66d45e4895 100644
--- a/docs/app/components/content/IconsTheme.vue
+++ b/docs/app/components/content/IconsTheme.vue
@@ -2,9 +2,9 @@
 import json5 from 'json5'
 import { themeIcons } from '../../utils/theme'
 
-const appConfig = useAppConfig()
+const { icon: iconSet } = useTheme()
 
-const icons = computed(() => themeIcons[appConfig.theme.icons as keyof typeof themeIcons || 'lucide'])
+const icons = computed(() => themeIcons[iconSet.value as keyof typeof themeIcons || 'lucide'])
 
 const { data: ast } = useAsyncData(`icons-theme`, async () => {
   const md = `
diff --git a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue b/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
index 434ee78ddd..7e4490824d 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
+++ b/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Chat } from '@ai-sdk/vue'
+import { isTextUIPart } from 'ai'
 import type { UIMessage } from 'ai'
+import { Chat } from '@ai-sdk/vue'
 
 const messages: UIMessage[] = []
 const input = ref('')
@@ -37,6 +38,8 @@ const chat = new Chat({
 })
 
 function onSubmit() {
+  if (!input.value.trim()) return
+
   chat.sendMessage({ text: input.value })
 
   input.value = ''
@@ -47,44 +50,59 @@ function onClose(e: Event) {
 
   ai.value = false
 }
+
+const ui = {
+  prose: {
+    p: { base: 'my-2 leading-6' },
+    li: { base: 'my-0.5 leading-6' },
+    ul: { base: 'my-2' },
+    ol: { base: 'my-2' },
+    h1: { base: 'text-xl my-2' },
+    h2: { base: 'text-lg my-2' },
+    h3: { base: 'text-base my-2' },
+    h4: { base: 'text-sm my-2' },
+    pre: { root: 'my-2' },
+    table: { root: 'my-2' },
+    hr: { base: 'my-2' }
+  }
+}
 </script>
 
 <template>
   <UContentSearch v-model:search-term="searchTerm" open :groups="groups">
     <template v-if="ai" #content>
-      <UChatPalette>
-        <UChatMessages
-          :messages="chat.messages"
-          :status="chat.status"
-          :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
-          :assistant="{ icon: 'i-lucide-bot' }"
-        >
-          <template #content="{ message }">
-            <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
-              <MDC
-                v-if="part.type === 'text' && message.role === 'assistant'"
-                :value="part.text"
-                :cache-key="`${message.id}-${index}`"
-                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>
+      <UTheme :ui="ui">
+        <UChatPalette>
+          <UChatMessages
+            :messages="chat.messages"
+            :status="chat.status"
+            :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
+            :assistant="{ icon: 'i-lucide-bot' }"
+          >
+            <template #content="{ message }">
+              <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
+                <MDC
+                  v-if="isTextUIPart(part)"
+                  :value="part.text"
+                  :cache-key="`${message.id}-${index}`"
+                  class="*:first:mt-0 *:last:mb-0"
+                />
+              </template>
             </template>
-          </template>
-        </UChatMessages>
+          </UChatMessages>
 
-        <template #prompt>
-          <UChatPrompt
-            v-model="input"
-            icon="i-lucide-search"
-            variant="naked"
-            :error="chat.error"
-            @submit="onSubmit"
-            @close="onClose"
-          />
-        </template>
-      </UChatPalette>
+          <template #prompt>
+            <UChatPrompt
+              v-model="input"
+              icon="i-lucide-search"
+              variant="naked"
+              :error="chat.error"
+              @submit="onSubmit"
+              @close="onClose"
+            />
+          </template>
+        </UChatPalette>
+      </UTheme>
     </template>
   </UContentSearch>
 </template>
diff --git a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
index 27461db297..0cd8e1cac4 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
+++ b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
-import { Chat } from '@ai-sdk/vue'
+import { isTextUIPart } from 'ai'
 import type { UIMessage } from 'ai'
+import { Chat } from '@ai-sdk/vue'
 
-const messages: UIMessage[] = []
+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 input = ref('')
 
 const chat = new Chat({
@@ -10,47 +19,64 @@ const chat = new Chat({
 })
 
 function onSubmit() {
+  if (!input.value.trim()) return
+
   chat.sendMessage({ text: input.value })
 
   input.value = ''
 }
+
+const ui = {
+  prose: {
+    p: { base: 'my-2 leading-6' },
+    li: { base: 'my-0.5 leading-6' },
+    ul: { base: 'my-2' },
+    ol: { base: 'my-2' },
+    h1: { base: 'text-xl my-2' },
+    h2: { base: 'text-lg my-2' },
+    h3: { base: 'text-base my-2' },
+    h4: { base: 'text-sm my-2' },
+    pre: { root: 'my-2' },
+    table: { root: 'my-2' },
+    hr: { base: 'my-2' }
+  }
+}
 </script>
 
 <template>
   <UModal open :ui="{ content: 'sm:max-w-3xl sm:h-[28rem]' }">
     <template #content>
-      <UChatPalette>
-        <UChatMessages
-          :messages="chat.messages"
-          :status="chat.status"
-          :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
-          :assistant="{ icon: 'i-lucide-bot' }"
-        >
-          <template #content="{ message }">
-            <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
-              <MDC
-                v-if="part.type === 'text' && message.role === 'assistant'"
-                :value="part.text"
-                :cache-key="`${message.id}-${index}`"
-                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>
+      <UTheme :ui="ui">
+        <UChatPalette>
+          <UChatMessages
+            :messages="chat.messages"
+            :status="chat.status"
+            :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
+            :assistant="{ icon: 'i-lucide-bot' }"
+          >
+            <template #content="{ message }">
+              <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
+                <MDC
+                  v-if="isTextUIPart(part)"
+                  :value="part.text"
+                  :cache-key="`${message.id}-${index}`"
+                  class="*:first:mt-0 *:last:mb-0"
+                />
+              </template>
             </template>
+          </UChatMessages>
+
+          <template #prompt>
+            <UChatPrompt
+              v-model="input"
+              icon="i-lucide-search"
+              variant="naked"
+              :error="chat.error"
+              @submit="onSubmit"
+            />
           </template>
-        </UChatMessages>
-
-        <template #prompt>
-          <UChatPrompt
-            v-model="input"
-            icon="i-lucide-search"
-            variant="naked"
-            :error="chat.error"
-            @submit="onSubmit"
-          />
-        </template>
-      </UChatPalette>
+        </UChatPalette>
+      </UTheme>
     </template>
   </UModal>
 </template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarChatExample.vue b/docs/app/components/content/examples/sidebar/SidebarChatExample.vue
new file mode 100644
index 0000000000..c4cc6f40f1
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarChatExample.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import { isTextUIPart } from 'ai'
+import { Chat } from '@ai-sdk/vue'
+
+const open = ref(true)
+const input = ref('')
+
+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
+})
+
+function onSubmit() {
+  if (!input.value.trim()) return
+
+  chat.sendMessage({ text: input.value })
+
+  input.value = ''
+}
+
+const ui = {
+  prose: {
+    p: { base: 'my-2 text-sm/6' },
+    li: { base: 'my-0.5 text-sm/6' },
+    ul: { base: 'my-2' },
+    ol: { base: 'my-2' },
+    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', base: 'text-xs/5' },
+    table: { root: 'my-2' },
+    hr: { base: 'my-4' }
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-1">
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center justify-end px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-right"
+          color="neutral"
+          variant="ghost"
+          aria-label="Toggle sidebar"
+          @click="open = !open"
+        />
+      </div>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </div>
+
+    <USidebar
+      v-model:open="open"
+      side="right"
+      title="AI Chat"
+      close
+      :style="{ '--sidebar-width': '20rem' }"
+      :ui="{ container: 'h-full' }"
+    >
+      <UTheme :ui="ui">
+        <UChatMessages
+          :messages="chat.messages"
+          :status="chat.status"
+          compact
+          class="px-0"
+        >
+          <template #content="{ message }">
+            <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
+              <MDC
+                v-if="isTextUIPart(part)"
+                :value="part.text"
+                :cache-key="`${message.id}-${index}`"
+                class="*:first:mt-0 *:last:mb-0"
+              />
+            </template>
+          </template>
+        </UChatMessages>
+      </UTheme>
+
+      <template #footer>
+        <UChatPrompt
+          v-model="input"
+          :error="chat.error"
+          :autofocus="false"
+          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/docs/app/components/content/examples/sidebar/SidebarExample.vue b/docs/app/components/content/examples/sidebar/SidebarExample.vue
new file mode 100644
index 0000000000..22cde75c6a
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarExample.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
+
+const open = ref(true)
+
+const colorMode = useColorMode()
+
+const teams = ref([{
+  label: 'Nuxt',
+  avatar: {
+    src: 'https://github.com/nuxt.png',
+    alt: 'Nuxt'
+  }
+}, {
+  label: 'Vue',
+  avatar: {
+    src: 'https://github.com/vuejs.png',
+    alt: 'Vue'
+  }
+}, {
+  label: 'UnJS',
+  avatar: {
+    src: 'https://github.com/unjs.png',
+    alt: 'UnJS'
+  }
+}])
+const selectedTeam = ref(teams.value[0])
+
+const teamsItems = computed<DropdownMenuItem[][]>(() => {
+  return [teams.value.map((team, index) => ({
+    ...team,
+    kbds: ['meta', String(index + 1)],
+    onSelect() {
+      selectedTeam.value = team
+    }
+  })), [{
+    label: 'Create team',
+    icon: 'i-lucide-circle-plus'
+  }]]
+})
+
+function getItems(state: 'collapsed' | 'expanded') {
+  return [{
+    label: 'Inbox',
+    icon: 'i-lucide-inbox',
+    badge: '4'
+  }, {
+    label: 'Issues',
+    icon: 'i-lucide-square-dot'
+  }, {
+    label: 'Activity',
+    icon: 'i-lucide-square-activity'
+  }, {
+    label: 'Settings',
+    icon: 'i-lucide-settings',
+    defaultOpen: true,
+    children: state === 'expanded'
+      ? [{
+          label: 'General',
+          icon: 'i-lucide-house'
+        }, {
+          label: 'Team',
+          icon: 'i-lucide-users'
+        }, {
+          label: 'Billing',
+          icon: 'i-lucide-credit-card'
+        }]
+      : []
+  }] satisfies NavigationMenuItem[]
+}
+
+const user = ref({
+  name: 'Benjamin Canac',
+  avatar: {
+    src: 'https://github.com/benjamincanac.png',
+    alt: 'Benjamin Canac'
+  }
+})
+
+const userItems = computed<DropdownMenuItem[][]>(() => ([[{
+  label: 'Profile',
+  icon: 'i-lucide-user'
+}, {
+  label: 'Billing',
+  icon: 'i-lucide-credit-card'
+}, {
+  label: 'Settings',
+  icon: 'i-lucide-settings',
+  to: '/settings'
+}], [{
+  label: 'Appearance',
+  icon: 'i-lucide-sun-moon',
+  children: [{
+    label: 'Light',
+    icon: 'i-lucide-sun',
+    type: 'checkbox',
+    checked: colorMode.value === 'light',
+    onUpdateChecked(checked: boolean) {
+      if (checked) {
+        colorMode.preference = 'light'
+      }
+    },
+    onSelect(e: Event) {
+      e.preventDefault()
+    }
+  }, {
+    label: 'Dark',
+    icon: 'i-lucide-moon',
+    type: 'checkbox',
+    checked: colorMode.value === 'dark',
+    onUpdateChecked(checked: boolean) {
+      if (checked) {
+        colorMode.preference = 'dark'
+      }
+    },
+    onSelect(e: Event) {
+      e.preventDefault()
+    }
+  }]
+}], [{
+  label: 'GitHub',
+  icon: 'i-simple-icons-github',
+  to: 'https://github.com/nuxt/ui',
+  target: '_blank'
+}, {
+  label: 'Log out',
+  icon: 'i-lucide-log-out'
+}]]))
+
+defineShortcuts(extractShortcuts(teamsItems.value))
+</script>
+
+<template>
+  <div class="flex flex-1">
+    <USidebar
+      v-model:open="open"
+      collapsible="icon"
+      rail
+      :ui="{
+        container: 'h-full',
+        inner: 'bg-elevated/25 divide-transparent',
+        body: 'py-0'
+      }"
+    >
+      <template #header>
+        <UDropdownMenu
+          :items="teamsItems"
+          :content="{ align: 'start', collisionPadding: 12 }"
+          :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }"
+        >
+          <UButton
+            v-bind="selectedTeam"
+            trailing-icon="i-lucide-chevrons-up-down"
+            color="neutral"
+            variant="ghost"
+            square
+            class="w-full data-[state=open]:bg-elevated overflow-hidden"
+            :ui="{
+              trailingIcon: 'text-dimmed ms-auto'
+            }"
+          />
+        </UDropdownMenu>
+      </template>
+
+      <template #default="{ state }">
+        <UNavigationMenu
+          :key="state"
+          :items="getItems(state)"
+          orientation="vertical"
+          :ui="{ link: 'p-1.5 overflow-hidden' }"
+        />
+      </template>
+
+      <template #footer>
+        <UDropdownMenu
+          :items="userItems"
+          :content="{ align: 'center', collisionPadding: 12 }"
+          :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }"
+        >
+          <UButton
+            v-bind="user"
+            :label="user?.name"
+            trailing-icon="i-lucide-chevrons-up-down"
+            color="neutral"
+            variant="ghost"
+            square
+            class="w-full data-[state=open]:bg-elevated overflow-hidden"
+            :ui="{
+              trailingIcon: 'text-dimmed ms-auto'
+            }"
+          />
+        </UDropdownMenu>
+      </template>
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          aria-label="Toggle sidebar"
+          @click="open = !open"
+        />
+      </div>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarHeaderExample.vue b/docs/app/components/content/examples/sidebar/SidebarHeaderExample.vue
new file mode 100644
index 0000000000..1b6f267401
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarHeaderExample.vue
@@ -0,0 +1,55 @@
+<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 flex-col flex-1">
+    <UHeader toggle-side="left" :ui="{ container: 'px-4!' }">
+      <template #toggle>
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          aria-label="Toggle sidebar"
+          @click="open = !open"
+        />
+      </template>
+    </UHeader>
+
+    <div class="flex flex-1 min-h-0">
+      <USidebar
+        v-model:open="open"
+        collapsible="icon"
+        :ui="{
+          gap: 'h-[calc(100%-var(--ui-header-height))]',
+          container: 'absolute top-(--ui-header-height) bottom-0 h-[calc(100%-var(--ui-header-height))]'
+        }"
+      >
+        <UNavigationMenu
+          :items="items"
+          orientation="vertical"
+          :ui="{ link: 'p-1.5 overflow-hidden' }"
+        />
+      </USidebar>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarModeExample.vue b/docs/app/components/content/examples/sidebar/SidebarModeExample.vue
new file mode 100644
index 0000000000..0704d16f95
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarModeExample.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { NavigationMenuItem, SidebarProps } from '@nuxt/ui'
+
+// Ignore the props for the example
+defineProps<Pick<SidebarProps, 'mode'>>()
+
+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 flex-1">
+    <USidebar v-model:open="open" :mode="mode" title="Navigation">
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        :ui="{ link: 'p-1.5 overflow-hidden' }"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          aria-label="Toggle sidebar"
+          @click="open = !open"
+        />
+      </div>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </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..a10bcbf45a
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarOpenExample.vue
@@ -0,0 +1,50 @@
+<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',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex flex-1">
+    <USidebar v-model:open="open" title="Navigation" collapsible="icon">
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        :ui="{ link: 'p-1.5 overflow-hidden' }"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          :aria-label="open ? 'Close sidebar' : 'Open sidebar'"
+          @click="open = !open"
+        />
+      </div>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </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..cdd1463904
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarPersistExample.vue
@@ -0,0 +1,50 @@
+<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',
+  badge: '4'
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users'
+}]
+</script>
+
+<template>
+  <div class="flex flex-1">
+    <USidebar v-model:open="open" title="Navigation" collapsible="icon">
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        :ui="{ link: 'p-1.5 overflow-hidden' }"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          aria-label="Toggle sidebar"
+          @click="open = !open"
+        />
+      </div>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarPropsExample.vue b/docs/app/components/content/examples/sidebar/SidebarPropsExample.vue
new file mode 100644
index 0000000000..52779c609a
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarPropsExample.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { NavigationMenuItem, SidebarProps } from '@nuxt/ui'
+
+// Ignore the props for the example
+defineProps<Pick<SidebarProps, 'variant' | 'collapsible' | 'side'>>()
+
+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 flex-1"
+    :class="[
+      variant === 'inset' && 'bg-neutral-50 dark:bg-neutral-950',
+      side === 'right' && 'flex-row-reverse'
+    ]"
+  >
+    <USidebar
+      v-model:open="open"
+      :variant="variant"
+      :collapsible="collapsible"
+      :side="side"
+      :ui="{
+        container: 'h-full'
+      }"
+    >
+      <template #header>
+        <UIcon name="i-logos-nuxt-icon" class="size-8" />
+      </template>
+
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        :ui="{ link: 'p-1.5 overflow-hidden' }"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col overflow-hidden lg:peer-data-[variant=floating]:my-4 peer-data-[variant=inset]:m-4 lg:peer-data-[variant=inset]:not-peer-data-[collapsible=offcanvas]:ms-0 peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:shadow peer-data-[variant=inset]:ring peer-data-[variant=inset]:ring-default bg-default">
+      <div
+        class="h-(--ui-header-height) shrink-0 flex items-center px-4"
+        :class="[
+          variant !== 'floating' && 'border-b border-default',
+          side === 'right' && 'justify-end'
+        ]"
+      >
+        <UButton
+          :icon="side === 'left' ? 'i-lucide-panel-left' : 'i-lucide-panel-right'"
+          color="neutral"
+          variant="ghost"
+          aria-label="Toggle sidebar"
+          @click="open = !open"
+        />
+      </div>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/sidebar/SidebarWidthExample.vue b/docs/app/components/content/examples/sidebar/SidebarWidthExample.vue
new file mode 100644
index 0000000000..8b638d5173
--- /dev/null
+++ b/docs/app/components/content/examples/sidebar/SidebarWidthExample.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 flex-1">
+    <USidebar
+      v-model:open="open"
+      collapsible="icon"
+      :style="{ '--sidebar-width': '20rem' }"
+    >
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        :ui="{ link: 'p-1.5 overflow-hidden' }"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col">
+      <div class="h-(--ui-header-height) shrink-0 flex items-center px-4 border-b border-default">
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="ghost"
+          aria-label="Toggle sidebar"
+          @click="open = !open"
+        />
+      </div>
+
+      <div class="flex-1 p-4">
+        <Placeholder class="size-full" />
+      </div>
+    </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/components/search/SearchChat.vue b/docs/app/components/search/SearchChat.vue
deleted file mode 100644
index 7ab98f359e..0000000000
--- a/docs/app/components/search/SearchChat.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import type { DefineComponent } from 'vue'
-import { Chat } from '@ai-sdk/vue'
-import type { UIMessage, UIToolInvocation } from 'ai'
-import { DefaultChatTransport } from 'ai'
-import { splitByCase, upperFirst } from 'scule'
-import ProseStreamPre from '../prose/PreStream.vue'
-
-const components = {
-  pre: ProseStreamPre as unknown as DefineComponent
-}
-
-const messages = defineModel<UIMessage[]>('messages')
-const fullscreen = defineModel<boolean>('fullscreen')
-
-const emits = defineEmits<{
-  close: []
-}>()
-
-const input = ref('')
-
-const toast = useToast()
-const { track } = useAnalytics()
-
-const chat = new Chat({
-  messages: messages.value,
-  transport: new DefaultChatTransport({
-    api: '/api/search'
-  }),
-  onError: (error) => {
-    const { message } = typeof error.message === 'string' && error.message[0] === '{' ? JSON.parse(error.message) : error
-
-    toast.add({
-      description: message,
-      icon: 'i-lucide-alert-circle',
-      color: 'error',
-      duration: 0
-    })
-  },
-  onFinish: () => {
-    messages.value = chat.messages
-  }
-})
-
-function onSubmit() {
-  if (!input.value.trim()) {
-    return
-  }
-
-  track('AI Chat Message Sent')
-
-  chat.sendMessage({ text: input.value })
-
-  input.value = ''
-}
-
-function onClose(e: Event) {
-  e.preventDefault()
-
-  emits('close')
-}
-
-onMounted(() => {
-  if (chat.lastMessage?.role === 'user') {
-    chat.regenerate()
-  }
-})
-
-function upperName(name: string) {
-  return splitByCase(name).map(p => upperFirst(p)).join('')
-}
-
-type State = UIToolInvocation<any>['state']
-
-function getToolMessage(state: State, toolName: string, input: any) {
-  const searchVerb = state === 'output-available' ? 'Searched' : 'Searching'
-  const readVerb = state === 'output-available' ? 'Read' : 'Reading'
-
-  return {
-    list_components: `${searchVerb} components`,
-    list_composables: `${searchVerb} composables`,
-    get_component: `${readVerb} ${upperName(input.componentName)} component`,
-    get_component_metadata: `${readVerb} metadata for component ${upperName(input.componentName)}`,
-    list_templates: `${searchVerb} templates${input.category ? ` in ${input.category} category` : ''}`,
-    get_template: `${readVerb} template ${upperName(input.templateName)}`,
-    get_documentation_page: `${readVerb} ${input.path || ''} page`,
-    list_documentation_pages: `${searchVerb} documentation pages`,
-    list_getting_started_guides: `${searchVerb} documentation guides`,
-    get_migration_guide: `${readVerb} migration guide${input.version ? ` for ${input.version}` : ''}`,
-    list_examples: `${searchVerb} examples`,
-    get_example: `${readVerb} ${upperName(input.exampleName)} example`,
-    search_components_by_category: `${searchVerb} components${input.category ? ` in ${input.category} category` : ''}${input.search ? ` for "${input.search}"` : ''}`
-  }[toolName] || `${searchVerb} ${toolName}`
-}
-
-const getCachedToolMessage = useMemoize((state: State, toolName: string, input: string) =>
-  getToolMessage(state, toolName, JSON.parse(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>
-      <UChatPrompt
-        v-model="input"
-        icon="i-lucide-message-circle"
-        variant="naked"
-        :error="chat.error"
-        :ui="{ trailing: 'items-center' }"
-        @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>
-      </UChatPrompt>
-    </template>
-  </UChatPalette>
-</template>
diff --git a/docs/app/components/theme-picker/ThemePicker.vue b/docs/app/components/theme-picker/ThemePicker.vue
index 13d09bbea2..dd8bbd6ccf 100644
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-picker/ThemePicker.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const appConfig = useAppConfig()
 const colorMode = useColorMode()
 const { track } = useAnalytics()
 
@@ -19,6 +18,7 @@ const {
   neutral,
   primaryColors,
   primary,
+  blackAsPrimary,
   setBlackAsPrimary,
   radiuses,
   radius,
@@ -68,7 +68,7 @@ const {
         <div class="grid grid-cols-3 gap-1 -mx-2">
           <ThemePickerButton
             label="Black"
-            :selected="appConfig.theme.blackAsPrimary"
+            :selected="blackAsPrimary"
             @click="setBlackAsPrimary(true)"
           >
             <template #leading>
@@ -81,7 +81,7 @@ const {
             :key="color"
             :label="color"
             :chip="color"
-            :selected="!appConfig.theme.blackAsPrimary && primary === color"
+            :selected="!blackAsPrimary && primary === color"
             @click="primary = color"
           />
         </div>
diff --git a/docs/app/composables/useChat.ts b/docs/app/composables/useChat.ts
new file mode 100644
index 0000000000..0b9580f1df
--- /dev/null
+++ b/docs/app/composables/useChat.ts
@@ -0,0 +1,24 @@
+import type { UIMessage } from 'ai'
+import { createSharedComposable, useLocalStorage } from '@vueuse/core'
+
+export const useChat = createSharedComposable(() => {
+  const storageOpen = useLocalStorage('chat-open', false)
+  const messages = useLocalStorage<UIMessage[]>('chat-messages', [])
+
+  const open = ref(false)
+
+  onNuxtReady(() => {
+    nextTick(() => {
+      open.value = storageOpen.value
+    })
+  })
+
+  watch(open, (value) => {
+    storageOpen.value = value
+  })
+
+  return {
+    open,
+    messages
+  }
+})
diff --git a/docs/app/composables/useSearch.ts b/docs/app/composables/useSearch.ts
index a675f40b54..a238d83f09 100644
--- a/docs/app/composables/useSearch.ts
+++ b/docs/app/composables/useSearch.ts
@@ -1,39 +1,30 @@
-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
-      ? [{
-          id: '1',
-          role: 'user',
-          parts: [{ type: 'text', text: searchTerm.value }]
-        }]
-      : [{
-          id: '1',
-          role: 'assistant',
-          parts: [{ type: 'text', text: 'Hello, how can I help you today?' }]
-        }]
+    if (searchTerm.value) {
+      messages.value = [...messages.value, {
+        id: String(Date.now()),
+        role: 'user',
+        parts: [{ type: 'text', text: searchTerm.value }]
+      }]
+    }
 
-    chat.value = true
+    open.value = true
   }
 
   const links = computed(() => [!searchTerm.value && {
     label: 'Ask AI',
     description: 'Ask the AI assistant powered by our custom MCP server for help.',
     icon: 'i-lucide-bot',
+    kbds: ['meta', 'i'],
     ui: {
       itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
     },
@@ -134,9 +125,6 @@ export function useSearch() {
   return {
     links,
     groups,
-    chat,
-    fullscreen,
-    searchTerm,
-    messages
+    searchTerm
   }
 }
diff --git a/docs/app/composables/useTheme.ts b/docs/app/composables/useTheme.ts
index 926bc259ab..cc78b76b33 100644
--- a/docs/app/composables/useTheme.ts
+++ b/docs/app/composables/useTheme.ts
@@ -1,12 +1,32 @@
-import { themeIcons } from '../utils/theme'
+import { defu } from 'defu'
+import { useLocalStorage } from '@vueuse/core'
+import { themeIcons, cssVariableDefaults } from '../utils/theme'
 import { omit } from '#ui/utils'
 import colors from 'tailwindcss/colors'
 
+function readLocalStorage<T>(key: string, fallback: T): T {
+  if (!import.meta.client) return fallback
+  try {
+    const raw = window.localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : fallback
+  } catch {
+    return fallback
+  }
+}
+
 export function useTheme() {
   const appConfig = useAppConfig()
   const colorMode = useColorMode()
   const { track } = useAnalytics()
 
+  const aiThemeExtras = useState<Record<string, any>>('nuxt-ui-ai-theme', () => readLocalStorage('nuxt-ui-ai-theme', {}))
+  const customColorsData = useState<Record<string, Record<string, string>>>('nuxt-ui-custom-colors', () => readLocalStorage('nuxt-ui-custom-colors', {}))
+  const cssVariablesData = useState<{ light?: Record<string, string>, dark?: Record<string, string> }>('nuxt-ui-css-variables', () => readLocalStorage('nuxt-ui-css-variables', {}))
+  const _radius = useLocalStorage('nuxt-ui-radius', 0.25)
+  const _font = useLocalStorage('nuxt-ui-font', 'Public Sans')
+  const _iconSet = useLocalStorage('nuxt-ui-icons', 'lucide')
+  const _blackAsPrimary = useLocalStorage('nuxt-ui-black-as-primary', false)
+
   const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'taupe', 'mauve', 'mist', 'olive']
   const neutral = computed({
     get() {
@@ -36,23 +56,22 @@ export function useTheme() {
   const radiuses = [0, 0.125, 0.25, 0.375, 0.5]
   const radius = computed({
     get() {
-      return appConfig.theme.radius
+      return _radius.value
     },
     set(option) {
-      appConfig.theme.radius = option
-      window.localStorage.setItem('nuxt-ui-radius', String(appConfig.theme.radius))
+      _radius.value = option
       track('Theme Changed', { setting: 'radius', value: option })
     }
   })
 
   const fonts = ['Public Sans', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway']
+
   const font = computed({
     get() {
-      return appConfig.theme.font
+      return _font.value
     },
     set(option) {
-      appConfig.theme.font = option
-      window.localStorage.setItem('nuxt-ui-font', appConfig.theme.font)
+      _font.value = option
       track('Theme Changed', { setting: 'font', value: option })
     }
   })
@@ -72,21 +91,20 @@ export function useTheme() {
   }]
   const icon = computed({
     get() {
-      return appConfig.theme.icons
+      return _iconSet.value
     },
     set(option) {
-      appConfig.theme.icons = option
+      _iconSet.value = option
       appConfig.ui.icons = themeIcons[option as keyof typeof themeIcons] as any
-      window.localStorage.setItem('nuxt-ui-icons', appConfig.theme.icons)
       track('Theme Changed', { setting: 'icons', value: option })
     }
   })
 
-  const modes = [
+  const modes = computed(() => [
     { label: 'light', icon: appConfig.ui.icons.light },
     { label: 'dark', icon: appConfig.ui.icons.dark },
     { label: 'system', icon: appConfig.ui.icons.system }
-  ]
+  ])
   const mode = computed({
     get() {
       return colorMode.value
@@ -97,24 +115,75 @@ export function useTheme() {
     }
   })
 
+  const blackAsPrimary = computed(() => _blackAsPrimary.value)
+
   function setBlackAsPrimary(value: boolean) {
-    appConfig.theme.blackAsPrimary = value
-    window.localStorage.setItem('nuxt-ui-black-as-primary', String(value))
+    _blackAsPrimary.value = value
     if (value) {
       track('Theme Changed', { setting: 'primary', value: 'black' })
     }
   }
 
+  const hasCustomColors = computed(() => Object.keys(customColorsData.value).length > 0)
+  const hasCSSVariables = computed(() => Object.keys(cssVariablesData.value.light || {}).length > 0 || Object.keys(cssVariablesData.value.dark || {}).length > 0)
+
+  const radiusStyle = computed(() => `:root { --ui-radius: ${_radius.value}rem; }`)
+  const blackAsPrimaryStyle = computed(() => _blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
+  const fontStyle = computed(() => `:root { --font-sans: '${_font.value}', sans-serif; }`)
+  const customColorsStyle = computed(() => {
+    const entries = Object.entries(customColorsData.value)
+    if (!entries.length) return ''
+    const vars = entries.flatMap(([name, shades]) =>
+      Object.entries(shades).map(([shade, hex]) => `--color-${name}-${shade}: ${hex};`)
+    )
+    return `:root { ${vars.join(' ')} }`
+  })
+  const cssVariablesStyle = computed(() => {
+    const data = cssVariablesData.value
+    const parts: string[] = []
+    if (Object.keys(data.light || {}).length) {
+      const full = { ...cssVariableDefaults.light, ...data.light }
+      parts.push(`.light { ${Object.entries(full).map(([k, v]) => `${k}: ${v};`).join(' ')} }`)
+    }
+    if (Object.keys(data.dark || {}).length) {
+      const full = { ...cssVariableDefaults.dark, ...data.dark }
+      parts.push(`.dark { ${Object.entries(full).map(([k, v]) => `${k}: ${v};`).join(' ')} }`)
+    }
+    return parts.join(' ')
+  })
+
+  const link = computed(() => {
+    const name = _font.value
+    if (name === 'Public Sans') return []
+    return [{
+      rel: 'stylesheet' as const,
+      href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(name)}:wght@400;500;600;700&display=swap`,
+      id: `font-${name.toLowerCase().replace(/\s+/g, '-')}`
+    }]
+  })
+
+  const style = [
+    { innerHTML: radiusStyle, id: 'nuxt-ui-radius', tagPriority: -2 },
+    { innerHTML: blackAsPrimaryStyle, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
+    { innerHTML: fontStyle, id: 'nuxt-ui-font', tagPriority: -2 },
+    { innerHTML: customColorsStyle, id: 'chat-custom-colors', tagPriority: -2 },
+    { innerHTML: cssVariablesStyle, id: 'chat-css-variables', tagPriority: -2 }
+  ]
+
   const hasCSSChanges = computed(() => {
-    return appConfig.theme.radius !== 0.25
-      || appConfig.theme.blackAsPrimary
-      || appConfig.theme.font !== 'Public Sans'
+    return _radius.value !== 0.25
+      || _blackAsPrimary.value
+      || _font.value !== 'Public Sans'
+      || hasCustomColors.value
+      || hasCSSVariables.value
   })
 
   const hasAppConfigChanges = computed(() => {
     return appConfig.ui.colors.primary !== 'green'
       || appConfig.ui.colors.neutral !== 'slate'
-      || appConfig.theme.icons !== 'lucide'
+      || _iconSet.value !== 'lucide'
+      || !!aiThemeExtras.value.colors
+      || !!aiThemeExtras.value.ui
   })
 
   function exportCSS(): string {
@@ -125,15 +194,29 @@ export function useTheme() {
       '@import "@nuxt/ui";'
     ]
 
-    if (appConfig.theme.font !== 'Public Sans') {
-      lines.push('', '@theme {', `  --font-sans: '${appConfig.theme.font}', sans-serif;`, '}')
+    if (_font.value !== 'Public Sans') {
+      lines.push('', '@theme {', `  --font-sans: '${_font.value}', sans-serif;`, '}')
+    }
+
+    const colorLines: string[] = []
+    for (const [name, shades] of Object.entries(customColorsData.value)) {
+      for (const [shade, hex] of Object.entries(shades)) {
+        colorLines.push(`  --color-${name}-${shade}: ${hex};`)
+      }
+    }
+
+    if (colorLines.length) {
+      lines.push('', '@theme static {', ...colorLines, '}')
     }
 
+    const lightOverrides = Object.entries(cssVariablesData.value.light || {}).filter(([key, val]) => val !== cssVariableDefaults.light[key as keyof typeof cssVariableDefaults.light])
+    const darkOverrides = Object.entries(cssVariablesData.value.dark || {}).filter(([key, val]) => val !== cssVariableDefaults.dark[key as keyof typeof cssVariableDefaults.dark])
+
     const rootLines: string[] = []
-    if (appConfig.theme.radius !== 0.25) {
-      rootLines.push(`  --ui-radius: ${appConfig.theme.radius}rem;`)
+    if (_radius.value !== 0.25) {
+      rootLines.push(`  --ui-radius: ${_radius.value}rem;`)
     }
-    if (appConfig.theme.blackAsPrimary) {
+    if (_blackAsPrimary.value) {
       rootLines.push('  --ui-primary: black;')
     }
 
@@ -141,8 +224,20 @@ export function useTheme() {
       lines.push('', ':root {', ...rootLines, '}')
     }
 
-    if (appConfig.theme.blackAsPrimary) {
-      lines.push('', '.dark {', '  --ui-primary: white;', '}')
+    if (lightOverrides.length) {
+      lines.push('', ':root, .light {', ...lightOverrides.map(([key, val]) => `  ${key}: ${val};`), '}')
+    }
+
+    const darkLines: string[] = []
+    if (_blackAsPrimary.value) {
+      darkLines.push('  --ui-primary: white;')
+    }
+    if (darkOverrides.length) {
+      darkLines.push(...darkOverrides.map(([key, val]) => `  ${key}: ${val};`))
+    }
+
+    if (darkLines.length) {
+      lines.push('', '.dark {', ...darkLines, '}')
     }
 
     return lines.join('\n')
@@ -153,21 +248,22 @@ export function useTheme() {
 
     const config: Record<string, any> = {}
 
-    if (appConfig.ui.colors.primary !== 'green' || appConfig.ui.colors.neutral !== 'slate') {
-      config.ui = { colors: {} }
-      if (appConfig.ui.colors.primary !== 'green') {
-        config.ui.colors.primary = appConfig.ui.colors.primary
-      }
-      if (appConfig.ui.colors.neutral !== 'slate') {
-        config.ui.colors.neutral = appConfig.ui.colors.neutral
-      }
+    const defaultColors: Record<string, string> = { primary: 'green', neutral: 'slate', secondary: 'blue', success: 'green', info: 'blue', warning: 'yellow', error: 'red' }
+    const colorEntries = Object.entries(defaultColors).filter(([key, def]) => (appConfig.ui.colors as any)[key] !== def)
+    if (colorEntries.length) {
+      config.ui = { colors: Object.fromEntries(colorEntries.map(([key]) => [key, (appConfig.ui.colors as any)[key]])) }
+    }
+
+    if (_iconSet.value !== 'lucide') {
+      const iconMapping = themeIcons[_iconSet.value as keyof typeof themeIcons]
+      config.ui = config.ui || {}
+      config.ui.icons = iconMapping
     }
 
-    if (appConfig.theme.icons !== 'lucide') {
-      const iconSet = appConfig.theme.icons
-      const icons = themeIcons[iconSet as keyof typeof themeIcons]
+    const extras = aiThemeExtras.value
+    if (extras.ui) {
       config.ui = config.ui || {}
-      config.ui.icons = icons
+      Object.assign(config.ui, extras.ui)
     }
 
     const configString = JSON.stringify(config, null, 2)
@@ -177,35 +273,114 @@ export function useTheme() {
     return `export default defineAppConfig(${configString})`
   }
 
+  function injectCustomColors(customColors: Record<string, Record<string, string>>) {
+    const merged = { ...customColorsData.value, ...customColors }
+    customColorsData.value = merged
+    window.localStorage.setItem('nuxt-ui-custom-colors', JSON.stringify(merged))
+  }
+
+  function injectCSSVariables(cssVariables: { light?: Record<string, string>, dark?: Record<string, string> }) {
+    const merged = {
+      light: { ...cssVariablesData.value.light, ...cssVariables.light },
+      dark: { ...cssVariablesData.value.dark, ...cssVariables.dark }
+    }
+    cssVariablesData.value = merged
+    window.localStorage.setItem('nuxt-ui-css-variables', JSON.stringify(merged))
+  }
+
+  function applyThemeSettings(settings: Record<string, any>) {
+    if (settings.customColors && typeof settings.customColors === 'object') {
+      injectCustomColors(settings.customColors)
+    }
+
+    if (settings.cssVariables && typeof settings.cssVariables === 'object') {
+      injectCSSVariables(settings.cssVariables)
+    }
+
+    if (settings.primary) primary.value = settings.primary
+    if (settings.neutral) neutral.value = settings.neutral
+    if (settings.radius !== undefined) radius.value = settings.radius
+    if (settings.font) font.value = settings.font
+    if (settings.icons && settings.icons in themeIcons) icon.value = settings.icons
+    if (settings.blackAsPrimary !== undefined) setBlackAsPrimary(!!settings.blackAsPrimary)
+
+    const colorKeys = ['secondary', 'success', 'info', 'warning', 'error'] as const
+    const savedExtras: Record<string, any> = { ...aiThemeExtras.value }
+
+    for (const color of colorKeys) {
+      if (settings[color]) {
+        (appConfig.ui.colors as any)[color] = settings[color]
+        savedExtras.colors = savedExtras.colors || {}
+        savedExtras.colors[color] = settings[color]
+      }
+    }
+
+    if (settings.ui) {
+      savedExtras.ui = savedExtras.ui || {}
+      for (const [key, value] of Object.entries(settings.ui)) {
+        if (key === 'colors') continue
+
+        const merged = defu(value as Record<string, any>, (appConfig.ui as any)[key] || {}, savedExtras.ui[key] || {})
+        ;(appConfig.ui as any)[key] = merged
+        savedExtras.ui[key] = merged
+      }
+    }
+
+    aiThemeExtras.value = savedExtras
+    window.localStorage.setItem('nuxt-ui-ai-theme', JSON.stringify(savedExtras))
+
+    track('AI Theme Applied')
+  }
+
   function resetTheme() {
     track('Theme Reset')
 
-    // Reset without triggering individual tracking events
     appConfig.ui.colors.primary = 'green'
     window.localStorage.removeItem('nuxt-ui-primary')
 
     appConfig.ui.colors.neutral = 'slate'
     window.localStorage.removeItem('nuxt-ui-neutral')
 
-    appConfig.theme.radius = 0.25
-    window.localStorage.removeItem('nuxt-ui-radius')
-
-    appConfig.theme.font = 'Public Sans'
-    window.localStorage.removeItem('nuxt-ui-font')
-
-    appConfig.theme.icons = 'lucide'
+    _radius.value = 0.25
+    _font.value = 'Public Sans'
+    _iconSet.value = 'lucide'
     appConfig.ui.icons = themeIcons.lucide as any
-    window.localStorage.removeItem('nuxt-ui-icons')
+    _blackAsPrimary.value = false
 
-    appConfig.theme.blackAsPrimary = false
-    window.localStorage.removeItem('nuxt-ui-black-as-primary')
+    const defaultColors: Record<string, string> = { secondary: 'blue', success: 'green', info: 'blue', warning: 'yellow', error: 'red' }
+    const extras = aiThemeExtras.value
+    if (extras.colors) {
+      for (const key of Object.keys(extras.colors)) {
+        (appConfig.ui.colors as any)[key] = defaultColors[key] || (appConfig.ui.colors as any)[key]
+      }
+    }
+    if (extras.ui) {
+      for (const key of Object.keys(extras.ui)) {
+        if (key === 'colors' || key === 'icons') continue
+        (appConfig.ui as any)[key] = undefined
+      }
+    }
+    window.localStorage.removeItem('nuxt-ui-ai-theme')
+    window.localStorage.removeItem('nuxt-ui-custom-colors')
+    window.localStorage.removeItem('nuxt-ui-css-variables')
+    aiThemeExtras.value = {}
+    customColorsData.value = {}
+    cssVariablesData.value = {}
+
+    if (import.meta.client) {
+      document.getElementById('chat-css-variables')?.replaceChildren()
+      document.getElementById('chat-custom-colors')?.replaceChildren()
+    }
   }
 
   return {
+    style,
+    link,
     neutralColors,
     neutral,
     primaryColors,
     primary,
+    blackAsPrimary,
     setBlackAsPrimary,
     radiuses,
     radius,
@@ -219,6 +394,7 @@ export function useTheme() {
     hasAppConfigChanges,
     exportCSS,
     exportAppConfig,
+    applyThemeSettings,
     resetTheme
   }
 }
diff --git a/docs/app/error.vue b/docs/app/error.vue
index f74bde9482..6856be42f7 100644
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
 const route = useRoute()
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
+const { style, link } = useTheme()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs', ['framework', 'category', 'description']))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs', {
@@ -18,23 +19,14 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })
 
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
-const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
-const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
-const font = computed(() => `:root { --font-sans: '${appConfig.theme.font}', sans-serif; }`)
 
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
-  link: [
-    // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
-  ],
-  style: [
-    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
-    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
-    { innerHTML: font, id: 'nuxt-ui-font', tagPriority: -2 }
-  ],
+  link,
+  style,
   htmlAttrs: {
     lang: 'en'
   }
diff --git a/docs/app/pages/docs/[...slug].vue b/docs/app/pages/docs/[...slug].vue
index 7ca6f76bbd..be3efd20ce 100644
--- a/docs/app/pages/docs/[...slug].vue
+++ b/docs/app/pages/docs/[...slug].vue
@@ -88,16 +88,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-message-square',
+  label: 'Explain with AI',
+  onClick: () => {
+    messages.value = [...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>
 
@@ -149,12 +157,12 @@ const communityLinks = computed(() => [{
       <UContentSurround :surround="(surround as any)" />
     </UPageBody>
 
-    <template v-if="page?.body?.toc?.links?.length" #right>
-      <UContentToc :links="page.body.toc.links" class="z-[2]">
+    <template v-if="page?.body?.toc?.links?.length && !open" #right>
+      <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" />
 
           <template v-if="!isDev">
             <USeparator type="dashed" />
diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue
index c81c3903aa..132601c494 100644
--- a/docs/app/pages/index.vue
+++ b/docs/app/pages/index.vue
@@ -88,8 +88,8 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
           pause-on-hover
           :overlay="false"
           :ui="{
-            root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full left-0 border-y lg:border-x lg:border-y-0 lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:flex-col',
-            content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content]'
+            root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full left-0 border-y lg:border-x lg:border-y-0 lg:w-[calc(50%-6px)] 2xl:max-w-[320px] lg:flex-col',
+            content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-fit'
           }"
         >
           <ULink
@@ -118,8 +118,8 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
           reverse
           :overlay="false"
           :ui="{
-            root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full mt-[180px] left-0 border-y lg:mt-auto lg:left-auto lg:border-y-0 lg:border-x lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:right-0 lg:flex-col',
-            content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content] lg:[animation-direction:reverse]'
+            root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full mt-[180px] left-0 border-y lg:mt-auto lg:left-auto lg:border-y-0 lg:border-x lg:w-[calc(50%-6px)] 2xl:max-w-[320px] lg:right-0 lg:flex-col',
+            content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-fit lg:[animation-direction:reverse]'
           }"
         >
           <ULink
diff --git a/docs/app/plugins/theme.ts b/docs/app/plugins/theme.ts
index 0c9696e595..9a7c57fb08 100644
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -1,4 +1,5 @@
-import { themeIcons } from '../utils/theme'
+import { defu } from 'defu'
+import { themeIcons, cssVariableDefaults } from '../utils/theme'
 
 export default defineNuxtPlugin({
   enforce: 'post',
@@ -6,77 +7,83 @@ export default defineNuxtPlugin({
     const appConfig = useAppConfig()
 
     if (import.meta.client) {
-      function updateColor(type: 'primary' | 'neutral') {
-        const color = localStorage.getItem(`nuxt-ui-${type}`)
-        if (color) {
-          appConfig.ui.colors[type] = color
-        }
-      }
+      const primary = localStorage.getItem('nuxt-ui-primary')
+      if (primary) appConfig.ui.colors.primary = primary
 
-      function updateRadius() {
-        const radius = localStorage.getItem('nuxt-ui-radius')
-        if (radius) {
-          appConfig.theme.radius = Number.parseFloat(radius)
-        }
-      }
+      const neutral = localStorage.getItem('nuxt-ui-neutral')
+      if (neutral) appConfig.ui.colors.neutral = neutral
 
-      function updateBlackAsPrimary() {
-        const blackAsPrimary = localStorage.getItem('nuxt-ui-black-as-primary')
-        if (blackAsPrimary) {
-          appConfig.theme.blackAsPrimary = blackAsPrimary === 'true'
-        }
-      }
+      const icons = localStorage.getItem('nuxt-ui-icons')
+      if (icons) appConfig.ui.icons = themeIcons[icons as keyof typeof themeIcons] as any
 
-      function updateFont() {
-        const font = localStorage.getItem('nuxt-ui-font')
-        if (font) {
-          appConfig.theme.font = font
+      function restoreState<T>(key: string) {
+        try {
+          const raw = localStorage.getItem(key)
+          if (raw) {
+            const state = useState<T>(key)
+            state.value = JSON.parse(raw)
+          }
+        } catch {
+          // ignore malformed localStorage
         }
       }
 
-      updateColor('primary')
-      updateColor('neutral')
-      updateRadius()
-      updateBlackAsPrimary()
-      updateFont()
-    }
+      restoreState('nuxt-ui-ai-theme')
+      restoreState('nuxt-ui-custom-colors')
+      restoreState('nuxt-ui-css-variables')
 
-    onNuxtReady(() => {
-      function updateIcons() {
-        const icons = localStorage.getItem('nuxt-ui-icons')
-        if (icons) {
-          appConfig.theme.icons = icons
-          appConfig.ui.icons = themeIcons[icons as keyof typeof themeIcons] as any
+      try {
+        const extras = JSON.parse(localStorage.getItem('nuxt-ui-ai-theme') || '{}')
+        if (extras.colors) {
+          for (const [key, value] of Object.entries(extras.colors)) {
+            (appConfig.ui.colors as any)[key] = value
+          }
         }
+        if (extras.ui) {
+          onNuxtReady(() => {
+            for (const [key, value] of Object.entries(extras.ui)) {
+              if (key === 'colors' || key === 'icons') continue
+              (appConfig.ui as any)[key] = defu(value as Record<string, any>, (appConfig.ui as any)[key] || {})
+            }
+          })
+        }
+      } catch {
+        // ignore malformed localStorage
       }
-
-      updateIcons()
-    })
+    }
 
     if (import.meta.server) {
+      // Inline scripts below intentionally duplicate logic from the client-side composable
+      // (useTheme / injectCustomColors / injectCSSVariables) to restore persisted theme
+      // settings on first paint and prevent a flash of unstyled content (FOUC).
+      // The script IDs (chat-custom-colors, chat-css-variables, nuxt-ui-radius, etc.)
+      // correspond to the <style> elements managed by useTheme via useHead.
       useHead({
         script: [{
           innerHTML: `
-            let html = document.querySelector('style#nuxt-ui-colors').innerHTML;
+            var colorsEl = document.querySelector('style#nuxt-ui-colors');
+            if (colorsEl) {
+              let html = colorsEl.innerHTML;
 
-            if (localStorage.getItem('nuxt-ui-primary')) {
-              const primaryColor = localStorage.getItem('nuxt-ui-primary');
-              if (primaryColor !== 'black') {
+              if (localStorage.getItem('nuxt-ui-primary')) {
+                const primaryColor = localStorage.getItem('nuxt-ui-primary');
+                if (primaryColor !== 'black') {
+                  html = html.replace(
+                    /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
+                    \`$1\${primaryColor}$2\`
+                  );
+                }
+              }
+              if (localStorage.getItem('nuxt-ui-neutral')) {
+                let neutralColor = localStorage.getItem('nuxt-ui-neutral');
                 html = html.replace(
-                  /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
-                  \`$1\${primaryColor}$2\`
+                  /(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
+                  \`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
                 );
               }
-            }
-            if (localStorage.getItem('nuxt-ui-neutral')) {
-              let neutralColor = localStorage.getItem('nuxt-ui-neutral');
-              html = html.replace(
-                /(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
-                \`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
-              );
-            }
 
-            document.querySelector('style#nuxt-ui-colors').innerHTML = html;
+              colorsEl.innerHTML = html;
+            }
             `.replace(/\s+/g, ' '),
           type: 'text/javascript',
           tagPriority: -1
@@ -96,13 +103,73 @@ export default defineNuxtPlugin({
               document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = '';
             }
           `.replace(/\s+/g, ' ')
+        }, {
+          innerHTML: [
+            `if (localStorage.getItem('nuxt-ui-font')) {`,
+            `var font = localStorage.getItem('nuxt-ui-font');`,
+            `document.querySelector('style#nuxt-ui-font').innerHTML = ':root { --font-sans: \\'' + font + '\\', sans-serif; }';`,
+            `if (font !== 'Public Sans') {`,
+            `var lnk = document.createElement('link');`,
+            `lnk.rel = 'stylesheet';`,
+            `lnk.href = 'https://fonts.googleapis.com/css2?family=' + encodeURIComponent(font) + ':wght@400;500;600;700&display=swap';`,
+            `lnk.id = 'font-' + font.toLowerCase().replace(/\\s+/g, '-');`,
+            `document.head.appendChild(lnk);`,
+            `}}`
+          ].join(' ')
         }, {
           innerHTML: `
-            if (localStorage.getItem('nuxt-ui-font')) {
-              const font = localStorage.getItem('nuxt-ui-font');
-              document.querySelector('style#nuxt-ui-font').innerHTML = ':root { --font-sans: \\'' + font + '\\', sans-serif; }';
-            }
-          `.replace(/\s+/g, ' ')
+            (function() {
+              var raw = localStorage.getItem('nuxt-ui-custom-colors');
+              if (raw) {
+                try {
+                  var colors = JSON.parse(raw);
+                  var vars = [];
+                  for (var name in colors) {
+                    for (var shade in colors[name]) {
+                      vars.push('--color-' + name + '-' + shade + ': ' + colors[name][shade] + ';');
+                    }
+                  }
+                  if (vars.length) {
+                    var el = document.getElementById('chat-custom-colors');
+                    if (el) { el.textContent = ':root { ' + vars.join(' ') + ' }'; }
+                  }
+                } catch(e) {}
+              }
+            })();
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
+        }, {
+          innerHTML: `
+            (function() {
+              var raw = localStorage.getItem('nuxt-ui-css-variables');
+              if (raw) {
+                try {
+                  var cssVars = JSON.parse(raw);
+                  var defaults = ${JSON.stringify(cssVariableDefaults)};
+                  function merge(defs, overrides) {
+                    var result = [];
+                    for (var key in defs) { result.push(key + ': ' + (overrides[key] || defs[key]) + ';'); }
+                    for (var key in overrides) { if (!defs[key]) result.push(key + ': ' + overrides[key] + ';'); }
+                    return result;
+                  }
+                  var parts = [];
+                  if (cssVars.light && Object.keys(cssVars.light).length) {
+                    parts.push('.light { ' + merge(defaults.light, cssVars.light).join(' ') + ' }');
+                  }
+                  if (cssVars.dark && Object.keys(cssVars.dark).length) {
+                    parts.push('.dark { ' + merge(defaults.dark, cssVars.dark).join(' ') + ' }');
+                  }
+                  if (parts.length) {
+                    var el = document.getElementById('chat-css-variables');
+                    if (el) { el.textContent = parts.join(' '); }
+                  }
+                } catch(e) {}
+              }
+            })();
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: -1
         }]
       })
     }
diff --git a/docs/app/utils/index.ts b/docs/app/utils/index.ts
new file mode 100644
index 0000000000..177698b5c9
--- /dev/null
+++ b/docs/app/utils/index.ts
@@ -0,0 +1,5 @@
+import { splitByCase, upperFirst } from 'scule'
+
+export function upperName(name: string) {
+  return splitByCase(name).map(p => upperFirst(p)).join('')
+}
diff --git a/docs/app/utils/theme.ts b/docs/app/utils/theme.ts
index fcaf62fc9c..9be3ce5e84 100644
--- a/docs/app/utils/theme.ts
+++ b/docs/app/utils/theme.ts
@@ -93,3 +93,40 @@ export const themeIcons = {
 }
 
 export type ThemeIcons = keyof typeof themeIcons
+
+export const cssVariableDefaults = {
+  light: {
+    '--ui-text-dimmed': 'var(--ui-color-neutral-400)',
+    '--ui-text-muted': 'var(--ui-color-neutral-500)',
+    '--ui-text-toned': 'var(--ui-color-neutral-600)',
+    '--ui-text': 'var(--ui-color-neutral-700)',
+    '--ui-text-highlighted': 'var(--ui-color-neutral-900)',
+    '--ui-text-inverted': 'white',
+    '--ui-bg': 'white',
+    '--ui-bg-muted': 'var(--ui-color-neutral-50)',
+    '--ui-bg-elevated': 'var(--ui-color-neutral-100)',
+    '--ui-bg-accented': 'var(--ui-color-neutral-200)',
+    '--ui-bg-inverted': 'var(--ui-color-neutral-900)',
+    '--ui-border': 'var(--ui-color-neutral-200)',
+    '--ui-border-muted': 'var(--ui-color-neutral-200)',
+    '--ui-border-accented': 'var(--ui-color-neutral-300)',
+    '--ui-border-inverted': 'var(--ui-color-neutral-900)'
+  },
+  dark: {
+    '--ui-text-dimmed': 'var(--ui-color-neutral-500)',
+    '--ui-text-muted': 'var(--ui-color-neutral-400)',
+    '--ui-text-toned': 'var(--ui-color-neutral-300)',
+    '--ui-text': 'var(--ui-color-neutral-200)',
+    '--ui-text-highlighted': 'white',
+    '--ui-text-inverted': 'var(--ui-color-neutral-900)',
+    '--ui-bg': 'var(--ui-color-neutral-900)',
+    '--ui-bg-muted': 'var(--ui-color-neutral-800)',
+    '--ui-bg-elevated': 'var(--ui-color-neutral-800)',
+    '--ui-bg-accented': 'var(--ui-color-neutral-700)',
+    '--ui-bg-inverted': 'white',
+    '--ui-border': 'var(--ui-color-neutral-800)',
+    '--ui-border-muted': 'var(--ui-color-neutral-700)',
+    '--ui-border-accented': 'var(--ui-color-neutral-700)',
+    '--ui-border-inverted': 'white'
+  }
+} as const
diff --git a/docs/content/blog/how-to-build-an-ai-chat.md b/docs/content/blog/how-to-build-an-ai-chat.md
index b8f7e4f0c5..8bd449079f 100644
--- a/docs/content/blog/how-to-build-an-ai-chat.md
+++ b/docs/content/blog/how-to-build-an-ai-chat.md
@@ -249,7 +249,7 @@ export default defineEventHandler(async (event) => {
   }).parse)
 
   const { model, messages } = await readValidatedBody(event, z.object({
-    model: z.string().default('openai/gpt-4o-mini'),
+    model: z.string().default('anthropic/claude-haiku-4.5'),
     messages: z.array(z.custom<UIMessage>())
   }).parse)
 
@@ -265,7 +265,7 @@ export default defineEventHandler(async (event) => {
   // Generate a title for the chat if it doesn't have one
   if (!chat.title) {
     const { text: title } = await generateText({
-      model: 'openai/gpt-4o-mini',
+      model: 'anthropic/claude-haiku-4.5',
       system: `Generate a short title (max 30 characters) based on the user's message. No quotes or punctuation.`,
       prompt: JSON.stringify(messages[0])
     })
@@ -824,13 +824,12 @@ Define the available models and persist the user's selection using [`useCookie`]
 ```ts [app/composables/useModels.ts]
 export function useModels() {
   const models = [
-    { value: 'openai/gpt-4o-mini', label: 'GPT-4o Mini', icon: 'i-simple-icons-openai' },
-    { value: 'anthropic/claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku', icon: 'i-simple-icons-anthropic' },
+    { value: 'anthropic/claude-haiku-4.5', label: 'Claude 4.5 Haiku', icon: 'i-simple-icons-anthropic' },
     { value: 'google/gemini-2.0-flash', label: 'Gemini 2.0 Flash', icon: 'i-simple-icons-google' }
   ]
 
   const model = useCookie<string>('ai-model', {
-    default: () => 'openai/gpt-4o-mini'
+    default: () => 'anthropic/claude-haiku-4.5'
   })
 
   return {
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/chat-messages.md b/docs/content/docs/2.components/chat-messages.md
index 539f2bf267..dc56ba40c3 100644
--- a/docs/content/docs/2.components/chat-messages.md
+++ b/docs/content/docs/2.components/chat-messages.md
@@ -421,7 +421,7 @@ export default defineEventHandler(async (event) => {
   const { messages } = await readBody(event)
 
   return streamText({
-    model: gateway('openai/gpt-4o-mini'),
+    model: gateway('anthropic/claude-haiku-4.5'),
     maxOutputTokens: 10000,
     system: 'You are a helpful assistant.',
     messages: await convertToModelMessages(messages)
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/editor.md b/docs/content/docs/2.components/editor.md
index 096b731c51..a71e5ecf81 100644
--- a/docs/content/docs/2.components/editor.md
+++ b/docs/content/docs/2.components/editor.md
@@ -586,7 +586,7 @@ CRITICAL RULES:
   }
 
   return streamText({
-    model: gateway('openai/gpt-4o-mini'),
+    model: gateway('anthropic/claude-haiku-4.5'),
     system,
     prompt,
     maxOutputTokens
diff --git a/docs/content/docs/2.components/sidebar.md b/docs/content/docs/2.components/sidebar.md
new file mode 100644
index 0000000000..9a6765264d
--- /dev/null
+++ b/docs/content/docs/2.components/sidebar.md
@@ -0,0 +1,413 @@
+---
+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 a [Modal](/docs/components/modal), [Slideover](/docs/components/slideover) or [Drawer](/docs/components/drawer) component.
+
+::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 `header`, `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 menu.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'sidebar-example'
+overflowHidden: true
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the visual style of the sidebar. Defaults to `sidebar`.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'sidebar-props-example'
+overflowHidden: true
+options:
+  - name: 'variant'
+    label: 'variant'
+    items:
+      - sidebar
+      - floating
+      - inset
+    default: 'inset'
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+### Collapsible
+
+Use the `collapsible` prop to change the collapse behavior of the sidebar. Defaults to `offcanvas`.
+
+- `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
+prettier: true
+name: 'sidebar-props-example'
+overflowHidden: true
+options:
+  - name: 'collapsible'
+    label: 'collapsible'
+    items:
+      - offcanvas
+      - icon
+      - none
+    default: 'icon'
+  - name: 'variant'
+    label: 'variant'
+    items:
+      - sidebar
+      - floating
+      - inset
+    default: 'sidebar'
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+::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
+prettier: true
+name: 'sidebar-props-example'
+overflowHidden: true
+options:
+  - name: 'side'
+    label: 'side'
+    items:
+      - left
+      - right
+    default: 'right'
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+### Title
+
+Use the `title` prop to set the title of the sidebar header.
+
+::component-code
+---
+prettier: true
+hide:
+  - class
+  - ui
+ignore:
+  - ui.container
+props:
+  title: Navigation
+  ui:
+    container: h-full
+slots:
+  default: |
+
+    <Placeholder class="h-full" />
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+
+:placeholder{class="h-full"}
+::
+
+### Description
+
+Use the `description` prop to set the description of the sidebar header.
+
+::component-code
+---
+prettier: true
+hide:
+  - class
+  - ui
+ignore:
+  - title
+  - ui.container
+props:
+  title: Navigation
+  description: Browse your workspace
+  ui:
+    container: h-full
+slots:
+  default: |
+
+    <Placeholder class="h-full" />
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+
+:placeholder{class="h-full"}
+::
+
+### Rail
+
+Use the `rail` prop to display a thin interactive edge on the sidebar that toggles the collapsed state on click. The rail is only rendered when `collapsible` is not `none`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - ui.container
+hide:
+  - ui
+  - class
+props:
+  rail: true
+  collapsible: icon
+  title: Navigation
+  ui.container: h-full
+slots:
+  default: |
+
+    <Placeholder class="h-full" />
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+
+:placeholder{class="h-full"}
+::
+
+### 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-code
+---
+prettier: true
+ignore:
+  - title
+  - rail
+  - ui.container
+hide:
+  - ui
+  - class
+props:
+  close: true
+  rail: true
+  collapsible: icon
+  title: Navigation
+  ui:
+    container: h-full
+items:
+  close:
+    - true
+    - false
+slots:
+  default: |
+
+    <Placeholder class="h-full" />
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+
+:placeholder{class="h-full"}
+::
+
+### Close Icon
+
+Use the `close-icon` prop to customize the close button [Icon](/docs/components/icon). Defaults to `i-lucide-x`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - rail
+  - side
+  - close
+  - ui.container
+hide:
+  - ui
+  - class
+props:
+  close: true
+  closeIcon: i-lucide-panel-right-close
+  rail: true
+  collapsible: icon
+  side: right
+  title: Navigation
+  ui:
+    container: h-full
+items:
+  close:
+    - true
+    - false
+slots:
+  default: |
+
+    <Placeholder class="h-full" />
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+
+:placeholder{class="h-full"}
+::
+
+::framework-only
+#nuxt
+:::tip{to="/docs/getting-started/integrations/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+:::
+
+#vue
+:::tip{to="/docs/getting-started/integrations/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
+:::
+::
+
+### Mode
+
+Use the `mode` prop to change the mode of the sidebar menu on mobile. Defaults to `slideover`.
+
+::component-example
+---
+collapse: true
+iframe:
+  height: 500px;
+iframeMobile: true
+overflowHidden: true
+name: 'sidebar-mode-example'
+options:
+  - name: 'mode'
+    label: 'mode'
+    default: 'slideover'
+    items:
+      - modal
+      - slideover
+      - drawer
+props:
+  class: 'w-full'
+---
+::
+
+::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
+---
+collapse: true
+prettier: true
+name: 'sidebar-open-example'
+overflowHidden: true
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+::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
+---
+collapse: true
+prettier: true
+name: 'sidebar-persist-example'
+overflowHidden: true
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+::note
+The only difference with the previous example is replacing `ref(true)` with `useLocalStorage('sidebar-open', true)`.
+::
+
+### With custom width
+
+The sidebar width is controlled by the `--sidebar-width` CSS variable (defaults to `16rem`). 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.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'sidebar-width-example'
+overflowHidden: true
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+### With header
+
+To position the sidebar below a [Header](/docs/components/header), customize the `gap` and `container` using the `ui` prop.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'sidebar-header-example'
+overflowHidden: true
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+::note
+The `--ui-header-height` variable defaults to `4rem` and is used by the Header. Adjust it if your navbar uses a different height.
+::
+
+### With AI chat
+
+Use the sidebar on the right side with [ChatMessages](/docs/components/chat-messages) and [ChatPrompt](/docs/components/chat-prompt) to create an AI chat panel.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'sidebar-chat-example'
+overflowHidden: true
+class: '!p-0 !justify-start h-[500px] contain-[paint]'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 62de0f0277..f0329427a5 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -252,18 +252,6 @@ export default defineNuxtConfig({
     }
   },
 
-  fonts: {
-    families: [
-      { name: 'Public Sans', provider: 'google', global: true },
-      { name: 'DM Sans', provider: 'google', global: true },
-      { name: 'Geist', provider: 'google', global: true },
-      { name: 'Inter', provider: 'google', global: true },
-      { name: 'Poppins', provider: 'google', global: true },
-      { name: 'Outfit', provider: 'google', global: true },
-      { name: 'Raleway', provider: 'google', global: true }
-    ]
-  },
-
   icon: {
     customCollections: [{
       prefix: 'custom',
diff --git a/docs/package.json b/docs/package.json
index ee2ba8b80a..763b26aea8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,6 +9,7 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.58",
     "@ai-sdk/gateway": "^3.0.66",
     "@ai-sdk/mcp": "^1.0.25",
     "@ai-sdk/vue": "^3.0.116",
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/docs/server/api/ai.post.ts b/docs/server/api/ai.post.ts
new file mode 100644
index 0000000000..58197e7d4b
--- /dev/null
+++ b/docs/server/api/ai.post.ts
@@ -0,0 +1,357 @@
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
+import { streamText, convertToModelMessages, stepCountIs, smoothStream, jsonSchema } from 'ai'
+import type { AnthropicLanguageModelOptions } from '@ai-sdk/anthropic'
+import { experimental_createMCPClient } from '@ai-sdk/mcp'
+import { gateway } from '@ai-sdk/gateway'
+import { themeIcons, cssVariableDefaults } from '../../app/utils/theme'
+
+const applyTheme = {
+  description: 'Apply theme settings live on the docs site. Call this when users ask to change colors, radius, font, or other theme properties. Only include properties that changed.',
+  inputSchema: jsonSchema<Record<string, any>>({
+    type: 'object' as const,
+    properties: {
+      primary: { type: 'string', description: 'Primary color name (e.g., green, blue, red, indigo)' },
+      neutral: { type: 'string', description: 'Neutral color name (slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive)' },
+      secondary: { type: 'string', description: 'Secondary color name' },
+      success: { type: 'string', description: 'Success color name' },
+      info: { type: 'string', description: 'Info color name' },
+      warning: { type: 'string', description: 'Warning color name' },
+      error: { type: 'string', description: 'Error color name' },
+      radius: { type: 'number', description: 'Border radius in rem: 0, 0.125, 0.25, 0.375, 0.5' },
+      font: { type: 'string', description: 'Font family name — any Google Font works (e.g. Public Sans, DM Sans, Geist, Inter, Poppins, Outfit, Raleway, Playfair Display, Nunito, JetBrains Mono, etc.)' },
+      blackAsPrimary: { type: 'boolean', description: 'Use solid black/white as primary color for a monochrome look' },
+      icons: { type: 'string', description: 'Icon set for live preview: lucide (default), phosphor, or tabler. For exported code, any Iconify icon set can be suggested.' },
+      customColors: {
+        type: 'object',
+        description: 'Custom color palettes with shades 50-950 as hex values',
+        additionalProperties: {
+          type: 'object',
+          additionalProperties: { type: 'string' }
+        }
+      },
+      cssVariables: {
+        type: 'object',
+        description: 'Fine-tuning CSS variable overrides (last resort). Use only for subtle shade adjustments that can\'t be achieved with color names or customColors. Always provide both light and dark.',
+        properties: {
+          light: {
+            type: 'object',
+            description: 'CSS variables for light mode (.light). Keys: --ui-text, --ui-bg, --ui-border, --ui-primary, etc. Values: var(--ui-color-<name>-<shade>), hex, white, black.',
+            additionalProperties: { type: 'string' }
+          },
+          dark: {
+            type: 'object',
+            description: 'CSS variables for dark mode (.dark). Same variable names as light.',
+            additionalProperties: { type: 'string' }
+          }
+        }
+      },
+      ui: {
+        type: 'object',
+        description: 'Component-level theme overrides. MUST include ALL component customizations here so they are applied live. Keys are camelCase component names (e.g. button, badge, popover). Values have slots, defaultVariants, variants, compoundVariants.',
+        additionalProperties: true
+      }
+    }
+  }),
+  execute: async (settings: Record<string, any>) => ({ applied: true, ...settings })
+}
+
+const resetTheme = {
+  description: 'Reset the theme back to defaults (primary: green, neutral: slate, radius: 0.25rem, font: Public Sans). Call this when users ask to reset, revert, or restore the default theme.',
+  inputSchema: jsonSchema<Record<string, never>>({
+    type: 'object' as const,
+    properties: {}
+  }),
+  execute: async () => ({ reset: true })
+}
+
+export default defineEventHandler(async (event) => {
+  const { messages, theme } = await readBody(event)
+
+  if (!messages || !Array.isArray(messages)) {
+    throw createError({ statusCode: 400, message: 'Invalid or missing messages array.' })
+  }
+
+  const componentNames = theme ? Object.keys(theme) : []
+
+  const getComponentTheme = {
+    description: 'Get the theme definition (slots, variants, compoundVariants, defaultVariants) for a specific Nuxt UI component. Call this when you need to know the available slots and customization options to suggest component-level theming in app.config.ts.',
+    inputSchema: jsonSchema<{ componentName: string }>({
+      type: 'object' as const,
+      properties: {
+        componentName: {
+          type: 'string',
+          description: `Component name in camelCase. Available: ${componentNames.join(', ')}`
+        }
+      },
+      required: ['componentName']
+    }),
+    execute: async ({ componentName }: { componentName: string }) => {
+      if (!theme?.[componentName]) {
+        return { error: `Component "${componentName}" not found`, availableComponents: componentNames }
+      }
+      return { componentName, theme: theme[componentName] }
+    }
+  }
+
+  let httpClient
+  let mcpTools
+  try {
+    const mcpUrl = import.meta.dev
+      ? new URL('/mcp', getRequestURL(event).origin)
+      : new URL('https://ui.nuxt.com/mcp')
+    const httpTransport = new StreamableHTTPClientTransport(mcpUrl)
+    httpClient = await experimental_createMCPClient({
+      transport: httpTransport
+    })
+    mcpTools = await httpClient.tools()
+  } catch (error) {
+    console.error('MCP client error:', error)
+
+    throw createError({
+      statusCode: 503,
+      message: 'Unable to connect to the documentation service. Please try again later.'
+    })
+  }
+
+  const system = `You are a helpful assistant for Nuxt UI, a UI library for Nuxt and Vue. Nuxt UI includes \`@nuxt/fonts\` and \`@nuxt/icon\` as built-in dependencies — never tell users to install them separately. Use your knowledge base tools to search for relevant information before answering questions.
+
+Guidelines:
+- For documentation questions, ALWAYS use tools to search for information. Never rely on pre-trained knowledge for Nuxt UI APIs, props, or usage.
+- For theme customization, use your own judgment on aesthetics, color theory, and design — no need to search docs for that. Be decisive: pick colors/fonts/radius confidently and apply them. Don't deliberate or second-guess — commit to a direction.
+- If a question is unrelated to Nuxt UI (e.g. general coding, off-topic), briefly answer if you can, but don't waste tool calls searching docs for it.
+- If no relevant information is found after searching, respond with "Sorry, I couldn't find information about that in the documentation."
+- Be concise and direct in your responses.
+
+**FORMATTING RULES (CRITICAL):**
+- ABSOLUTELY NO MARKDOWN HEADINGS: Never use #, ##, ###, ####, #####, or ######
+- NO underline-style headings with === or ---
+- Use **bold text** for emphasis and section labels instead
+- Examples:
+  * Instead of "## Usage", write "**Usage:**" or just "Here's how to use it:"
+  * Instead of "# Complete Guide", write "**Complete Guide**" or start directly with content
+- Start all responses with content, never with a heading
+
+- Reference specific component names, props, or APIs when applicable.
+- If a question is ambiguous, ask for clarification rather than guessing.
+- When multiple relevant items are found, list them clearly using bullet points.
+- You have up to 8 tool calls to find the answer, so be strategic: start broad, then get specific if needed.
+- Format responses in a conversational way, not as documentation sections.
+
+**LIVE THEME CUSTOMIZATION:**
+
+When users ask to change the theme, customize colors, or modify the appearance, use the \`applyTheme\` tool to apply changes live on this docs site. Only include properties that changed.
+
+When users ask for a complete theme, to change "all colors", or describe a broad aesthetic (e.g. "sakura-inspired theme"), you MUST set ALL of: primary, neutral, secondary, success, info, warning, error, radius, and font. You can change the icon set (lucide, phosphor, or tabler) if it really enhances the theme, but prefer keeping lucide as the default — it works well with most themes. You can optionally include component-level \`ui\` overrides for a more polished result — if you do, look up the component theme first with \`getComponentTheme\` and prefer \`defaultVariants\` (e.g. button size or variant) over slot class overrides. Create a cohesive design system, not just random colors:
+- Pick a **primary** that embodies the theme's identity. If no standard Tailwind color fits, use \`customColors\` to define a bespoke palette with all shades 50-950 as hex values — this is encouraged for creative/unique themes.
+- Pick a **secondary** that complements the primary (analogous or contrasting on the color wheel). Can also be a custom palette.
+- Pick **success/info/warning/error** that feel harmonious with the palette while staying semantically meaningful (success = green-ish, error = red-ish, warning = amber/yellow-ish, info = blue/cyan-ish). You can shift hues — e.g. \`lime\` for success in a nature theme, \`rose\` for error in a warm theme — but keep them recognizable.
+- For monochrome/black-and-white themes, keep semantic colors meaningful. Only primary, secondary, and neutral should go monochrome. Use \`blackAsPrimary: true\` for monochrome primary.
+
+When users ask to reset, revert, or restore the default theme, use the \`resetTheme\` tool. This resets primary to green, neutral to slate, radius to 0.25rem, font to Public Sans, and removes any custom colors.
+
+There are two types of customization:
+
+**1. CSS Variables (main.css)**
+
+The main.css file uses Tailwind CSS directives to configure design tokens:
+
+*Fonts* — use the \`@theme\` directive. Any Google Font works, \`@nuxt/fonts\` will automatically load and optimize it:
+\`\`\`css
+@theme {
+  --font-sans: 'Inter', sans-serif;
+}
+\`\`\`
+
+*Custom Colors* — define palettes with ALL shades (50-950) using \`@theme static\`:
+\`\`\`css
+@theme static {
+  --color-brand-50: #fef2f2;
+  --color-brand-100: #fee2e2;
+  /* ... all shades 200-900 ... */
+  --color-brand-950: #450a0a;
+}
+\`\`\`
+
+*Radius:*
+\`\`\`css
+:root { --ui-radius: 0.375rem; }
+\`\`\`
+
+*Monochrome primary:*
+\`\`\`css
+:root { --ui-primary: black; }
+.dark { --ui-primary: white; }
+\`\`\`
+
+*True black & white theme* — for a monochrome theme, also set \`--ui-bg\` to pure black/white:
+\`\`\`css
+.dark { --ui-bg: black; }
+\`\`\`
+
+*Semantic shade overrides* — override which shade a semantic color uses:
+\`\`\`css
+:root, .light { --ui-primary: var(--ui-color-primary-700); }
+.dark { --ui-primary: var(--ui-color-primary-200); }
+\`\`\`
+
+**CSS Variable fine-tuning (last resort)** — use the \`cssVariables\` property in \`applyTheme\` ONLY for subtle one-shade adjustments. Example: shifting \`--ui-bg\` from neutral-900 to neutral-950 in dark mode, or \`--ui-border\` from neutral-200 to neutral-300 in light mode.
+
+CRITICAL RULES for \`cssVariables\`:
+- ONLY shift by 1-2 shade levels from the default (e.g. neutral-900 → neutral-950). NEVER replace the neutral palette with a completely different color (e.g. setting \`--ui-bg\` to a custom color like cream). If you want warm/cool backgrounds, choose the right \`neutral\` color instead (see color options below). Exception: for monochrome/black-and-white themes, you MAY use \`black\` or \`white\` as values (e.g. \`--ui-bg: black\` in dark mode).
+- ALWAYS provide BOTH \`light\` and \`dark\` objects, but only include variables you are CHANGING from their defaults. Do NOT include variables that keep their default value.
+- Values MUST use \`var(--ui-color-<name>-<shade>)\` references (e.g. \`var(--ui-color-neutral-950)\`), \`white\`, or \`black\`. NEVER use raw hex values.
+- The \`<name>\` in the variable reference MUST match the current neutral color (which the user may have changed). Use \`neutral\` as the name since it maps to whatever neutral palette is active.
+- In the exported main.css code, ONLY show overridden CSS variables (not defaults). Use \`:root, .light { }\` for light-mode overrides and \`.dark { }\` for dark-mode overrides. NEVER put CSS variable overrides in a plain \`:root { }\` block (that's only for \`--ui-radius\` and monochrome \`--ui-primary\`).
+
+Default values — only override the ones you want to change:
+
+Light defaults (\`:root, .light\`):
+${Object.entries(cssVariableDefaults.light).map(([k, v]) => `- \`${k}\`: \`${v}\``).join('\n')}
+
+Dark defaults (\`.dark\`):
+${Object.entries(cssVariableDefaults.dark).map(([k, v]) => `- \`${k}\`: \`${v}\``).join('\n')}
+
+Semantic colors (\`--ui-primary\`, \`--ui-secondary\`, \`--ui-success\`, \`--ui-info\`, \`--ui-warning\`, \`--ui-error\`) default to shade 500 in light, 400 in dark.
+
+Do NOT use \`cssVariables\` for things achievable with \`primary\`, \`neutral\`, \`customColors\`, or component \`ui\` overrides.
+
+**2. App Config (app.config.ts)**
+
+For semantic color assignment and component-level theming:
+\`\`\`typescript
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'blue',
+      neutral: 'zinc'
+    },
+    button: {
+      slots: { base: 'font-bold' },
+      defaultVariants: { size: 'lg' }
+    }
+  }
+})
+\`\`\`
+
+**Color options:**
+- Standard Tailwind: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+- Neutral palettes (pick one that matches the aesthetic):
+  - **slate** — cool blue-gray, professional, default
+  - **gray** — true neutral, clean, no color tint
+  - **zinc** — slightly cool, modern, techy
+  - **neutral** — perfectly balanced, no warmth or coolness
+  - **stone** — warm gray, earthy, organic feel
+  - **taupe** — warm brown-gray, sophisticated, vintage
+  - **mauve** — purple-tinted gray, elegant, creative
+  - **mist** — soft blue-gray, airy, light
+  - **olive** — green-tinted gray, natural, earthy
+  For example: warm/cozy themes → stone or taupe, elegant/creative → mauve, tech/minimal → zinc, nature → olive, etc. ALWAYS change the neutral when creating a complete theme — don't leave it as the default slate unless it genuinely fits.
+- Custom: define all shades 50-950 in \`customColors\` of the \`applyTheme\` tool, then reference the name
+
+**Other options:**
+- Radius (pick one that matches the aesthetic):
+  - **0** — sharp, brutalist, no rounding
+  - **0.125** — subtle, minimal softness
+  - **0.25** — balanced, default
+  - **0.375** — rounded, friendly
+  - **0.5** — pill-like, playful, soft
+- Font: any Google Font works, \`@nuxt/fonts\` auto-loads it. Pick a font that matches the theme's personality:
+  - Sans-serif (clean/modern): Inter, DM Sans, Geist, Public Sans, Outfit, Plus Jakarta Sans, Space Grotesk
+  - Serif (elegant/editorial): Playfair Display, Lora, Merriweather, Fraunces, Newsreader
+  - Rounded (friendly/playful): Nunito, Quicksand, Varela Round
+  - Monospace (techy/dev): JetBrains Mono, Fira Code, IBM Plex Mono
+  ALWAYS change the font when creating a complete theme — don't leave the default unless it genuinely fits.
+- Icons: lucide (default), phosphor, or tabler for live preview. Any Iconify icon set works in the exported app.config.ts. When suggesting a non-default icon set, include the FULL \`ui.icons\` mapping in the exported app.config.ts and tell the user to install \`@iconify-json/{collection}\` (e.g. \`@iconify-json/ph\` for Phosphor). Required keys: ${Object.keys(themeIcons.phosphor).join(', ')}. Values use \`i-<set>-<name>\` format.
+
+**Component Theme Lookup:**
+
+When users ask about component-specific customization, use the \`getComponentTheme\` tool to get the exact slots, variants, and defaults for that component. This lets you suggest precise app.config.ts overrides.
+
+When you want to suggest component \`ui\` overrides (e.g. customizing button styles), call \`getComponentTheme\` for that component first — never guess slot names. Only look up component themes when you actually plan to include \`ui\` overrides in the \`applyTheme\` call.
+
+Prefer \`defaultVariants\` as your first tool for component customization — changing a component's default size, variant, or color is impactful and low-risk. Only include values that actually differ from the component's defaults (use \`getComponentTheme\` to check) — never include unchanged defaults like \`size: 'md'\` if that's already the default. Only add slot class overrides when \`defaultVariants\` alone can't achieve the desired effect. When creating a complete theme, if you want to customize one component to give it personality, prioritize **button** — e.g. \`button: { defaultVariants: { variant: 'subtle' } }\`. Button is the most visible and impactful component to customize.
+
+CRITICAL rules for component \`ui\` overrides:
+- NEVER use \`rounded-*\` classes in component slot overrides. Border radius is controlled globally by \`--ui-radius\` — hardcoding rounded classes would override the CSS variable and break consistency.
+- Only ADD new classes that aren't already in the component's default theme. Do NOT repeat or duplicate default classes (e.g. \`inline-flex\`, \`items-center\`, \`disabled:cursor-not-allowed\`, \`transition-colors\` on button are already defaults). Use \`getComponentTheme\` to check what's already there.
+- Keep overrides minimal and intentional — only include classes that actually change the look from the default.
+- Tailwind v4 only generates classes that are already used in source files. Arbitrary Tailwind utility classes (e.g. \`tracking-wide\`, \`shadow-2xl\`) may NOT exist in the user's CSS output. Prefer overrides that use classes already present in the component's default theme (e.g. changing \`font-medium\` to \`font-semibold\`) or CSS variables. For the exported code, mention that users may need to safelist any new utility classes.
+
+Available components: ${componentNames.join(', ')}
+
+**When suggesting theme changes, you MUST:**
+1. Call the \`applyTheme\` tool with the settings so changes apply live
+2. Show the full **main.css** code block so users can copy it. Use this structure:
+
+\`\`\`css
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-sans: 'FontName', sans-serif; /* only if font changed */
+}
+
+@theme static {
+  /* custom color palettes here */
+}
+
+:root {
+  --ui-radius: 0.375rem; /* only radius and monochrome --ui-primary go here */
+}
+
+:root, .light {
+  /* light-mode CSS variable overrides here (if any) */
+}
+
+.dark {
+  /* dark-mode CSS variable overrides AND monochrome --ui-primary: white here */
+}
+\`\`\`
+
+3. Show the full **app.config.ts** code block if colors, icons, or component overrides changed. IMPORTANT: this must include ALL settings from the entire conversation — not just the current \`applyTheme\` call but also all previous calls (colors, icons with full \`ui.icons\` mapping, component \`ui\` overrides like button, popover, etc.). If a non-default icon set was chosen, the exported config MUST include the complete \`ui.icons\` object with every key mapped. Review earlier \`applyTheme\` calls in the conversation and merge everything into one complete config:
+
+\`\`\`typescript
+export default defineAppConfig({
+  ui: {
+    // ... ALL accumulated config from this conversation
+  }
+})
+\`\`\`
+
+NEVER recommend \`appConfig.theme.*\` properties (like \`blackAsPrimary\`, \`radius\`, \`font\`) — those are internal to the docs site. Users should use CSS variables in main.css for radius, fonts, and monochrome primary.
+    `
+
+  return streamText({
+    model: gateway('anthropic/claude-sonnet-4.6'),
+    maxOutputTokens: 16000,
+    providerOptions: {
+      anthropic: {
+        thinking: {
+          type: 'adaptive'
+        },
+        effort: 'low'
+      } satisfies AnthropicLanguageModelOptions,
+      gateway: {
+        caching: 'auto'
+      }
+    },
+    system,
+    messages: await convertToModelMessages(messages),
+    experimental_transform: smoothStream(),
+    stopWhen: stepCountIs(8),
+    tools: {
+      ...mcpTools,
+      applyTheme,
+      resetTheme,
+      getComponentTheme
+    },
+    onFinish: () => {
+      event.waitUntil(httpClient?.close())
+    },
+    onError: (error) => {
+      console.error('streamText error:', error)
+
+      event.waitUntil(httpClient?.close())
+    }
+  }).toUIMessageStreamResponse()
+})
diff --git a/docs/server/api/chat.post.ts b/docs/server/api/chat.post.ts
index e7a2409b5d..302061a67a 100644
--- a/docs/server/api/chat.post.ts
+++ b/docs/server/api/chat.post.ts
@@ -5,8 +5,7 @@ export default defineEventHandler(async (event) => {
   const { messages } = await readBody(event)
 
   return streamText({
-    model: gateway('openai/gpt-4o-mini'),
-    maxOutputTokens: 10000,
+    model: gateway('anthropic/claude-haiku-4.5'),
     system: 'You are a helpful assistant for Nuxt UI, a UI library for Nuxt and Vue.',
     messages: await convertToModelMessages(messages)
   }).toUIMessageStreamResponse()
diff --git a/docs/server/api/completion.post.ts b/docs/server/api/completion.post.ts
index 163c43333e..7369e67e3c 100644
--- a/docs/server/api/completion.post.ts
+++ b/docs/server/api/completion.post.ts
@@ -51,7 +51,7 @@ CRITICAL RULES:
   }
 
   return streamText({
-    model: gateway('openai/gpt-4o-mini'),
+    model: gateway('anthropic/claude-haiku-4.5'),
     system,
     prompt,
     maxOutputTokens
diff --git a/docs/server/api/search.post.ts b/docs/server/api/search.post.ts
deleted file mode 100644
index 1b69800502..0000000000
--- a/docs/server/api/search.post.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
-import { streamText, convertToModelMessages, stepCountIs } from 'ai'
-import { experimental_createMCPClient } from '@ai-sdk/mcp'
-import { gateway } from '@ai-sdk/gateway'
-
-export default defineEventHandler(async (event) => {
-  const { messages } = await readBody(event)
-
-  const mcpUrl = import.meta.dev
-    ? new URL('/mcp', getRequestURL(event).origin)
-    : new URL('https://ui.nuxt.com/mcp')
-  const httpTransport = new StreamableHTTPClientTransport(mcpUrl)
-  const httpClient = await experimental_createMCPClient({
-    transport: httpTransport
-  })
-  const tools = await httpClient.tools()
-
-  return streamText({
-    model: gateway('anthropic/claude-sonnet-4.5'),
-    maxOutputTokens: 10000,
-    system: `You are a helpful assistant for Nuxt UI, a UI library for Nuxt and Vue. Use your knowledge base tools to search for relevant information before answering questions.
-
-Guidelines:
-- ALWAYS use tools to search for information. Never rely on pre-trained knowledge.
-- If no relevant information is found after searching, respond with "Sorry, I couldn't find information about that in the documentation."
-- Be concise and direct in your responses.
-
-**FORMATTING RULES (CRITICAL):**
-- ABSOLUTELY NO MARKDOWN HEADINGS: Never use #, ##, ###, ####, #####, or ######
-- NO underline-style headings with === or ---
-- Use **bold text** for emphasis and section labels instead
-- Examples:
-  * Instead of "## Usage", write "**Usage:**" or just "Here's how to use it:"
-  * Instead of "# Complete Guide", write "**Complete Guide**" or start directly with content
-- Start all responses with content, never with a heading
-
-- Reference specific component names, props, or APIs when applicable.
-- If a question is ambiguous, ask for clarification rather than guessing.
-- When multiple relevant items are found, list them clearly using bullet points.
-- You have up to 6 tool calls to find the answer, so be strategic: start broad, then get specific if needed.
-- Format responses in a conversational way, not as documentation sections.
-    `,
-    messages: await convertToModelMessages(messages),
-    stopWhen: stepCountIs(6),
-    tools,
-    onFinish: async () => {
-      await httpClient.close()
-    },
-    onError: async (error) => {
-      console.error(error)
-
-      await httpClient.close()
-    }
-  }).toUIMessageStreamResponse()
-})
diff --git a/playgrounds/nuxt/app/app.vue b/playgrounds/nuxt/app/app.vue
index 0d1a7a6da4..1af3a66533 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: [
             route.path.startsWith('/components') && 'mt-16',
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/chat.vue b/playgrounds/nuxt/app/pages/chat.vue
index c11a40c107..776bae5d06 100644
--- a/playgrounds/nuxt/app/pages/chat.vue
+++ b/playgrounds/nuxt/app/pages/chat.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
+import { isReasoningUIPart, isTextUIPart, isToolUIPart, getToolName } from 'ai'
 import type { UIMessage } from 'ai'
 import { Chat } from '@ai-sdk/vue'
+import ChatReasoning from '../../../../docs/app/components/chat/ChatReasoning.vue'
+import ChatTool from '../../../../docs/app/components/chat/ChatTool.vue'
 
 const toast = useToast()
 
-const messages: UIMessage[] = [{
-  id: '1',
-  role: 'user',
-  parts: [{ type: 'text', text: 'Hello, how are you?' }]
-}, {
-  id: '2',
-  role: 'assistant',
-  parts: [{ type: 'text', text: 'I\'m good, thank you! How can I help you today?' }]
-}]
+const messages: UIMessage[] = []
 const input = ref('')
 
 const chat = new Chat({
   messages,
   onError(error) {
-    const { message: description } = typeof error.message === 'string' && error.message[0] === '{' ? JSON.parse(error.message) : error
+    let message = error.message
+    try {
+      if (typeof message === 'string' && message[0] === '{') {
+        message = JSON.parse(message).message || message
+      }
+    } catch { /* keep original */ }
 
     toast.add({
-      description,
+      description: message,
       icon: 'i-lucide-alert-circle',
       color: 'error',
       duration: 0
@@ -30,10 +30,34 @@ const chat = new Chat({
 })
 
 function onSubmit() {
+  if (!input.value.trim()) return
+
   chat.sendMessage({ text: input.value })
 
   input.value = ''
 }
+
+function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '')
+  } catch {
+    return url
+  }
+}
+
+function getFaviconUrl(url: string): string {
+  return `https://www.google.com/s2/favicons?sz=32&domain=${getDomain(url)}`
+}
+
+function isStreamingReasoning(message: UIMessage, index: number): boolean {
+  if (chat.status !== 'streaming') return false
+  if (message.id !== chat.messages.at(-1)?.id) return false
+
+  for (let i = index + 1; i < message.parts.length; i++) {
+    if (message.parts[i]!.type !== 'reasoning') return false
+  }
+  return true
+}
 </script>
 
 <template>
@@ -43,29 +67,59 @@ function onSubmit() {
     <UChatMessages
       :messages="chat.messages"
       :status="chat.status"
-      :user="{ avatar: { src: 'https://github.com/benjamincanac.png' } }"
       :spacing-offset="48"
+      :assistant="{ ui: { content: 'flex flex-col gap-2.5' } }"
     >
       <template #content="{ message }">
-        <template
-          v-for="(part, index) in message.parts"
-          :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
-        >
+        <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
+          <ChatReasoning
+            v-if="isReasoningUIPart(part)"
+            :text="part.text"
+            :streaming="isStreamingReasoning(message, index)"
+            chevron="leading"
+          >
+            <template #default="{ reasoningText }">
+              <MDC
+                :value="reasoningText"
+                :cache-key="`${message.id}-${index}`"
+                class="*:first:mt-0 *:last:mb-0"
+              />
+            </template>
+          </ChatReasoning>
           <MDC
-            v-if="part.type === 'text' && message.role === 'assistant'"
+            v-else-if="isTextUIPart(part)"
             :value="part.text"
             :cache-key="`${message.id}-${index}`"
             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 === 'reasoning'"
-            class="text-sm text-muted my-5"
+          <ChatTool
+            v-else-if="isToolUIPart(part) && getToolName(part) === 'web_search'"
+            :text="part.state !== 'output-available' ? 'Searching the web...' : 'Searched the web'"
+            :suffix="(part.input as { query?: string })?.query"
+            :streaming="part.state !== 'output-available'"
+            chevron="leading"
           >
-            {{ part.state === 'done' ? 'Thoughts' : 'Thinking...' }}
-          </p>
+            <div v-if="part.output && (part.output as any[]).length" class="p-1 border border-default rounded-md max-h-40 overflow-y-auto">
+              <a
+                v-for="source in (part.output as any[])"
+                :key="source.url"
+                :href="source.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="flex items-center gap-2 px-2 py-1 text-sm text-muted hover:text-default hover:bg-elevated/50 transition-colors min-w-0 rounded-md"
+              >
+                <img
+                  :src="getFaviconUrl(source.url)"
+                  :alt="getDomain(source.url)"
+                  class="size-4 shrink-0 rounded-sm"
+                  loading="lazy"
+                  @error="($event.target as HTMLImageElement).style.display = 'none'"
+                >
+                <span class="truncate">{{ source.title || source.url }}</span>
+                <span class="text-xs text-dimmed ms-auto shrink-0">{{ getDomain(source.url) }}</span>
+              </a>
+            </div>
+          </ChatTool>
         </template>
       </template>
     </UChatMessages>
diff --git a/playgrounds/nuxt/app/pages/components/sidebar.vue b/playgrounds/nuxt/app/pages/components/sidebar.vue
new file mode 100644
index 0000000000..f0cc2810d9
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/sidebar.vue
@@ -0,0 +1,119 @@
+<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 keyof typeof theme.variants.variant)
+
+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(error) {
+    console.error(error)
+  }
+})
+
+function onSubmit() {
+  if (!input.value.trim()) return
+
+  chat.sendMessage({ text: input.value })
+
+  input.value = ''
+}
+</script>
+
+<template>
+  <div class="flex flex-1" :class="[variant === 'inset' && 'bg-neutral-50 dark:bg-neutral-950']">
+    <USidebar
+      v-model:open="openLeft"
+      side="left"
+      :variant="variant"
+      collapsible="icon"
+      close
+      rail
+      :ui="{ container: 'relative', body: 'py-2' }"
+    >
+      <template #title="{ state }">
+        <Logo class="h-5 w-auto" :collapsed="state === 'collapsed'" />
+      </template>
+
+      <UNavigationMenu
+        :items="[{ label: 'Home', icon: 'i-lucide-home', to: '/', badge: 4 }, { label: 'Chat', icon: 'i-lucide-message-circle', to: '/chat' }]"
+        orientation="vertical"
+        :ui="{ link: 'p-1.5 overflow-hidden' }"
+      />
+    </USidebar>
+
+    <div class="flex-1 flex flex-col overflow-hidden lg:peer-data-[variant=floating]:my-4 peer-data-[variant=inset]:m-4 lg:peer-data-[variant=inset]:mx-0 peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:shadow peer-data-[variant=inset]:ring peer-data-[variant=inset]:ring-default bg-default">
+      <Navbar class="relative w-full">
+        <USelect v-model="variant" :items="variants" />
+
+        <UButton
+          icon="i-lucide-panel-left"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          aria-label="Toggle left sidebar"
+          @click="openLeft = !openLeft"
+        />
+        <UButton
+          icon="i-lucide-panel-right"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          aria-label="Toggle right sidebar"
+          @click="openRight = !openRight"
+        />
+      </Navbar>
+
+      <div class="flex-1 p-4 sm:px-6">
+        <USkeleton class="size-full animate-pulse" />
+      </div>
+    </div>
+
+    <USidebar
+      v-model:open="openRight"
+      side="right"
+      :variant="variant"
+      title="AI Chat"
+      close
+      rail
+      :style="{ '--sidebar-width': '20rem' }"
+    >
+      <UChatMessages
+        :messages="chat.messages"
+        :status="chat.status"
+        compact
+        class="px-0"
+      />
+
+      <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/playgrounds/nuxt/nuxt.config.ts b/playgrounds/nuxt/nuxt.config.ts
index 5f22442d94..4ca5e76afb 100644
--- a/playgrounds/nuxt/nuxt.config.ts
+++ b/playgrounds/nuxt/nuxt.config.ts
@@ -1,6 +1,7 @@
 export default defineNuxtConfig({
   modules: [
-    '@nuxt/ui'
+    '@nuxt/ui',
+    '@nuxtjs/mdc'
   ],
 
   devtools: {
diff --git a/playgrounds/nuxt/package.json b/playgrounds/nuxt/package.json
index 39872a939e..49cf720216 100644
--- a/playgrounds/nuxt/package.json
+++ b/playgrounds/nuxt/package.json
@@ -9,6 +9,7 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.58",
     "@ai-sdk/gateway": "^3.0.66",
     "@ai-sdk/vue": "^3.0.116",
     "@iconify-json/lucide": "^1.2.96",
diff --git a/playgrounds/nuxt/server/api/chat.post.ts b/playgrounds/nuxt/server/api/chat.post.ts
index e7a2409b5d..495b180944 100644
--- a/playgrounds/nuxt/server/api/chat.post.ts
+++ b/playgrounds/nuxt/server/api/chat.post.ts
@@ -1,13 +1,32 @@
 import { streamText, convertToModelMessages } from 'ai'
+import { anthropic } from '@ai-sdk/anthropic'
+import type { AnthropicLanguageModelOptions } from '@ai-sdk/anthropic'
 import { gateway } from '@ai-sdk/gateway'
 
+const webSearchTool = anthropic.tools.webSearch_20250305({
+  maxUses: 5
+})
+
 export default defineEventHandler(async (event) => {
   const { messages } = await readBody(event)
 
   return streamText({
-    model: gateway('openai/gpt-4o-mini'),
-    maxOutputTokens: 10000,
-    system: 'You are a helpful assistant for Nuxt UI, a UI library for Nuxt and Vue.',
-    messages: await convertToModelMessages(messages)
-  }).toUIMessageStreamResponse()
+    model: gateway('anthropic/claude-sonnet-4.6'),
+    system: 'You are a helpful assistant. When answering questions, search the web for up-to-date information when relevant.',
+    messages: await convertToModelMessages(messages),
+    tools: {
+      web_search: webSearchTool as any
+    },
+    providerOptions: {
+      anthropic: {
+        thinking: {
+          type: 'adaptive'
+        },
+        effort: 'low'
+      } satisfies AnthropicLanguageModelOptions
+    }
+  }).toUIMessageStreamResponse({
+    sendReasoning: true,
+    sendSources: true
+  })
 })
diff --git a/playgrounds/nuxt/server/api/completion.post.ts b/playgrounds/nuxt/server/api/completion.post.ts
index 163c43333e..7369e67e3c 100644
--- a/playgrounds/nuxt/server/api/completion.post.ts
+++ b/playgrounds/nuxt/server/api/completion.post.ts
@@ -51,7 +51,7 @@ CRITICAL RULES:
   }
 
   return streamText({
-    model: gateway('openai/gpt-4o-mini'),
+    model: gateway('anthropic/claude-haiku-4.5'),
     system,
     prompt,
     maxOutputTokens
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f39a59f90a..26d57dfe92 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -313,6 +313,9 @@ importers:
 
   docs:
     dependencies:
+      '@ai-sdk/anthropic':
+        specifier: ^3.0.58
+        version: 3.0.58(zod@4.3.6)
       '@ai-sdk/gateway':
         specifier: ^3.0.66
         version: 3.0.66(zod@4.3.6)
@@ -330,7 +333,7 @@ importers:
         version: 1.2.96
       '@iconify-json/simple-icons':
         specifier: ^1.2.72
-        version: 1.2.72
+        version: 1.2.73
       '@iconify-json/vscode-icons':
         specifier: ^1.2.44
         version: 1.2.44
@@ -470,6 +473,9 @@ importers:
 
   playgrounds/nuxt:
     dependencies:
+      '@ai-sdk/anthropic':
+        specifier: ^3.0.58
+        version: 3.0.58(zod@4.3.6)
       '@ai-sdk/gateway':
         specifier: ^3.0.66
         version: 3.0.66(zod@4.3.6)
@@ -481,7 +487,7 @@ importers:
         version: 1.2.96
       '@iconify-json/simple-icons':
         specifier: ^1.2.72
-        version: 1.2.72
+        version: 1.2.73
       '@internationalized/date':
         specifier: ^3.12.0
         version: 3.12.0
@@ -556,6 +562,12 @@ importers:
 
 packages:
 
+  '@ai-sdk/anthropic@3.0.58':
+    resolution: {integrity: sha512-/53SACgmVukO4bkms4dpxpRlYhW8Ct6QZRe6sj1Pi5H00hYhxIrqfiLbZBGxkdRvjsBQeP/4TVGsXgH5rQeb8Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/gateway@3.0.66':
     resolution: {integrity: sha512-SIQ0YY0iMuv+07HLsZ+bB990zUJ6S4ujORAh+Jv1V2KGNn73qQKnGO0JBk+w+Res8YqOFSycwDoWcFlQrVxS4A==}
     engines: {node: '>=18'}
@@ -1121,6 +1133,10 @@ packages:
     resolution: {integrity: sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@eslint/core@1.1.0':
+    resolution: {integrity: sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/core@1.1.1':
     resolution: {integrity: sha512-QUPblTtE51/7/Zhfv8BDwO0qkkzQL7P/aWWbqcf4xWLEYn1oKjdO0gglQBB4GAsu7u6wjijbCmzsUTy6mnk6oQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -1146,6 +1162,9 @@ packages:
   '@floating-ui/dom@1.7.6':
     resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
 
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
@@ -1217,8 +1236,8 @@ packages:
   '@iconify-json/lucide@1.2.96':
     resolution: {integrity: sha512-EICTusj67lvSmEaH/Lhe68ZyzcgfcPNpY00exAOkoo+z2fnLeNy31mdE3E/4/q8WjzZrICAZDxY3d6j7LzkgNA==}
 
-  '@iconify-json/simple-icons@1.2.72':
-    resolution: {integrity: sha512-wkcixntHvaCoqPqerGrNFcHQ3Yx1ux4ZkhscCDK0DEHpP62XCH+cxq1HTsRjbUiQl/M9K8bj03HF6Wgn5iE2rQ==}
+  '@iconify-json/simple-icons@1.2.73':
+    resolution: {integrity: sha512-nQZTwul4c2zBqH/aLP4zMOiElj93T6HawbrP+sFQKpxmBdS5x1duCK3cAnkj6dntHz84EYkzaQRM83V2pj4qxA==}
 
   '@iconify-json/vscode-icons@1.2.44':
     resolution: {integrity: sha512-3fLOIRRtsm6HD6UPJ3Y6/UztqxNTYgKA8VxrWeg1C+042MD3A/06CkWSsii1pz/f1zl0+YxvCHIVM3tXUlho+A==}
@@ -1789,6 +1808,9 @@ packages:
       agents:
         optional: true
 
+  '@nuxtjs/mdc@0.20.1':
+    resolution: {integrity: sha512-fGmtLDQAmmDHF5Z37Apfc3k806rb2XWDOQFhb5xlDSL7+HiiUjyFy3ctx3qWdlC08dRzfAetmsGOYbfDqYsB/w==}
+
   '@nuxtjs/mdc@0.20.2':
     resolution: {integrity: sha512-afAJKnXKdvDtoNOGARQMpZoGprL1T3OGnj+K9edJjX+WdhCwvVabBijhi8BAlpx+YzA/DpcZx8bDFZk/aoSJmA==}
 
@@ -4818,6 +4840,10 @@ packages:
       '@vue/compiler-sfc': ^3.3.0
       eslint: '>=9.0.0'
 
+  eslint-scope@9.1.1:
+    resolution: {integrity: sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   eslint-scope@9.1.2:
     resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -8401,6 +8427,12 @@ packages:
 
 snapshots:
 
+  '@ai-sdk/anthropic@3.0.58(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.19(zod@4.3.6)
+      zod: 4.3.6
+
   '@ai-sdk/gateway@3.0.66(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
@@ -8860,7 +8892,7 @@ snapshots:
 
   '@eslint/compat@2.0.2(eslint@10.0.3(jiti@2.6.1))':
     dependencies:
-      '@eslint/core': 1.1.1
+      '@eslint/core': 1.1.0
     optionalDependencies:
       eslint: 10.0.3(jiti@2.6.1)
 
@@ -8876,6 +8908,10 @@ snapshots:
     dependencies:
       '@eslint/core': 1.1.1
 
+  '@eslint/core@1.1.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
   '@eslint/core@1.1.1':
     dependencies:
       '@types/json-schema': 7.0.15
@@ -8901,12 +8937,14 @@ snapshots:
       '@floating-ui/core': 1.7.5
       '@floating-ui/utils': 0.2.11
 
+  '@floating-ui/utils@0.2.10': {}
+
   '@floating-ui/utils@0.2.11': {}
 
   '@floating-ui/vue@1.1.10(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@floating-ui/dom': 1.7.6
-      '@floating-ui/utils': 0.2.11
+      '@floating-ui/utils': 0.2.10
       vue-demi: 0.14.10(vue@3.5.28(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -8978,7 +9016,7 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/simple-icons@1.2.72':
+  '@iconify-json/simple-icons@1.2.73':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -9418,7 +9456,7 @@ snapshots:
   '@nuxt/content@3.12.0(better-sqlite3@12.6.2)(magicast@0.5.2)(valibot@1.2.0(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
-      '@nuxtjs/mdc': 0.20.2(magicast@0.5.2)
+      '@nuxtjs/mdc': 0.20.1(magicast@0.5.2)
       '@shikijs/langs': 3.23.0
       '@sqlite.org/sqlite-wasm': 3.50.4-build1
       '@standard-schema/spec': 1.1.0
@@ -9937,6 +9975,55 @@ snapshots:
       - magicast
       - supports-color
 
+  '@nuxtjs/mdc@0.20.1(magicast@0.5.2)':
+    dependencies:
+      '@nuxt/kit': 4.3.1(magicast@0.5.2)
+      '@shikijs/core': 3.23.0
+      '@shikijs/langs': 3.23.0
+      '@shikijs/themes': 3.23.0
+      '@shikijs/transformers': 3.22.0
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@vue/compiler-core': 3.5.28
+      consola: 3.4.2
+      debug: 4.4.3
+      defu: 6.1.4
+      destr: 2.0.5
+      detab: 3.0.2
+      github-slugger: 2.0.0
+      hast-util-format: 1.1.0
+      hast-util-to-mdast: 10.1.2
+      hast-util-to-string: 3.0.1
+      mdast-util-to-hast: 13.2.1
+      micromark-util-sanitize-uri: 2.0.1
+      parse5: 8.0.0
+      pathe: 2.0.3
+      property-information: 7.1.0
+      rehype-external-links: 3.0.0
+      rehype-minify-whitespace: 6.0.2
+      rehype-raw: 7.0.0
+      rehype-remark: 10.0.1
+      rehype-slug: 6.0.0
+      rehype-sort-attribute-values: 5.0.1
+      rehype-sort-attributes: 5.0.1
+      remark-emoji: 5.0.2
+      remark-gfm: 4.0.1
+      remark-mdc: 3.10.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      remark-stringify: 11.0.0
+      scule: 1.3.0
+      shiki: 3.23.0
+      ufo: 1.6.3
+      unified: 11.0.5
+      unist-builder: 4.0.0
+      unist-util-visit: 5.1.0
+      unwasm: 0.5.3
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+
   '@nuxtjs/mdc@0.20.2(magicast@0.5.2)':
     dependencies:
       '@nuxt/kit': 4.3.1(magicast@0.5.2)
@@ -12773,6 +12860,13 @@ snapshots:
       '@vue/compiler-sfc': 3.5.28
       eslint: 10.0.3(jiti@2.6.1)
 
+  eslint-scope@9.1.1:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-scope@9.1.2:
     dependencies:
       '@types/esrecurse': 4.3.1
@@ -17075,7 +17169,7 @@ snapshots:
     dependencies:
       debug: 4.4.3
       eslint: 10.0.3(jiti@2.6.1)
-      eslint-scope: 9.1.2
+      eslint-scope: 9.1.1
       eslint-visitor-keys: 5.0.1
       espree: 11.1.1
       esquery: 1.7.0
diff --git a/skills/nuxt-ui/references/layouts/chat.md b/skills/nuxt-ui/references/layouts/chat.md
index aaad2c4baf..f676ebee17 100644
--- a/skills/nuxt-ui/references/layouts/chat.md
+++ b/skills/nuxt-ui/references/layouts/chat.md
@@ -35,7 +35,7 @@ export default defineEventHandler(async (event) => {
   const { messages } = await readBody(event)
 
   return streamText({
-    model: gateway('openai/gpt-4o-mini'),
+    model: gateway('anthropic/claude-haiku-4.5'),
     system: 'You are a helpful assistant.',
     messages: await convertToModelMessages(messages)
   }).toUIMessageStreamResponse()
@@ -46,6 +46,7 @@ export default defineEventHandler(async (event) => {
 
 ```vue [pages/chat/[id].vue]
 <script setup lang="ts">
+import { isTextUIPart } from 'ai'
 import { Chat } from '@ai-sdk/vue'
 
 definePageMeta({ layout: 'dashboard' })
@@ -59,7 +60,10 @@ const chat = new Chat({
 })
 
 function onSubmit() {
+  if (!input.value.trim()) return
+
   chat.sendMessage({ text: input.value })
+
   input.value = ''
 }
 </script>
@@ -76,14 +80,11 @@ function onSubmit() {
           <template #content="{ message }">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC
-                v-if="part.type === 'text' && message.role === 'assistant'"
+                v-if="isTextUIPart(part)"
                 :value="part.text"
                 :cache-key="`${message.id}-${index}`"
                 class="*:first:mt-0 *:last:mb-0"
               />
-              <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">
-                {{ part.text }}
-              </p>
             </template>
           </template>
         </UChatMessages>
diff --git a/src/runtime/components/Sidebar.vue b/src/runtime/components/Sidebar.vue
new file mode 100644
index 0000000000..086937a8ad
--- /dev/null
+++ b/src/runtime/components/Sidebar.vue
@@ -0,0 +1,328 @@
+<script lang="ts">
+import type { VNode } from 'vue'
+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 'offcanvas'
+   */
+  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 }): VNode[]
+  title?(props: { state: SidebarState }): VNode[]
+  description?(props: { state: SidebarState }): VNode[]
+  actions?(props: { state: SidebarState }): VNode[]
+  close?(props: { ui: Sidebar['ui'], state: SidebarState }): VNode[]
+  default?(props: { state: SidebarState, open: boolean, close: () => void }): VNode[]
+  footer?(props: { state: SidebarState, open: boolean, close: () => void }): VNode[]
+  rail?(props: { ui: Sidebar['ui'], state: SidebarState }): VNode[]
+  content?(props: { close: () => void }): VNode[]
+}
+</script>
+
+<script setup lang="ts" generic="T extends SidebarMode">
+import { computed, onMounted, 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: 'offcanvas',
+  side: 'left',
+  close: false,
+  rail: false,
+  mode: 'slideover' as never
+})
+const slots = defineSlots<SidebarSlots>()
+
+const [DefineInnerTemplate, ReuseInnerTemplate] = createReusableTemplate()
+const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate()
+
+const mediaQuery = useMediaQuery('(max-width: 1023px)')
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+const isMobile = computed(() => isMounted.value && mediaQuery.value)
+
+// 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>(() => open.value ? 'expanded' : 'collapsed')
+
+// Close button only works when collapsible is not 'none'
+const canClose = computed(() => (props.close && props.collapsible !== 'none') || isMobile.value)
+
+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' ? { } : props.mode === 'slideover' ? { side: props.side, inset: props.variant === 'inset' } : {}) as SidebarMenu<T>)
+</script>
+
+<template>
+  <DefineContentTemplate>
+    <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" :state="state">
+              {{ title }}
+            </slot>
+          </p>
+
+          <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+            <slot name="description" :state="state">
+              {{ description }}
+            </slot>
+          </p>
+        </div>
+
+        <div v-if="!!slots.actions || canClose" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
+          <slot name="actions" :state="state" />
+
+          <slot name="close" :state="state" :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>
+        </div>
+      </slot>
+    </div>
+
+    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+      <slot :state="state" :open="open" :close="closeSidebar" />
+    </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>
+  </DefineContentTemplate>
+
+  <DefineInnerTemplate>
+    <div data-slot="inner" :class="ui.inner({ class: uiProp?.inner })">
+      <ReuseContentTemplate />
+    </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" :state="state" :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"
+    >
+      <template #content="contentData">
+        <slot name="content" v-bind="contentData" :close="closeSidebar">
+          <ReuseContentTemplate />
+        </slot>
+      </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 c3325f2262..31dd713b2b 100644
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -117,6 +117,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 e0d7882137..8a0fb43106 100644
--- a/src/runtime/locale/az.ts
+++ b/src/runtime/locale/az.ts
@@ -116,6 +116,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 7b76d5e06b..4b7602452e 100644
--- a/src/runtime/locale/be.ts
+++ b/src/runtime/locale/be.ts
@@ -116,6 +116,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 58ee351e32..2f9208c609 100644
--- a/src/runtime/locale/bg.ts
+++ b/src/runtime/locale/bg.ts
@@ -116,6 +116,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 5e75249e0a..d978215a83 100644
--- a/src/runtime/locale/bn.ts
+++ b/src/runtime/locale/bn.ts
@@ -116,6 +116,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 a85e552a8d..6667662c65 100644
--- a/src/runtime/locale/ca.ts
+++ b/src/runtime/locale/ca.ts
@@ -116,6 +116,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 32baa76a2a..7cbd5077d6 100644
--- a/src/runtime/locale/ckb.ts
+++ b/src/runtime/locale/ckb.ts
@@ -117,6 +117,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 574ae9ec95..773f6ce760 100644
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -116,6 +116,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 4413e255c8..83f52b49b8 100644
--- a/src/runtime/locale/da.ts
+++ b/src/runtime/locale/da.ts
@@ -116,6 +116,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 a0c9825039..2dc569a41d 100644
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -116,6 +116,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 6f068af1ad..c12ea97381 100644
--- a/src/runtime/locale/de_ch.ts
+++ b/src/runtime/locale/de_ch.ts
@@ -116,6 +116,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 ce99c4dd4e..55dc3d8694 100644
--- a/src/runtime/locale/el.ts
+++ b/src/runtime/locale/el.ts
@@ -116,6 +116,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 0f84260e3a..2f9b93da1c 100644
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -116,6 +116,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 b24628f3ad..537c38649a 100644
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -116,6 +116,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 ccdb6dfca2..93f4c51edf 100644
--- a/src/runtime/locale/et.ts
+++ b/src/runtime/locale/et.ts
@@ -116,6 +116,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 5e4894ff2d..29f3874ed8 100644
--- a/src/runtime/locale/eu.ts
+++ b/src/runtime/locale/eu.ts
@@ -116,6 +116,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 6b37bc8e49..deb4efe181 100644
--- a/src/runtime/locale/fa_ir.ts
+++ b/src/runtime/locale/fa_ir.ts
@@ -117,6 +117,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 1ac757f2d3..f85df3ab0f 100644
--- a/src/runtime/locale/fi.ts
+++ b/src/runtime/locale/fi.ts
@@ -116,6 +116,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 99cf7abe55..f487909795 100644
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -116,6 +116,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 c670a8c450..3e069e50ce 100644
--- a/src/runtime/locale/gl.ts
+++ b/src/runtime/locale/gl.ts
@@ -116,6 +116,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 c7d263e183..134c4e93aa 100644
--- a/src/runtime/locale/he.ts
+++ b/src/runtime/locale/he.ts
@@ -117,6 +117,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 6737a6e821..338e6983a0 100644
--- a/src/runtime/locale/hi.ts
+++ b/src/runtime/locale/hi.ts
@@ -116,6 +116,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 57f392a056..8b87e8d2f7 100644
--- a/src/runtime/locale/hr.ts
+++ b/src/runtime/locale/hr.ts
@@ -116,6 +116,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 5db14524e7..d6b4d78d41 100644
--- a/src/runtime/locale/hu.ts
+++ b/src/runtime/locale/hu.ts
@@ -116,6 +116,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 35a58f7727..cc3570220b 100644
--- a/src/runtime/locale/hy.ts
+++ b/src/runtime/locale/hy.ts
@@ -116,6 +116,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 4a51cd519f..ece826b5f1 100644
--- a/src/runtime/locale/id.ts
+++ b/src/runtime/locale/id.ts
@@ -116,6 +116,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/is.ts b/src/runtime/locale/is.ts
index 7144cb111e..96bd01d22e 100644
--- a/src/runtime/locale/is.ts
+++ b/src/runtime/locale/is.ts
@@ -116,6 +116,10 @@ export default defineLocale<Messages>({
         copy: 'Afrita kóða á klippiborð'
       }
     },
+    sidebar: {
+      close: 'Loka',
+      toggle: 'Skipta'
+    },
     selectMenu: {
       create: 'Búa til "{label}"',
       noData: 'Engin gögn',
diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts
index 4c520b5097..3f75db654e 100644
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -116,6 +116,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 4856cc045f..7f2371793b 100644
--- a/src/runtime/locale/ja.ts
+++ b/src/runtime/locale/ja.ts
@@ -116,6 +116,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 d9a69066c2..aa06f5a816 100644
--- a/src/runtime/locale/ka.ts
+++ b/src/runtime/locale/ka.ts
@@ -118,6 +118,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 d5040b8804..9d4d4d45e8 100644
--- a/src/runtime/locale/kk.ts
+++ b/src/runtime/locale/kk.ts
@@ -116,6 +116,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 6658db4e8b..b249f08ebe 100644
--- a/src/runtime/locale/km.ts
+++ b/src/runtime/locale/km.ts
@@ -116,6 +116,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 24757fb557..d2b94c0b92 100644
--- a/src/runtime/locale/ko.ts
+++ b/src/runtime/locale/ko.ts
@@ -116,6 +116,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 a503ac1de4..529841b6f3 100644
--- a/src/runtime/locale/ky.ts
+++ b/src/runtime/locale/ky.ts
@@ -116,6 +116,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 af0d5fdef3..bbaa139b3d 100644
--- a/src/runtime/locale/lb.ts
+++ b/src/runtime/locale/lb.ts
@@ -116,6 +116,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 e42826cc28..51e11e01f3 100644
--- a/src/runtime/locale/lo.ts
+++ b/src/runtime/locale/lo.ts
@@ -116,6 +116,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 16864f90aa..14971351b7 100644
--- a/src/runtime/locale/lt.ts
+++ b/src/runtime/locale/lt.ts
@@ -116,6 +116,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 69f8b36819..72eba48206 100644
--- a/src/runtime/locale/mn.ts
+++ b/src/runtime/locale/mn.ts
@@ -116,6 +116,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 52591e1631..756c449853 100644
--- a/src/runtime/locale/ms.ts
+++ b/src/runtime/locale/ms.ts
@@ -116,6 +116,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 131b74c63d..caa4ef79c4 100644
--- a/src/runtime/locale/nb_no.ts
+++ b/src/runtime/locale/nb_no.ts
@@ -116,6 +116,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 8f1e4298da..78cb4e601e 100644
--- a/src/runtime/locale/nl.ts
+++ b/src/runtime/locale/nl.ts
@@ -116,6 +116,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 bd782cefe6..7a303139e4 100644
--- a/src/runtime/locale/pl.ts
+++ b/src/runtime/locale/pl.ts
@@ -116,6 +116,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 ef0ec23cc0..03456890be 100644
--- a/src/runtime/locale/pt.ts
+++ b/src/runtime/locale/pt.ts
@@ -116,6 +116,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 930923e9f4..736b170d22 100644
--- a/src/runtime/locale/pt_br.ts
+++ b/src/runtime/locale/pt_br.ts
@@ -116,6 +116,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 633671c872..b9c6a6eb93 100644
--- a/src/runtime/locale/ro.ts
+++ b/src/runtime/locale/ro.ts
@@ -116,6 +116,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 9c7546c1c2..dc6f561175 100644
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -116,6 +116,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 a8f60e8eb1..1196004323 100644
--- a/src/runtime/locale/sk.ts
+++ b/src/runtime/locale/sk.ts
@@ -116,6 +116,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 2691d47500..27bb6c48b0 100644
--- a/src/runtime/locale/sl.ts
+++ b/src/runtime/locale/sl.ts
@@ -116,6 +116,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 48493ea8e2..5e8a907862 100644
--- a/src/runtime/locale/sq.ts
+++ b/src/runtime/locale/sq.ts
@@ -116,6 +116,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 aa68966f31..56e0df7a39 100644
--- a/src/runtime/locale/sv.ts
+++ b/src/runtime/locale/sv.ts
@@ -116,6 +116,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 2a278fbde6..c4cafb0e76 100644
--- a/src/runtime/locale/th.ts
+++ b/src/runtime/locale/th.ts
@@ -116,6 +116,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 bb37ebc1b8..071fd1fd15 100644
--- a/src/runtime/locale/tj.ts
+++ b/src/runtime/locale/tj.ts
@@ -116,6 +116,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 a183d672a1..677b375472 100644
--- a/src/runtime/locale/tr.ts
+++ b/src/runtime/locale/tr.ts
@@ -116,6 +116,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 6815c41416..d7d6f05a6b 100644
--- a/src/runtime/locale/ug_cn.ts
+++ b/src/runtime/locale/ug_cn.ts
@@ -117,6 +117,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 d6e7cdc77d..a28c124343 100644
--- a/src/runtime/locale/uk.ts
+++ b/src/runtime/locale/uk.ts
@@ -116,6 +116,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 965083ba3f..5214bf4b4f 100644
--- a/src/runtime/locale/ur.ts
+++ b/src/runtime/locale/ur.ts
@@ -117,6 +117,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 29a3a3b807..4e2ece766e 100644
--- a/src/runtime/locale/uz.ts
+++ b/src/runtime/locale/uz.ts
@@ -116,6 +116,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 4a0c6dcffe..9d4efb580b 100644
--- a/src/runtime/locale/vi.ts
+++ b/src/runtime/locale/vi.ts
@@ -116,6 +116,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 613c61f10f..219e49d0cb 100644
--- a/src/runtime/locale/zh_cn.ts
+++ b/src/runtime/locale/zh_cn.ts
@@ -116,6 +116,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 86897f1166..000143e39a 100644
--- a/src/runtime/locale/zh_tw.ts
+++ b/src/runtime/locale/zh_tw.ts
@@ -116,6 +116,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 c4f9429f10..df33b6e76a 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -120,6 +120,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/modal.ts b/src/theme/modal.ts
index 4c3a2d8978..480474a4ea 100644
--- a/src/theme/modal.ts
+++ b/src/theme/modal.ts
@@ -2,7 +2,7 @@ export default {
   slots: {
     overlay: 'fixed inset-0',
     content: 'bg-default divide-y divide-default flex flex-col focus:outline-none',
-    header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-16',
+    header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)',
     wrapper: '',
     body: 'flex-1 p-4 sm:p-6',
     footer: 'flex items-center gap-1.5 p-4 sm:px-6',
diff --git a/src/theme/sidebar.ts b/src/theme/sidebar.ts
new file mode 100644
index 0000000000..581ff77dd3
--- /dev/null
+++ b/src/theme/sidebar.ts
@@ -0,0 +1,128 @@
+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 divide-y divide-default',
+    header: 'flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)',
+    wrapper: 'min-w-0 flex-1',
+    title: 'text-highlighted font-semibold truncate',
+    description: 'text-muted text-sm truncate',
+    actions: 'flex items-center gap-1.5 shrink-0',
+    close: '',
+    body: 'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4',
+    footer: 'flex items-center gap-1.5 overflow-hidden 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']
+  },
+  variants: {
+    side: {
+      left: {
+        container: 'left-0 border-e border-default',
+        rail: 'end-0 translate-x-1/2'
+      },
+      right: {
+        container: 'right-0 border-s border-default',
+        rail: '-start-px -translate-x-1/2'
+      }
+    },
+    collapsible: {
+      offcanvas: {
+        root: 'group/sidebar hidden lg:block',
+        gap: '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)',
+        actions: 'group-data-[state=collapsed]/sidebar:hidden',
+        body: 'group-data-[state=collapsed]/sidebar:overflow-hidden'
+      },
+      none: {
+        root: 'h-full w-(--sidebar-width)'
+      }
+    },
+    variant: {
+      sidebar: {},
+      floating: {
+        container: 'p-4 border-transparent',
+        inner: 'rounded-lg ring ring-default shadow-lg',
+        rail: 'inset-y-4'
+      },
+      inset: {
+        container: 'py-4 border-transparent',
+        inner: 'divide-transparent',
+        rail: 'inset-y-4'
+      }
+    }
+  },
+  compoundVariants: [{
+    side: 'left',
+    collapsible: ['offcanvas', 'icon'],
+    class: {
+      rail: 'cursor-w-resize data-[state=collapsed]:cursor-e-resize'
+    }
+  }, {
+    side: 'right',
+    collapsible: ['offcanvas', 'icon'],
+    class: {
+      rail: 'cursor-e-resize data-[state=collapsed]:cursor-w-resize'
+    }
+  }, {
+    side: 'left',
+    collapsible: 'none',
+    class: {
+      root: 'border-e border-default'
+    }
+  }, {
+    side: 'right',
+    collapsible: 'none',
+    class: {
+      root: 'border-s border-default'
+    }
+  }, {
+    side: 'left',
+    collapsible: 'offcanvas',
+    class: {
+      container: 'data-[state=collapsed]:-left-(--sidebar-width)'
+    }
+  }, {
+    side: 'right',
+    collapsible: 'offcanvas',
+    class: {
+      container: 'data-[state=collapsed]:-right-(--sidebar-width)'
+    }
+  }, {
+    variant: 'floating',
+    collapsible: 'icon',
+    class: {
+      gap: 'data-[state=collapsed]:w-[calc(var(--sidebar-width-icon)+--spacing(8))]',
+      container: 'data-[state=collapsed]:w-[calc(var(--sidebar-width-icon)+--spacing(8)+2px)]'
+    }
+  }, {
+    variant: 'floating',
+    collapsible: 'none',
+    class: {
+      root: 'p-4 border-0'
+    }
+  }, {
+    variant: 'inset',
+    collapsible: 'none',
+    class: {
+      root: 'py-4 border-0'
+    }
+  }, {
+    variant: 'floating',
+    side: 'left',
+    class: {
+      rail: 'end-4'
+    }
+  }, {
+    variant: 'floating',
+    side: 'right',
+    class: {
+      rail: 'start-[calc(--spacing(4)-1px)]'
+    }
+  }]
+})
diff --git a/src/theme/slideover.ts b/src/theme/slideover.ts
index bff23184f7..e79bb7999c 100644
--- a/src/theme/slideover.ts
+++ b/src/theme/slideover.ts
@@ -2,7 +2,7 @@ export default {
   slots: {
     overlay: 'fixed inset-0 bg-elevated/75',
     content: 'fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none',
-    header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-16',
+    header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)',
     wrapper: '',
     body: 'flex-1 overflow-y-auto p-4 sm:p-6',
     footer: 'flex items-center gap-1.5 p-4 sm:px-6',
diff --git a/test/components/Sidebar.spec.ts b/test/components/Sidebar.spec.ts
new file mode 100644
index 0000000000..b5577c92c4
--- /dev/null
+++ b/test/components/Sidebar.spec.ts
@@ -0,0 +1,46 @@
+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 { renderEach } 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
+
+  renderEach(Sidebar, [
+    // 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: 'bg-elevated/50' } }],
+    ['with ui', { props: { ui: { body: 'py-0' } } }],
+    // Slots
+    ['with header slot', { slots: { header: () => 'Header slot' } }],
+    ['with default slot', { slots: { default: () => 'Default slot' } }],
+    ['with actions slot', { slots: { actions: () => 'Actions slot' } }],
+    ['with footer slot', { slots: { footer: () => 'Footer slot' } }],
+    ['with content slot', { slots: { content: () => 'Content slot' } }]
+  ])
+
+  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__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index 50a3f99f6c..8b0f3e4f7f 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -36,7 +36,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -63,7 +63,7 @@ exports[`Modal > renders with class correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -90,7 +90,7 @@ exports[`Modal > renders with close slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -114,7 +114,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -157,7 +157,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -184,7 +184,7 @@ exports[`Modal > renders with description correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -211,7 +211,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
@@ -238,7 +238,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -265,7 +265,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -292,7 +292,7 @@ exports[`Modal > renders with header slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>
@@ -311,7 +311,7 @@ exports[`Modal > renders with open correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -337,7 +337,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <!--v-if-->
-    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
       <div data-slot="wrapper" class="">
         <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -363,7 +363,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <!--v-if-->
-    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
       <div data-slot="wrapper" class="">
         <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -389,7 +389,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <!--v-if-->
-    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
       <div data-slot="wrapper" class="">
         <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -416,7 +416,7 @@ exports[`Modal > renders with title correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
@@ -443,7 +443,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
@@ -470,7 +470,7 @@ exports[`Modal > renders with ui correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -497,7 +497,7 @@ exports[`Modal > renders without close correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -522,7 +522,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 <!--v-if-->
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -549,7 +549,7 @@ exports[`Modal > renders without transition correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index 4704624553..59d73a477b 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -36,7 +36,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -63,7 +63,7 @@ exports[`Modal > renders with class correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -90,7 +90,7 @@ exports[`Modal > renders with close slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -114,7 +114,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -157,7 +157,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -184,7 +184,7 @@ exports[`Modal > renders with description correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -211,7 +211,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
@@ -238,7 +238,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -265,7 +265,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -292,7 +292,7 @@ exports[`Modal > renders with header slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>
@@ -311,7 +311,7 @@ exports[`Modal > renders with open correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -337,7 +337,7 @@ exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
     <!--v-if-->
-    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
       <div data-slot="wrapper" class="">
         <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -363,7 +363,7 @@ exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
     <!--v-if-->
-    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
       <div data-slot="wrapper" class="">
         <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -389,7 +389,7 @@ exports[`Modal > renders with scrollable correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
   <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
     <!--v-if-->
-    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
       <div data-slot="wrapper" class="">
         <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -416,7 +416,7 @@ exports[`Modal > renders with title correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
@@ -443,7 +443,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
@@ -470,7 +470,7 @@ exports[`Modal > renders with ui correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -497,7 +497,7 @@ exports[`Modal > renders without close correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -522,7 +522,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 <!--v-if-->
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -549,7 +549,7 @@ exports[`Modal > renders without transition correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
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..4b38b8c3fb
--- /dev/null
+++ b/test/components/__snapshots__/Sidebar-vue.spec.ts.snap
@@ -0,0 +1,474 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Sidebar > renders with actions slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <!--v-if-->
+        <div data-slot="actions" class="flex items-center gap-1.5 shrink-0">Actions slot
+          <!--v-if-->
+        </div>
+      </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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with class 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 bg-elevated/50">
+  <!-- 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 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 divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <div data-slot="wrapper" class="min-w-0 flex-1">
+          <p data-slot="title" class="text-highlighted font-semibold truncate">Sidebar Title</p>
+          <!--v-if-->
+        </div>
+        <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 group-data-[state=collapsed]/sidebar:hidden"><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"><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>
+      <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 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 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 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 -->
+<!-- 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 default slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with description 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <div data-slot="wrapper" class="min-w-0 flex-1">
+          <p data-slot="title" class="text-highlighted font-semibold truncate">Sidebar Title</p>
+          <p data-slot="description" class="text-muted text-sm truncate">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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with footer slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 overflow-hidden p-4">Footer slot</div>
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with header slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with mode drawer 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 mode modal 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 mode slideover 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 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 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 cursor-w-resize data-[state=collapsed]:cursor-e-resize"></button>
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with side left 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 side right 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="right" 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 right-0 border-s border-default data-[state=collapsed]:-right-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 title 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <div data-slot="wrapper" class="min-w-0 flex-1">
+          <p data-slot="title" class="text-highlighted font-semibold truncate">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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with ui 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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-0"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with variant floating correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="floating" 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 p-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default rounded-lg ring ring-default shadow-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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with variant inset correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="inset" 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 py-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-transparent">
+      <!--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 variant sidebar 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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-->"
+`;
diff --git a/test/components/__snapshots__/Sidebar.spec.ts.snap b/test/components/__snapshots__/Sidebar.spec.ts.snap
new file mode 100644
index 0000000000..1e0e8dda50
--- /dev/null
+++ b/test/components/__snapshots__/Sidebar.spec.ts.snap
@@ -0,0 +1,474 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Sidebar > renders with actions slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <!--v-if-->
+        <div data-slot="actions" class="flex items-center gap-1.5 shrink-0">Actions slot
+          <!--v-if-->
+        </div>
+      </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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with class 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 bg-elevated/50">
+  <!-- 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 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 divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <div data-slot="wrapper" class="min-w-0 flex-1">
+          <p data-slot="title" class="text-highlighted font-semibold truncate">Sidebar Title</p>
+          <!--v-if-->
+        </div>
+        <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 group-data-[state=collapsed]/sidebar:hidden"><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"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+            <!--v-if-->
+            <!--v-if-->
+          </button></div>
+      </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 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 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 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 -->
+<!-- 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 default slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with description 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <div data-slot="wrapper" class="min-w-0 flex-1">
+          <p data-slot="title" class="text-highlighted font-semibold truncate">Sidebar Title</p>
+          <p data-slot="description" class="text-muted text-sm truncate">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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with footer slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 overflow-hidden p-4">Footer slot</div>
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with header slot 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with mode drawer 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 mode modal 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 mode slideover 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 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 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 cursor-w-resize data-[state=collapsed]:cursor-e-resize"></button>
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with side left 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 side right 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="right" 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 right-0 border-s border-default data-[state=collapsed]:-right-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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 title 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default">
+      <div data-slot="header" class="flex items-center gap-1.5 overflow-hidden px-4 min-h-(--ui-header-height)">
+        <div data-slot="wrapper" class="min-w-0 flex-1">
+          <p data-slot="title" class="text-highlighted font-semibold truncate">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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with ui 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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-0"></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with variant floating correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="floating" 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 p-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-default rounded-lg ring ring-default shadow-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>
+    <!--v-if-->
+  </div>
+</aside>
+<!-- Mobile menu -->
+<!--v-if-->"
+`;
+
+exports[`Sidebar > renders with variant inset correctly 1`] = `
+"<!-- Non-collapsible: simple inline sidebar -->
+<!-- Collapsible: fixed sidebar with gap spacer + mobile menu -->
+<aside data-slot="root" data-state="expanded" data-variant="inset" 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 py-4 border-transparent data-[state=collapsed]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden divide-y divide-transparent">
+      <!--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 variant sidebar 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]:-left-(--sidebar-width)">
+    <div data-slot="inner" class="flex size-full flex-col overflow-hidden 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-->"
+`;
diff --git a/test/components/__snapshots__/Slideover-vue.spec.ts.snap b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
index e65dd4edf8..6ca12e236e 100644
--- a/test/components/__snapshots__/Slideover-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover-vue.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -33,7 +33,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -58,7 +58,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-h-full inset-x-0 bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -83,7 +83,7 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none rounded-lg max-h-[calc(100%-2rem)] inset-x-4 bottom-4 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -108,7 +108,7 @@ exports[`Slideover > renders with class correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -133,7 +133,7 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -155,7 +155,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -194,7 +194,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -219,7 +219,7 @@ exports[`Slideover > renders with description correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -244,7 +244,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
@@ -269,7 +269,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -294,7 +294,7 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">Header slot</div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
@@ -311,7 +311,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 left-0 data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -336,7 +336,7 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md rounded-lg w-[calc(100%-2rem)] inset-y-4 left-4 data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -361,7 +361,7 @@ exports[`Slideover > renders with open correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -386,7 +386,7 @@ exports[`Slideover > renders with right side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -411,7 +411,7 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md rounded-lg w-[calc(100%-2rem)] inset-y-4 right-4 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -436,7 +436,7 @@ exports[`Slideover > renders with title correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
@@ -461,7 +461,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
@@ -486,7 +486,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-h-full inset-x-0 top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -511,7 +511,7 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none rounded-lg max-h-[calc(100%-2rem)] inset-x-4 top-4 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -536,7 +536,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -561,7 +561,7 @@ exports[`Slideover > renders without close correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -584,7 +584,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 <!--v-if-->
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -609,7 +609,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
diff --git a/test/components/__snapshots__/Slideover.spec.ts.snap b/test/components/__snapshots__/Slideover.spec.ts.snap
index b928e8d4e5..d6c9cf6c1b 100644
--- a/test/components/__snapshots__/Slideover.spec.ts.snap
+++ b/test/components/__snapshots__/Slideover.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`Slideover > renders with actions slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -33,7 +33,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -58,7 +58,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-h-full inset-x-0 bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -83,7 +83,7 @@ exports[`Slideover > renders with bottom side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="bottom" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none rounded-lg max-h-[calc(100%-2rem)] inset-x-4 bottom-4 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -108,7 +108,7 @@ exports[`Slideover > renders with class correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -133,7 +133,7 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -155,7 +155,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -194,7 +194,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -219,7 +219,7 @@ exports[`Slideover > renders with description correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -244,7 +244,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
@@ -269,7 +269,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -294,7 +294,7 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">Header slot</div>
   <div data-slot="body" class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
 </div>
@@ -311,7 +311,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 left-0 data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -336,7 +336,7 @@ exports[`Slideover > renders with left side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="left" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md rounded-lg w-[calc(100%-2rem)] inset-y-4 left-4 data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -361,7 +361,7 @@ exports[`Slideover > renders with open correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -386,7 +386,7 @@ exports[`Slideover > renders with right side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -411,7 +411,7 @@ exports[`Slideover > renders with right side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md rounded-lg w-[calc(100%-2rem)] inset-y-4 right-4 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -436,7 +436,7 @@ exports[`Slideover > renders with title correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <!--v-if-->
@@ -461,7 +461,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
       <!--v-if-->
@@ -486,7 +486,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-h-full inset-x-0 top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -511,7 +511,7 @@ exports[`Slideover > renders with top side inset correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="top" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none rounded-lg max-h-[calc(100%-2rem)] inset-x-4 top-4 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -536,7 +536,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <!--v-if-->
       <!--v-if-->
@@ -561,7 +561,7 @@ exports[`Slideover > renders without close correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -584,7 +584,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 <!--v-if-->
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0 data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
@@ -609,7 +609,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
 <div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-side="right" data-slot="content" class="fixed bg-default divide-y divide-default sm:ring ring-default sm:shadow-lg flex flex-col focus:outline-none max-w-md w-full inset-y-0 right-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
-  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-(--ui-header-height)">
     <div data-slot="wrapper" class="">
       <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
       <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>