@@ -62,6 +62,11 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
    * @defaultValue false
    */
   rail?: boolean
+  /**
+   * Animate the sidebar when collapsing or expanding.
+   * @defaultValue true
+   */
+  transition?: boolean
   /**
    * The mode of the sidebar menu on mobile.
    * @defaultValue 'slideover'
@@ -110,6 +115,7 @@ const _props = withDefaults(defineProps<SidebarProps<T>>(), {
   collapsible: 'offcanvas',
   side: 'left',
   close: false,
+  transition: true,
   rail: false,
   mode: 'slideover' as never
 })
@@ -189,7 +195,8 @@ const hasHeader = computed(() => !!slots.header || props.title || !!slots.title
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.sidebar || {}) })({
   side: props.side,
   variant: props.variant,
-  collapsible: props.collapsible
+  collapsible: props.collapsible,
+  transition: props.transition
 }))
 
 const Menu = computed(() => ({
 
@@ -3,8 +3,8 @@ 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',
+    gap: 'relative w-(--sidebar-width) bg-transparent',
+    container: 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) 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',
@@ -14,9 +14,16 @@ export default (options: Required<ModuleOptions>) => ({
     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']
+    rail: ['absolute inset-y-0 z-20 hidden w-4 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: {
+    transition: {
+      true: {
+        gap: 'transition-[width] duration-200 ease-out',
+        container: 'transition-[left,right,width] duration-200 ease-out',
+        rail: 'transition-all ease-out'
+      }
+    },
     side: {
       left: {
         container: 'left-0 border-e border-default',