@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.1

package/.nuxt/ui/toast.ts

@@ -1,66 +1,86 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "slots": {
-    "root": "relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none",
-    "wrapper": "w-0 flex-1 flex flex-col gap-1",
-    "title": "text-sm font-medium text-[var(--ui-text-highlighted)]",
-    "description": "text-sm text-[var(--ui-text-muted)]",
+    "root": "relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none",
+    "wrapper": "w-0 flex-1 flex flex-col",
+    "title": "text-sm font-medium text-(--ui-text-highlighted)",
+    "description": "text-sm text-(--ui-text-muted)",
     "icon": "shrink-0 size-5",
     "avatar": "shrink-0",
     "avatarSize": "2xl",
     "actions": "flex gap-1.5 shrink-0",
     "progress": "absolute inset-x-0 bottom-0 h-1 z-[-1]",
-    "close": "p-0.5"
+    "close": "p-0"
   },
   "variants": {
     "color": {
       "primary": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]",
-        "icon": "text-[var(--ui-primary)]",
-        "progress": "bg-[var(--ui-primary)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)",
+        "icon": "text-(--ui-primary)",
+        "progress": "bg-(--ui-primary)"
       },
       "secondary": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-secondary)]",
-        "icon": "text-[var(--ui-secondary)]",
-        "progress": "bg-[var(--ui-secondary)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)",
+        "icon": "text-(--ui-secondary)",
+        "progress": "bg-(--ui-secondary)"
       },
       "success": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-success)]",
-        "icon": "text-[var(--ui-success)]",
-        "progress": "bg-[var(--ui-success)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)",
+        "icon": "text-(--ui-success)",
+        "progress": "bg-(--ui-success)"
       },
       "info": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-info)]",
-        "icon": "text-[var(--ui-info)]",
-        "progress": "bg-[var(--ui-info)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)",
+        "icon": "text-(--ui-info)",
+        "progress": "bg-(--ui-info)"
       },
       "warning": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-warning)]",
-        "icon": "text-[var(--ui-warning)]",
-        "progress": "bg-[var(--ui-warning)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)",
+        "icon": "text-(--ui-warning)",
+        "progress": "bg-(--ui-warning)"
       },
       "error": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)]",
-        "icon": "text-[var(--ui-error)]",
-        "progress": "bg-[var(--ui-error)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)",
+        "icon": "text-(--ui-error)",
+        "progress": "bg-(--ui-error)"
       },
       "neutral": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]",
-        "icon": "text-[var(--ui-text-highlighted)]",
-        "progress": "bg-[var(--ui-bg-inverted)]"
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)",
+        "icon": "text-(--ui-text-highlighted)",
+        "progress": "bg-(--ui-bg-inverted)"
       }
     },
-    "multiline": {
-      "true": {
-        "root": "items-start",
-        "actions": "items-start mt-1"
-      },
-      "false": {
+    "orientation": {
+      "horizontal": {
         "root": "items-center",
         "actions": "items-center"
+      },
+      "vertical": {
+        "root": "items-start",
+        "actions": "items-start mt-2.5"
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-1"
       }
     }
   },
   "defaultVariants": {
-    "color": "primary" as const
+    "color": "primary" as typeof color[number]
   }
 }

package/.nuxt/ui/toaster.ts

