Update

resources/css/app.css

@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 
-@plugin 'tailwindcss-animate';
+/* @plugin 'tailwindcss-animate'; */
 
 @source '../views';
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -96,6 +96,96 @@ @layer base {
             height: 0;
         }
     }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes slideInFromRight {
+        from {
+            transform: translateX(100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes slideOutToRight {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(100%);
+        }
+    }
+
+    @keyframes slideInFromLeft {
+        from {
+            transform: translateX(-100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes slideOutToLeft {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(-100%);
+        }
+    }
+
+    @keyframes slideInFromTop {
+        from {
+            transform: translateY(-100%);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideOutToTop {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(-100%);
+        }
+    }
+
+    @keyframes slideInFromBottom {
+        from {
+            transform: translateY(100%);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideOutToBottom {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(100%);
+        }
+    }
 }
 
 @utility animate-accordion-down {
@@ -106,6 +196,67 @@ @utility animate-accordion-up {
     animation: accordion-up 0.2s ease-out;
 }
 
+/* Shadcn animation utilities */
+@utility animate-in {
+    animation-name: fadeIn, slideIn;
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+}
+
+@utility animate-out {
+    animation-name: fadeOut, slideOut;
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+}
+
+@utility fade-in-0 {
+    animation-name: fadeIn;
+}
+
+@utility fade-out-0 {
+    animation-name: fadeOut;
+}
+
+@utility slide-in-from-right {
+    animation-name: slideInFromRight;
+}
+
+@utility slide-out-to-right {
+    animation-name: slideOutToRight;
+}
+
+@utility slide-in-from-left {
+    animation-name: slideInFromLeft;
+}
+
+@utility slide-out-to-left {
+    animation-name: slideOutToLeft;
+}
+
+@utility slide-in-from-top {
+    animation-name: slideInFromTop;
+}
+
+@utility slide-out-to-top {
+    animation-name: slideOutToTop;
+}
+
+@utility slide-in-from-bottom {
+    animation-name: slideInFromBottom;
+}
+
+@utility slide-out-to-bottom {
+    animation-name: slideOutToBottom;
+}
+
+@utility duration-300 {
+    animation-duration: 300ms;
+}
+
+@utility duration-500 {
+    animation-duration: 500ms;
+}
+
 :root {
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);