diff --git a/src/module.ts b/src/module.ts
index 47ea1648..ed032632 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -57,6 +57,9 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {}
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, 'isolate'].filter(Boolean).join(' ')
 
+    // Add keyframes for animations
+    nuxt.options.css.push(resolve('./runtime/assets/css/animations.css'))
+
     addVitePlugin(tailwindcss)
 
     await installModule('@nuxt/icon', {
diff --git a/src/runtime/assets/css/animations.css b/src/runtime/assets/css/animations.css
new file mode 100644
index 00000000..545f66c8
--- /dev/null
+++ b/src/runtime/assets/css/animations.css
@@ -0,0 +1,235 @@
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
+}
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
+}
+
+@keyframes toast-collapsed-closed {
+  from { transform: var(--transform); }
+  to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
+}
+@keyframes toast-closed {
+  from { transform: var(--transform); }
+  to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
+}
+@keyframes toast-slide-left {
+  from { transform: translateX(0) translateY(var(--translate)); }
+  to { transform: translateX(-100%) translateY(var(--translate)); }
+}
+@keyframes toast-slide-right {
+  from { transform: translateX(0) translateY(var(--translate)); }
+  to { transform: translateX(100%) translateY(var(--translate)); }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+@keyframes slide-in-from-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+@keyframes slide-out-to-top {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+@keyframes slide-in-from-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+@keyframes slide-out-to-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+@keyframes slide-in-from-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+@keyframes slide-out-to-bottom {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+@keyframes slide-in-from-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+@keyframes slide-out-to-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+@keyframes slide-in-from-top-and-fade {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes slide-out-to-top-and-fade {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-4px); }
+}
+@keyframes slide-in-from-right-and-fade {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes slide-out-to-right-and-fade {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(4px); }
+}
+@keyframes slide-in-from-bottom-and-fade {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes slide-out-to-bottom-and-fade {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(4px); }
+}
+@keyframes slide-in-from-left-and-fade {
+  from { opacity: 0; transform: translateX(-4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes slide-out-to-left-and-fade {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-4px); }
+}
+
+@keyframes enter-from-right {
+  from { opacity: 0; transform: translateX(200px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes enter-from-left {
+  from { opacity: 0; transform: translateX(-200px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes exit-to-right {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(200px); }
+}
+@keyframes exit-to-left {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-200px); }
+}
+@keyframes carousel {
+  0%,
+  100% {
+    width: 50%
+  }
+  0% {
+    transform: translateX(-100%)
+  }
+  100% {
+    transform: translateX(200%)
+  }
+}
+@keyframes carousel-vertical {
+  0%,
+  100% {
+    height: 50%
+  }
+  0% {
+    transform: translateY(-100%)
+  }
+  100% {
+    transform: translateY(200%)
+  }
+}
+
+@keyframes carousel-inverse {
+  0%,
+  100% {
+    width: 50%
+  }
+  0% {
+    transform: translateX(200%)
+  }
+  100% {
+    transform: translateX(-100%)
+  }
+}
+@keyframes carousel-inverse-vertical {
+  0%,
+  100% {
+    height: 50%
+  }
+  0% {
+    transform: translateY(200%)
+  }
+  100% {
+    transform: translateY(-100%)
+  }
+}
+
+@keyframes swing {
+  0%,
+  100% {
+    width: 50%
+  }
+  0%,
+  100% {
+    transform: translateX(-25%)
+  }
+  50% {
+    transform: translateX(125%)
+  }
+}
+@keyframes swing-vertical {
+  0%,
+  100% {
+    height: 50%
+  }
+  0%,
+  100% {
+    transform: translateY(-25%)
+  }
+  50% {
+    transform: translateY(125%)
+  }
+}
+
+@keyframes elastic {
+  /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
+  0%,
+  100% {
+    width: 50%;
+    margin-left: 25%;
+  }
+  50% {
+    width: 90%;
+    margin-left: 5%;
+  }
+}
+@keyframes elastic-vertical {
+  0%,
+  100% {
+    height: 50%;
+    margin-top: 25%;
+  }
+  50% {
+    height: 90%;
+    margin-top: 5%;
+  }
+}
diff --git a/src/templates.ts b/src/templates.ts
index 3b1646d7..661e459b 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -17,242 +17,6 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
   :root {
     color-scheme: light dark;
   }
-
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height); }
-    to { height: 0; }
-  }
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height); }
-  }
-
-  @keyframes collapsible-up {
-    from { height: var(--radix-collapsible-content-height); }
-    to { height: 0; }
-  }
-  @keyframes collapsible-down {
-    from { height: 0; }
-    to { height: var(--radix-collapsible-content-height); }
-  }
-
-  @keyframes toast-collapsed-closed {
-    from { transform: var(--transform); }
-    to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
-  }
-  @keyframes toast-closed {
-    from { transform: var(--transform); }
-    to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
-  }
-  @keyframes toast-slide-left {
-    from { transform: translateX(0) translateY(var(--translate)); }
-    to { transform: translateX(-100%) translateY(var(--translate)); }
-  }
-  @keyframes toast-slide-right {
-    from { transform: translateX(0) translateY(var(--translate)); }
-    to { transform: translateX(100%) translateY(var(--translate)); }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-  @keyframes fade-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-
-  @keyframes scale-in {
-    from { opacity: 0; transform: scale(0.95); }
-    to { opacity: 1; transform: scale(1); }
-  }
-  @keyframes scale-out {
-    from { opacity: 1; transform: scale(1); }
-    to { opacity: 0; transform: scale(0.95); }
-  }
-
-  @keyframes slide-in-from-top {
-    from { transform: translateY(-100%); }
-    to { transform: translateY(0); }
-  }
-  @keyframes slide-out-to-top {
-    from { transform: translateY(0); }
-    to { transform: translateY(-100%); }
-  }
-  @keyframes slide-in-from-right {
-    from { transform: translateX(100%); }
-    to { transform: translateX(0); }
-  }
-  @keyframes slide-out-to-right {
-    from { transform: translateX(0); }
-    to { transform: translateX(100%); }
-  }
-  @keyframes slide-in-from-bottom {
-    from { transform: translateY(100%); }
-    to { transform: translateY(0); }
-  }
-  @keyframes slide-out-to-bottom {
-    from { transform: translateY(0); }
-    to { transform: translateY(100%); }
-  }
-  @keyframes slide-in-from-left {
-    from { transform: translateX(-100%); }
-    to { transform: translateX(0); }
-  }
-  @keyframes slide-out-to-left {
-    from { transform: translateX(0); }
-    to { transform: translateX(-100%); }
-  }
-
-  @keyframes slide-in-from-top-and-fade {
-    from { opacity: 0; transform: translateY(-4px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-  @keyframes slide-out-to-top-and-fade {
-    from { opacity: 1; transform: translateY(0); }
-    to { opacity: 0; transform: translateY(-4px); }
-  }
-  @keyframes slide-in-from-right-and-fade {
-    from { opacity: 0; transform: translateX(4px); }
-    to { opacity: 1; transform: translateX(0); }
-  }
-  @keyframes slide-out-to-right-and-fade {
-    from { opacity: 1; transform: translateX(0); }
-    to { opacity: 0; transform: translateX(4px); }
-  }
-  @keyframes slide-in-from-bottom-and-fade {
-    from { opacity: 0; transform: translateY(4px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-  @keyframes slide-out-to-bottom-and-fade {
-    from { opacity: 1; transform: translateY(0); }
-    to { opacity: 0; transform: translateY(4px); }
-  }
-  @keyframes slide-in-from-left-and-fade {
-    from { opacity: 0; transform: translateX(-4px); }
-    to { opacity: 1; transform: translateX(0); }
-  }
-  @keyframes slide-out-to-left-and-fade {
-    from { opacity: 1; transform: translateX(0); }
-    to { opacity: 0; transform: translateX(-4px); }
-  }
-
-  @keyframes enter-from-right {
-    from { opacity: 0; transform: translateX(200px); }
-    to { opacity: 1; transform: translateX(0); }
-  }
-  @keyframes enter-from-left {
-    from { opacity: 0; transform: translateX(-200px); }
-    to { opacity: 1; transform: translateX(0); }
-  }
-  @keyframes exit-to-right {
-    from { opacity: 1; transform: translateX(0); }
-    to { opacity: 0; transform: translateX(200px); }
-  }
-  @keyframes exit-to-left {
-    from { opacity: 1; transform: translateX(0); }
-    to { opacity: 0; transform: translateX(-200px); }
-  }
-  @keyframes carousel {
-    0%,
-    100% {
-      width: 50%
-    }
-    0% {
-      transform: translateX(-100%)
-    }
-    100% {
-      transform: translateX(200%)
-    }
-  }
-  @keyframes carousel-vertical {
-    0%,
-    100% {
-      height: 50%
-    }
-    0% {
-      transform: translateY(-100%)
-    }
-    100% {
-      transform: translateY(200%)
-    }
-  }
-
-  @keyframes carousel-inverse {
-    0%,
-    100% {
-      width: 50%
-    }
-    0% {
-      transform: translateX(200%)
-    }
-    100% {
-      transform: translateX(-100%)
-    }
-  }
-  @keyframes carousel-inverse-vertical {
-    0%,
-    100% {
-      height: 50%
-    }
-    0% {
-      transform: translateY(200%)
-    }
-    100% {
-      transform: translateY(-100%)
-    }
-  }
-
-  @keyframes swing {
-    0%,
-    100% {
-      width: 50%
-    }
-    0%,
-    100% {
-      transform: translateX(-25%)
-    }
-    50% {
-      transform: translateX(125%)
-    }
-  }
-  @keyframes swing-vertical {
-    0%,
-    100% {
-      height: 50%
-    }
-    0%,
-    100% {
-      transform: translateY(-25%)
-    }
-    50% {
-      transform: translateY(125%)
-    }
-  }
-
-  @keyframes elastic {
-    /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
-    0%,
-    100% {
-      width: 50%;
-      margin-left: 25%;
-    }
-    50% {
-      width: 90%;
-      margin-left: 5%;
-    }
-  }
-  @keyframes elastic-vertical {
-    0%,
-    100% {
-      height: 50%;
-      margin-top: 25%;
-    }
-    50% {
-      height: 90%;
-      margin-top: 5%;
-    }
-  }
 }
 
 @theme {