@@ -1,7 +1,23 @@
+const position = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+] as const
+
+const swipeDirection = [
+  "up",
+  "right",
+  "down",
+  "left"
+] as const
+
 export default {
   "slots": {
-    "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
-    "base": "pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
+    "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   "variants": {
     "position": {
@@ -34,9 +50,9 @@ export default {
   "compoundVariants": [
     {
       "position": [
-        "top-left" as const,
-        "top-center" as const,
-        "top-right" as const
+        "top-left" as typeof position[number],
+        "top-center" as typeof position[number],
+        "top-right" as typeof position[number]
       ],
       "class": {
         "viewport": "top-4",
@@ -45,9 +61,9 @@ export default {
     },
     {
       "position": [
-        "bottom-left" as const,
-        "bottom-center" as const,
-        "bottom-right" as const
+        "bottom-left" as typeof position[number],
+        "bottom-center" as typeof position[number],
+        "bottom-right" as typeof position[number]
       ],
       "class": {
         "viewport": "bottom-4",
@@ -56,20 +72,20 @@ export default {
     },
     {
       "swipeDirection": [
-        "left" as const,
-        "right" as const
+        "left" as typeof swipeDirection[number],
+        "right" as typeof swipeDirection[number]
       ],
-      "class": "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
+      "class": "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
     },
     {
       "swipeDirection": [
-        "up" as const,
-        "down" as const
+        "up" as typeof swipeDirection[number],
+        "down" as typeof swipeDirection[number]
       ],
-      "class": "data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
+      "class": "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
     }
   ],
   "defaultVariants": {
-    "position": "bottom-right" as const
+    "position": "bottom-right" as typeof position[number]
   }
 }

package/.nuxt/ui/tooltip.ts

@@ -1,7 +1,7 @@
 export default {
   "slots": {
-    "content": "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    "arrow": "fill-[var(--ui-border)]",
+    "content": "flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+    "arrow": "fill-(--ui-border)",
     "text": "truncate",
     "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5",
     "kbdsSize": "sm"

package/.nuxt/ui/tree.ts

@@ -0,0 +1,154 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative isolate",
+    "item": "",
+    "listWithChildren": "ms-4.5 border-s border-(--ui-border)",
+    "itemWithChildren": "ps-1.5 -ms-px",
+    "link": "relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    "linkLeadingIcon": "shrink-0",
+    "linkLabel": "truncate",
+    "linkTrailing": "ms-auto inline-flex gap-1.5 items-center",
+    "linkTrailingIcon": "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
+  },
+  "variants": {
+    "color": {
+      "primary": {
+        "link": "focus-visible:before:ring-(--ui-primary)"
+      },
+      "secondary": {
+        "link": "focus-visible:before:ring-(--ui-secondary)"
+      },
+      "success": {
+        "link": "focus-visible:before:ring-(--ui-success)"
+      },
+      "info": {
+        "link": "focus-visible:before:ring-(--ui-info)"
+      },
+      "warning": {
+        "link": "focus-visible:before:ring-(--ui-warning)"
+      },
+      "error": {
+        "link": "focus-visible:before:ring-(--ui-error)"
+      },
+      "neutral": {
+        "link": "focus-visible:before:ring-(--ui-border-inverted)"
+      }
+    },
+    "size": {
+      "xs": {
+        "link": "px-2 py-1 text-xs gap-1",
+        "linkLeadingIcon": "size-4",
+        "linkTrailingIcon": "size-4"
+      },
+      "sm": {
+        "link": "px-2.5 py-1.5 text-xs gap-1.5",
+        "linkLeadingIcon": "size-4",
+        "linkTrailingIcon": "size-4"
+      },
+      "md": {
+        "link": "px-2.5 py-1.5 text-sm gap-1.5",
+        "linkLeadingIcon": "size-5",
+        "linkTrailingIcon": "size-5"
+      },
+      "lg": {
+        "link": "px-3 py-2 text-sm gap-2",
+        "linkLeadingIcon": "size-5",
+        "linkTrailingIcon": "size-5"
+      },
+      "xl": {
+        "link": "px-3 py-2 text-base gap-2",
+        "linkLeadingIcon": "size-6",
+        "linkTrailingIcon": "size-6"
+      }
+    },
+    "selected": {
+      "true": {
+        "link": "before:bg-(--ui-bg-elevated)"
+      },
+      "false": {
+        "link": [
+          "hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50",
+          "transition-colors before:transition-colors"
+        ]
+      }
+    },
+    "disabled": {
+      "true": {
+        "link": "cursor-not-allowed opacity-75"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "selected": true,
+      "class": {
+        "link": "text-(--ui-primary)"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "selected": true,
+      "class": {
+        "link": "text-(--ui-secondary)"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "selected": true,
+      "class": {
+        "link": "text-(--ui-success)"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "selected": true,
+      "class": {
+        "link": "text-(--ui-info)"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "selected": true,
+      "class": {
+        "link": "text-(--ui-warning)"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "selected": true,
+      "class": {
+        "link": "text-(--ui-error)"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "selected": true,
+      "class": {
+        "link": "text-(--ui-text-highlighted)"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "color": "primary" as typeof color[number],
+    "size": "md" as typeof size[number]
+  }
+}

package/.nuxt/ui.css

@@ -0,0 +1,92 @@
+@source "./ui";
+
+@theme default static {
+  --color-old-neutral-50: oklch(0.985 0 0);
+  --color-old-neutral-100: oklch(0.97 0 0);
+  --color-old-neutral-200: oklch(0.922 0 0);
+  --color-old-neutral-300: oklch(0.87 0 0);
+  --color-old-neutral-400: oklch(0.708 0 0);
+  --color-old-neutral-500: oklch(0.556 0 0);
+  --color-old-neutral-600: oklch(0.439 0 0);
+  --color-old-neutral-700: oklch(0.371 0 0);
+  --color-old-neutral-800: oklch(0.269 0 0);
+  --color-old-neutral-900: oklch(0.205 0 0);
+  --color-old-neutral-950: oklch(0.145 0 0);
+  --color-primary-50: var(--ui-color-primary-50);
+	--color-primary-100: var(--ui-color-primary-100);
+	--color-primary-200: var(--ui-color-primary-200);
+	--color-primary-300: var(--ui-color-primary-300);
+	--color-primary-400: var(--ui-color-primary-400);
+	--color-primary-500: var(--ui-color-primary-500);
+	--color-primary-600: var(--ui-color-primary-600);
+	--color-primary-700: var(--ui-color-primary-700);
+	--color-primary-800: var(--ui-color-primary-800);
+	--color-primary-900: var(--ui-color-primary-900);
+	--color-primary-950: var(--ui-color-primary-950);
+	--color-secondary-50: var(--ui-color-secondary-50);
+	--color-secondary-100: var(--ui-color-secondary-100);
+	--color-secondary-200: var(--ui-color-secondary-200);
+	--color-secondary-300: var(--ui-color-secondary-300);
+	--color-secondary-400: var(--ui-color-secondary-400);
+	--color-secondary-500: var(--ui-color-secondary-500);
+	--color-secondary-600: var(--ui-color-secondary-600);
+	--color-secondary-700: var(--ui-color-secondary-700);
+	--color-secondary-800: var(--ui-color-secondary-800);
+	--color-secondary-900: var(--ui-color-secondary-900);
+	--color-secondary-950: var(--ui-color-secondary-950);
+	--color-success-50: var(--ui-color-success-50);
+	--color-success-100: var(--ui-color-success-100);
+	--color-success-200: var(--ui-color-success-200);
+	--color-success-300: var(--ui-color-success-300);
+	--color-success-400: var(--ui-color-success-400);
+	--color-success-500: var(--ui-color-success-500);
+	--color-success-600: var(--ui-color-success-600);
+	--color-success-700: var(--ui-color-success-700);
+	--color-success-800: var(--ui-color-success-800);
+	--color-success-900: var(--ui-color-success-900);
+	--color-success-950: var(--ui-color-success-950);
+	--color-info-50: var(--ui-color-info-50);
+	--color-info-100: var(--ui-color-info-100);
+	--color-info-200: var(--ui-color-info-200);
+	--color-info-300: var(--ui-color-info-300);
+	--color-info-400: var(--ui-color-info-400);
+	--color-info-500: var(--ui-color-info-500);
+	--color-info-600: var(--ui-color-info-600);
+	--color-info-700: var(--ui-color-info-700);
+	--color-info-800: var(--ui-color-info-800);
+	--color-info-900: var(--ui-color-info-900);
+	--color-info-950: var(--ui-color-info-950);
+	--color-warning-50: var(--ui-color-warning-50);
+	--color-warning-100: var(--ui-color-warning-100);
+	--color-warning-200: var(--ui-color-warning-200);
+	--color-warning-300: var(--ui-color-warning-300);
+	--color-warning-400: var(--ui-color-warning-400);
+	--color-warning-500: var(--ui-color-warning-500);
+	--color-warning-600: var(--ui-color-warning-600);
+	--color-warning-700: var(--ui-color-warning-700);
+	--color-warning-800: var(--ui-color-warning-800);
+	--color-warning-900: var(--ui-color-warning-900);
+	--color-warning-950: var(--ui-color-warning-950);
+	--color-error-50: var(--ui-color-error-50);
+	--color-error-100: var(--ui-color-error-100);
+	--color-error-200: var(--ui-color-error-200);
+	--color-error-300: var(--ui-color-error-300);
+	--color-error-400: var(--ui-color-error-400);
+	--color-error-500: var(--ui-color-error-500);
+	--color-error-600: var(--ui-color-error-600);
+	--color-error-700: var(--ui-color-error-700);
+	--color-error-800: var(--ui-color-error-800);
+	--color-error-900: var(--ui-color-error-900);
+	--color-error-950: var(--ui-color-error-950);
+	--color-neutral-50: var(--ui-color-neutral-50);
+	--color-neutral-100: var(--ui-color-neutral-100);
+	--color-neutral-200: var(--ui-color-neutral-200);
+	--color-neutral-300: var(--ui-color-neutral-300);
+	--color-neutral-400: var(--ui-color-neutral-400);
+	--color-neutral-500: var(--ui-color-neutral-500);
+	--color-neutral-600: var(--ui-color-neutral-600);
+	--color-neutral-700: var(--ui-color-neutral-700);
+	--color-neutral-800: var(--ui-color-neutral-800);
+	--color-neutral-900: var(--ui-color-neutral-900);
+	--color-neutral-950: var(--ui-color-neutral-950);
+}

package/README.md

@@ -1,4 +1,8 @@
-[![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5">
+  <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+  <img alt="Nuxt UI" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+</picture>
 
 # Nuxt UI
 
@@ -7,10 +11,10 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Radix Vue](https://www.radix-vue.com/), [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
+We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
 
 > [!NOTE]
-> You are on the `v3` development branch, check out the [dev branch](https://github.com/nuxt/ui) for Nuxt UI v2.
+> You are on the `v3` development branch, check out the [dev branch](https://github.com/nuxt/ui/tree/dev) for Nuxt UI v2.
 
 ## Documentation
 
@@ -47,7 +51,7 @@ export default defineNuxtConfig({
 2. Import Tailwind CSS and Nuxt UI in your CSS:
 
 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 ```
 
@@ -74,11 +78,18 @@ export default defineConfig({
 
 ```ts [main.ts]
 import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
 import ui from '@nuxt/ui/vue-plugin'
 import App from './App.vue'
 
 const app = createApp(App)
 
+const router = createRouter({
+  routes: [],
+  history: createWebHistory()
+})
+
+app.use(router)
 app.use(ui)
 
 app.mount('#app')
@@ -87,7 +98,7 @@ app.mount('#app')
 3. Import Tailwind CSS and Nuxt UI in your CSS:
 
 ```css [assets/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
 @import "@nuxt/ui";
 ```
 
@@ -99,13 +110,13 @@ Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/inst
 - [nuxt/icon](https://github.com/nuxt/icon)
 - [nuxt/fonts](https://github.com/nuxt/fonts)
 - [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
-- [radix-vue/radix-vue](https://github.com/radix-vue/radix-vue)
+- [unovue/reka-ui](https://github.com/unovue/reka-ui)
 - [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
 - [vueuse/vueuse](https://github.com/vueuse/vueuse)
 
 ## License
 
-Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
+Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/next.svg?style=flat&colorA=18181B&colorB=28CF8D
@@ -115,7 +126,7 @@ Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md)
 [npm-downloads-href]: https://npm.chart.dev/@nuxt/ui
 
 [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE.md
+[license-href]: https://github.com/nuxt/ui/blob/v3/LICENSE.md
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/cli/commands/make/component.mjs

@@ -32,6 +32,10 @@ export default defineCommand({
     content: {
       type: 'boolean',
       description: 'Create a content component (with --pro).'
+    },
+    template: {
+      type: 'string',
+      description: 'Only generate template.'
     }
   },
   async setup({ args }) {
@@ -53,6 +57,10 @@ export default defineCommand({
     const path = resolve('.')
 
     for (const template of Object.keys(templates)) {
+      if (args.template && template !== args.template) {
+        continue
+      }
+
       const { filename, contents } = templates[template](args)
       if (!contents) {
         continue
@@ -70,6 +78,10 @@ export default defineCommand({
       consola.success(`🪄 Generated ${filePath}!`)
     }
 
+    if (args.template) {
+      return
+    }
+
     const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}${args.content ? 'content/' : ''}index.ts`)
     await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
     await sortFile(themePath)

package/cli/package.json

@@ -6,8 +6,8 @@
   },
   "dependencies": {
     "citty": "^0.1.6",
-    "consola": "^3.2.3",
-    "pathe": "^1.1.2",
+    "consola": "^3.4.0",
+    "pathe": "^2.0.3",
     "scule": "^1.3.0"
   }
 }