Merge remote-tracking branch 'origin/v3' into feat/update-showcase

.github/workflows/docs.yml

@@ -42,8 +42,6 @@ jobs:
 
       - name: Build application
         run: pnpm run docs:build
-        env:
-          NODE_OPTIONS: '--max-old-space-size=8192'
 
       - name: Deploy to NuxtHub
         uses: nuxt-hub/action@v1

.github/workflows/module.yml

@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest] # macos-latest
+        os: [ubuntu-latest] # macos-latest, windows-latest
         node: [22]
 
     env:
@@ -65,7 +65,6 @@ jobs:
         run: pnpm run dev:vue:build
 
       - name: Publish
-        if: matrix.os != 'windows-latest'
         run: pnpx pkg-pr-new publish --compact --no-template --pnpm
 
   starter-nuxt:

.npmrc

@@ -1,3 +1,4 @@
 shamefully-hoist=true
 auto-install-peers=true
 ignore-workspace-root-check=true
+shell-emulator=true

build.config.ts

@@ -7,13 +7,10 @@ export default defineBuildConfig({
     './src/vite'
   ],
   rollup: {
-    replace: {
-      delimiters: ['', ''],
-      values: {
-        // Used in development to import directly from theme
-        'const isUiDev = true': 'const isUiDev = false'
-      }
-    }
+    emitCJS: true
+  },
+  replace: {
+    'process.env.DEV': 'false'
   },
   hooks: {
     'mkdist:entry:options'(ctx, entry, options) {

cli/templates.mjs

@@ -31,10 +31,13 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+import { tv } from '../utils/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
 
 export interface ${upperName}Props {
   /**
@@ -43,7 +46,7 @@ export interface ${upperName}Props {
    */
   as?: any
   class?: any
-  ui?: ${upperName}['slots']
+  ui?: Partial<typeof ${camelName}.slots>
 }
 
 export interface ${upperName}Slots {
@@ -52,17 +55,12 @@ export interface ${upperName}Slots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
-import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
 
 const props = defineProps<${upperName}Props>()
 defineSlots<${upperName}Slots>()
 
-const appConfig = useAppConfig() as ${upperName}['AppConfig']
-
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = ${camelName}()
 </script>
 
 <template>
@@ -73,16 +71,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 `
       : `
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+import { tv } from '../utils/tv'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
+
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+
+type ${upperName}Variants = VariantProps<typeof ${camelName}>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any
-  ui?: ${upperName}['slots']
+  ui?: Partial<typeof ${camelName}.slots>
 }
 
 export interface ${upperName}Emits extends ${upperName}RootEmits {}
@@ -91,21 +95,16 @@ export interface ${upperName}Slots {}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { tv } from '../utils/tv'
 
 const props = defineProps<${upperName}Props>()
 const emits = defineEmits<${upperName}Emits>()
 const slots = defineSlots<${upperName}Slots>()
 
-const appConfig = useAppConfig() as ${upperName}['AppConfig']
-
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = ${camelName}()
 </script>
 
 <template>

docs/app/app.vue

@@ -85,5 +85,5 @@ provide('navigation', mappedNavigation)
 </template>
 
 <style>
-/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 max-h-[341px] */
+/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 */
 </style>

docs/app/components/content/ComponentCode.vue

@@ -328,7 +328,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 
 <template>
   <div class="my-5">
-    <div class="relative">
+    <div>
       <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField

docs/app/components/content/SupportedLanguages.vue

@@ -22,7 +22,6 @@ function getEmojiFlag(locale: string): string {
     hi: 'in', // Hindi -> India
     hy: 'am', // Armenian -> Armenia
     ja: 'jp', // Japanese -> Japan
-    kk: 'kz', // Kazakh -> Kazakhstan
     km: 'kh', // Khmer -> Cambodia
     ko: 'kr', // Korean -> South Korea
     nb: 'no', // Norwegian Bokmål -> Norway

docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue

@@ -11,6 +11,7 @@ const items = shallowRef<AccordionItem[]>([
   {
     label: 'Colors',
     icon: 'i-lucide-swatch-book',
+    slot: 'colors' as const,
     content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {

docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue

@@ -1,35 +1,26 @@
 <script setup lang="ts">
 import type { BreadcrumbItem } from '@nuxt/ui'
 
-const items = [
-  {
-    label: 'Home',
-    to: '/'
-  },
-  {
-    slot: 'dropdown' as const,
-    icon: 'i-lucide-ellipsis',
-    children: [
-      {
-        label: 'Documentation'
-      },
-      {
-        label: 'Themes'
-      },
-      {
-        label: 'GitHub'
-      }
-    ]
-  },
-  {
-    label: 'Components',
-    to: '/components'
-  },
-  {
-    label: 'Breadcrumb',
-    to: '/components/breadcrumb'
-  }
-] satisfies BreadcrumbItem[]
+const items = [{
+  label: 'Home',
+  to: '/'
+}, {
+  slot: 'dropdown' as const,
+  icon: 'i-lucide-ellipsis',
+  children: [{
+    label: 'Documentation'
+  }, {
+    label: 'Themes'
+  }, {
+    label: 'GitHub'
+  }]
+}, {
+  label: 'Components',
+  to: '/components'
+}, {
+  label: 'Breadcrumb',
+  to: '/components/breadcrumb'
+}] satisfies BreadcrumbItem[]
 </script>
 
 <template>

docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue

@@ -1,20 +1,16 @@
 <script setup lang="ts">
 import type { BreadcrumbItem } from '@nuxt/ui'
 
-const items: BreadcrumbItem[] = [
-  {
-    label: 'Home',
-    to: '/'
-  },
-  {
-    label: 'Components',
-    to: '/components'
-  },
-  {
-    label: 'Breadcrumb',
-    to: '/components/breadcrumb'
-  }
-]
+const items: BreadcrumbItem[] = [{
+  label: 'Home',
+  to: '/'
+}, {
+  label: 'Components',
+  to: '/components'
+}, {
+  label: 'Breadcrumb',
+  to: '/components/breadcrumb'
+}]
 </script>
 
 <template>

docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue

@@ -1,30 +1,23 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 
-const items: DropdownMenuItem[] = [
-  {
-    label: 'Team',
-    icon: 'i-lucide-users'
-  },
-  {
-    label: 'Invite users',
-    icon: 'i-lucide-user-plus',
-    children: [
-      {
-        label: 'Invite by email',
-        icon: 'i-lucide-send-horizontal'
-      },
-      {
-        label: 'Invite by link',
-        icon: 'i-lucide-link'
-      }
-    ]
-  },
-  {
-    label: 'New team',
-    icon: 'i-lucide-plus'
-  }
-]
+const items: DropdownMenuItem[] = [{
+  label: 'Team',
+  icon: 'i-lucide-users'
+}, {
+  label: 'Invite users',
+  icon: 'i-lucide-user-plus',
+  children: [{
+    label: 'Invite by email',
+    icon: 'i-lucide-send-horizontal'
+  }, {
+    label: 'Invite by link',
+    icon: 'i-lucide-link'
+  }]
+}, {
+  label: 'New team',
+  icon: 'i-lucide-plus'
+}]
 </script>
 
 <template>

docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

@@ -1,79 +1,76 @@
 <script setup lang="ts">
-const groups = [
-  {
-    id: 'settings',
-    items: [
-      {
-        label: 'Profile',
-        icon: 'i-lucide-user',
-        kbds: ['meta', 'P']
-      },
-      {
-        label: 'Billing',
-        icon: 'i-lucide-credit-card',
-        kbds: ['meta', 'B'],
-        slot: 'billing' as const
-      },
-      {
-        label: 'Notifications',
-        icon: 'i-lucide-bell'
-      },
-      {
-        label: 'Security',
-        icon: 'i-lucide-lock'
-      }
-    ]
-  },
-  {
-    id: 'users',
-    label: 'Users',
-    slot: 'users' as const,
-    items: [
-      {
-        label: 'Benjamin Canac',
-        suffix: 'benjamincanac',
-        to: 'https://github.com/benjamincanac',
-        target: '_blank'
-      },
-      {
-        label: 'Sylvain Marroufin',
-        suffix: 'smarroufin',
-        to: 'https://github.com/smarroufin',
-        target: '_blank'
-      },
-      {
-        label: 'Sébastien Chopin',
-        suffix: 'atinux',
-        to: 'https://github.com/atinux',
-        target: '_blank'
-      },
-      {
-        label: 'Romain Hamel',
-        suffix: 'romhml',
-        to: 'https://github.com/romhml',
-        target: '_blank'
-      },
-      {
-        label: 'Haytham A. Salama',
-        suffix: 'Haythamasalama',
-        to: 'https://github.com/Haythamasalama',
-        target: '_blank'
-      },
-      {
-        label: 'Daniel Roe',
-        suffix: 'danielroe',
-        to: 'https://github.com/danielroe',
-        target: '_blank'
-      },
-      {
-        label: 'Neil Richter',
-        suffix: 'noook',
-        to: 'https://github.com/noook',
-        target: '_blank'
-      }
-    ]
-  }
-]
+const groups = [{
+  id: 'settings',
+  items: [
+    {
+      label: 'Profile',
+      icon: 'i-lucide-user',
+      kbds: ['meta', 'P']
+    },
+    {
+      label: 'Billing',
+      icon: 'i-lucide-credit-card',
+      kbds: ['meta', 'B'],
+      slot: 'billing' as const
+    },
+    {
+      label: 'Notifications',
+      icon: 'i-lucide-bell'
+    },
+    {
+      label: 'Security',
+      icon: 'i-lucide-lock'
+    }
+  ]
+}, {
+  id: 'users',
+  label: 'Users',
+  slot: 'users' as const,
+  items: [
+    {
+      label: 'Benjamin Canac',
+      suffix: 'benjamincanac',
+      to: 'https://github.com/benjamincanac',
+      target: '_blank'
+    },
+    {
+      label: 'Sylvain Marroufin',
+      suffix: 'smarroufin',
+      to: 'https://github.com/smarroufin',
+      target: '_blank'
+    },
+    {
+      label: 'Sébastien Chopin',
+      suffix: 'atinux',
+      to: 'https://github.com/atinux',
+      target: '_blank'
+    },
+    {
+      label: 'Romain Hamel',
+      suffix: 'romhml',
+      to: 'https://github.com/romhml',
+      target: '_blank'
+    },
+    {
+      label: 'Haytham A. Salama',
+      suffix: 'Haythamasalama',
+      to: 'https://github.com/Haythamasalama',
+      target: '_blank'
+    },
+    {
+      label: 'Daniel Roe',
+      suffix: 'danielroe',
+      to: 'https://github.com/danielroe',
+      target: '_blank'
+    },
+    {
+      label: 'Neil Richter',
+      suffix: 'noook',
+      to: 'https://github.com/noook',
+      target: '_blank'
+    }
+  ]
+}]
 </script>
 
 <template>

docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

@@ -3,18 +3,14 @@ import type { ContextMenuItem } from '@nuxt/ui'
 
 const loading = ref(true)
 
-const items = [
-  {
-    label: 'Refresh the Page',
-    slot: 'refresh' as const
-  },
-  {
-    label: 'Clear Cookies and Refresh'
-  },
-  {
-    label: 'Clear Cache and Refresh'
-  }
-] satisfies ContextMenuItem[]
+const items: ContextMenuItem[] = [{
+  label: 'Refresh the Page',
+  slot: 'refresh'
+}, {
+  label: 'Clear Cookies and Refresh'
+}, {
+  label: 'Clear Cache and Refresh'
+}]
 </script>
 
 <template>

docs/app/components/content/examples/form/FormExampleBasic.vue

@@ -14,7 +14,7 @@ const validate = (state: any): FormError[] => {
 }
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<typeof state>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -34,10 +34,9 @@ const schema = z.object({
   pin: z.string().regex(/^\d$/).array().length(5)
 })
 
-type Input = z.input<typeof schema>
-type Output = z.output<typeof schema>
+type Schema = z.input<typeof schema>
 
-const state = reactive<Partial<Input>>({})
+const state = reactive<Partial<Schema>>({})
 
 const form = useTemplateRef('form')
 
@@ -48,7 +47,7 @@ const items = [
 ]
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<Output>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

docs/app/components/content/examples/form/FormExampleJoi.vue

@@ -15,7 +15,7 @@ const state = reactive({
 })
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<typeof state>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

docs/app/components/content/examples/form/FormExampleNested.vue

@@ -18,7 +18,7 @@ type NestedSchema = z.output<typeof nestedSchema>
 const state = reactive<Partial<Schema & NestedSchema>>({ })
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
@@ -39,7 +39,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       <UCheckbox v-model="state.news" name="news" label="Register to our newsletter" @update:model-value="state.email = undefined" />
     </div>
 
-    <UForm v-if="state.news" :state="state" :schema="nestedSchema" nested>
+    <UForm v-if="state.news" :state="state" :schema="nestedSchema">
       <UFormField label="Email" name="email">
         <UInput v-model="state.email" placeholder="john@lennon.com" />
       </UFormField>

docs/app/components/content/examples/form/FormExampleNestedList.vue

@@ -34,7 +34,7 @@ function removeItem() {
 
 const toast = useToast()
 
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
@@ -51,14 +51,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       <UInput v-model="state.customer" placeholder="Wonka Industries" />
     </UFormField>
 
-    <UForm
-      v-for="item, count in state.items"
-      :key="count"
-      :state="item"
-      :schema="itemSchema"
-      nested
-      class="flex gap-2"
-    >
+    <UForm v-for="item, count in state.items" :key="count" :state="item" :schema="itemSchema" class="flex gap-2">
       <UFormField :label="!count ? 'Description' : undefined" name="description">
         <UInput v-model="item.description" />
       </UFormField>

docs/app/components/content/examples/form/FormExampleOnError.vue

@@ -14,7 +14,7 @@ const validate = (state: any): FormError[] => {
 }
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<typeof state>) {
+async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
-const items = [
+const items: NavigationMenuItem[] = [
   {
     label: 'Guide',
     icon: 'i-lucide-book-open'
+
   },
   {
     label: 'Composables',
     icon: 'i-lucide-database'
+
   },
   {
     label: 'Components',
     icon: 'i-lucide-box',
-    slot: 'components' as const
+    slot: 'components'
   }
-] satisfies NavigationMenuItem[]
+]
 </script>
 
 <template>

docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue

@@ -40,7 +40,7 @@ const label = ref([])
         multiple
         placeholder="Search labels..."
         :groups="[{ id: 'labels', items }]"
-        :ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
+        :ui="{ input: '[&>input]:h-8' }"
       />
     </template>
   </UPopover>

docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { StepperItem } from '@nuxt/ui'
 
-const items = [
+const items: StepperItem[] = [
   {
-    slot: 'address' as const,
+    slot: 'address',
     title: 'Address',
     description: 'Add your address here',
     icon: 'i-lucide-house'
   }, {
-    slot: 'shipping' as const,
+    slot: 'shipping',
     title: 'Shipping',
     description: 'Set your preferred shipping method',
     icon: 'i-lucide-truck'
   }, {
-    slot: 'checkout' as const,
+    slot: 'checkout',
     title: 'Checkout',
     description: 'Confirm your order'
   }
-] satisfies StepperItem[]
+]
 </script>
 
 <template>

docs/app/components/content/examples/stepper/StepperWithControlsExample.vue

@@ -3,14 +3,17 @@ import type { StepperItem } from '@nuxt/ui'
 
 const items: StepperItem[] = [
   {
+    slot: 'address',
     title: 'Address',
     description: 'Add your address here',
     icon: 'i-lucide-house'
   }, {
+    slot: 'shipping',
     title: 'Shipping',
     description: 'Set your preferred shipping method',
     icon: 'i-lucide-truck'
   }, {
+    slot: 'checkout',
     title: 'Checkout',
     description: 'Confirm your order'
   }

docs/app/components/content/examples/tree/TreeCustomSlotExample.vue

@@ -6,23 +6,21 @@ const items = [
     label: 'app/',
     slot: 'app' as const,
     defaultExpanded: true,
-    children: [
-      {
-        label: 'composables/',
-        children: [
-          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-        ]
-      },
-      {
-        label: 'components/',
-        defaultExpanded: true,
-        children: [
-          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-        ]
-      }
-    ]
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeExpandedExample.vue

@@ -5,24 +5,22 @@ const items: TreeItem[] = [
   {
     label: 'app/',
     value: 'app',
-    children: [
-      {
-        label: 'composables/',
-        value: 'composables',
-        children: [
-          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-        ]
-      },
-      {
-        label: 'components/',
-        value: 'components',
-        children: [
-          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-        ]
-      }
-    ]
+    children: [{
+      label: 'composables/',
+      value: 'composables',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      value: 'components',
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeModelValueExample.vue

@@ -5,23 +5,21 @@ const items: TreeItem[] = [
   {
     label: 'app/',
     defaultExpanded: true,
-    children: [
-      {
-        label: 'composables/',
-        children: [
-          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-        ]
-      },
-      {
-        label: 'components/',
-        defaultExpanded: true,
-        children: [
-          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-        ]
-      }
-    ]
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeOnSelectExample.vue

@@ -8,23 +8,21 @@ const items: TreeItem[] = [
     onSelect: (e: Event) => {
       e.preventDefault()
     },
-    children: [
-      {
-        label: 'composables/',
-        children: [
-          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-        ]
-      },
-      {
-        label: 'components/',
-        defaultExpanded: true,
-        children: [
-          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-        ]
-      }
-    ]
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeOnToggleExample.vue

@@ -8,23 +8,21 @@ const items: TreeItem[] = [
     onToggle: (e: Event) => {
       e.preventDefault()
     },
-    children: [
-      {
-        label: 'composables/',
-        children: [
-          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-        ]
-      },
-      {
-        label: 'components/',
-        defaultExpanded: true,
-        children: [
-          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-        ]
-      }
-    ]
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/pages/[...slug].vue

@@ -67,9 +67,9 @@ if (!import.meta.prerender) {
 
 const type = page.value?.path.includes('components') ? 'Vue Component ' : page.value?.path.includes('composables') ? 'Vue Composable ' : ''
 useSeoMeta({
-  titleTemplate: `%s ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} ${page.value.framework === 'vue' ? ' for Vue' : ''}`,
+  titleTemplate: `%s ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} v3${page.value.framework === 'vue' ? ' for Vue' : ''}`,
   title: page.value.navigation?.title ? page.value.navigation.title : page.value.title,
-  ogTitle: `${page.value.navigation?.title ? page.value.navigation.title : page.value.title} ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} ${page.value.framework === 'vue' ? ' for Vue' : ''}`,
+  ogTitle: `${page.value.navigation?.title ? page.value.navigation.title : page.value.title} ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} v3${page.value.framework === 'vue' ? ' for Vue' : ''}`,
   description: page.value.description,
   ogDescription: page.value.description
 })

docs/app/pages/components.vue

@@ -7,7 +7,7 @@ const title = 'Vue Components'
 const description = 'Explore 99+ customizable UI components for Vue and Nuxt built with Tailwind CSS and Reka UI.'
 
 useSeoMeta({
-  titleTemplate: '%s - Nuxt UI',
+  titleTemplate: `%s - Nuxt UI`,
   title,
   description,
   ogTitle: `${title} - Nuxt UI`,

docs/app/pages/figma/index.vue

@@ -5,7 +5,6 @@ import { animate } from 'motion-v'
 import { joinURL } from 'ufo'
 
 const { url } = useSiteConfig()
-
 useSeoMeta({
   title: page.title,
   description: page.description,

docs/app/pages/pro/activate.vue

@@ -12,7 +12,7 @@ const { url } = useSiteConfig()
 useSeoMeta({
   title,
   description,
-  ogTitle: title,
+  ogTitle: `${title} - Nuxt UI Pro`,
   ogDescription: description,
   ogImage: joinURL(url, '/pro/og-image.png')
 })
@@ -33,7 +33,7 @@ const activating = ref(false)
 const successMessage = ref()
 const errorMessage = ref('')
 
-async function submit(event: FormSubmitEvent<Schema>) {
+async function submit(event: FormSubmitEvent<any>) {
   activating.value = true
   errorMessage.value = ''
   successMessage.value = ''

docs/app/pages/pro/index.vue

@@ -9,10 +9,10 @@ const { url } = useSiteConfig()
 
 useSeoMeta({
   title: page.title,
-  description: page.description,
   ogTitle: page.title,
-  ogDescription: page.description,
-  ogImage: joinURL(url, '/pro/og-image.png')
+  ogImage: joinURL(url, '/pro/og-image.png'),
+  description: page.description,
+  ogDescription: page.description
 })
 </script>
 

docs/app/pages/pro/pricing.vue

@@ -7,8 +7,8 @@ const { url } = useSiteConfig()
 
 useSeoMeta({
   title: page.title,
-  description: page.description,
   ogTitle: page.title,
+  description: page.description,
   ogDescription: page.description,
   ogImage: joinURL(url, '/pro/og-image.png')
 })

docs/app/pages/pro/terms.vue

@@ -13,7 +13,7 @@ const description = page.value.description
 useSeoMeta({
   title,
   description,
-  ogTitle: title,
+  ogTitle: `${title} - Nuxt UI Pro`,
   ogDescription: description,
   ogImage: joinURL(url, '/pro/og-image.png')
 })

docs/app/pages/roadmap.vue

@@ -5,9 +5,8 @@ const description = 'Discover our Volta board for @nuxt/ui development status.'
 useSeoMeta({
   titleTemplate: '%s - Nuxt UI',
   title,
-  description,
-  ogTitle: `${title} - Nuxt UI`,
-  ogDescription: description
+  ogTitle: 'Nuxt UI Roadmap',
+  description
 })
 
 defineOgImageComponent('Docs', {

docs/app/pages/showcase.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
+import { joinURL } from 'ufo'
+
 const { data: page } = await useAsyncData('showcase', () => queryCollection('showcase').first())
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
+const { url } = useSiteConfig()
+
 useSeoMeta({
   titleTemplate: `%s - Nuxt UI`,
   title: page.value.title,
   description: page.value.description,
   ogTitle: `${page.value.title} - Nuxt UI`,
-  ogDescription: page.value.description
-})
-
-defineOgImageComponent('Docs', {
-  headline: 'Community'
+  ogDescription: page.value.description,
+  ogImage: joinURL(url, '/og-image.png')
 })
 </script>
 
@@ -55,14 +56,14 @@ defineOgImageComponent('Docs', {
               :modifiers="{
                 position: 'top'
               }"
-              class="aspect-[16/9] size-full opacity-75 group-hover:opacity-100 group-hover:scale-110 duration-200 transition-[scale,opacity] pointer-events-none"
+              class="aspect-[16/9] size-full opacity-100 group-hover:opacity-70 group-hover:scale-110 duration-200 transition-[scale,opacity] pointer-events-none"
             />
 
-            <div class="absolute flex items-center px-2.5 py-0.75 gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none bg-black/90 rounded-full">
-              <span class="text-sm text-white font-medium">
+            <div class="absolute flex items-center px-2.5 py-0.75 gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none bg-white rounded-full">
+              <span class="text-sm font-medium text-black">
                 {{ item.name }}
               </span>
-              <UIcon name="i-lucide-arrow-up-right" class="size-4 shrink-0 text-white" />
+              <UIcon name="i-lucide-arrow-up-right" class="size-4 shrink-0 text-black" />
             </div>
           </li>
         </ul>

docs/app/pages/team.vue

@@ -5,9 +5,8 @@ const description = 'The development of Nuxt UI is led by a community of develop
 useSeoMeta({
   titleTemplate: '%s - Nuxt UI',
   title,
-  description,
-  ogTitle: `${title} - Nuxt UI`,
-  ogDescription: description
+  ogTitle: 'Nuxt UI Team',
+  description
 })
 
 defineOgImageComponent('Docs', {

docs/app/workers/prettier.js

@@ -16,12 +16,12 @@ function handleMessage(message) {
 async function handleFormatMessage(message) {
   if (!globalThis.prettier) {
     await Promise.all([
-      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/standalone.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/babel.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/estree.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/html.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/markdown.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/typescript.js')
+      import('https://unpkg.com/prettier@3.5.2/standalone.js'),
+      import('https://unpkg.com/prettier@3.5.2/plugins/babel.js'),
+      import('https://unpkg.com/prettier@3.5.2/plugins/estree.js'),
+      import('https://unpkg.com/prettier@3.5.2/plugins/html.js'),
+      import('https://unpkg.com/prettier@3.5.2/plugins/markdown.js'),
+      import('https://unpkg.com/prettier@3.5.2/plugins/typescript.js')
     ])
   }
 

docs/content.config.ts

@@ -69,6 +69,7 @@ export const collections = {
       items: z.array(z.object({
         name: z.string(),
         url: z.string(),
+        github: z.string().optional(),
         screenshotUrl: z.string().optional(),
         screenshotOptions: z.object({
           delay: z.number()

docs/content/1.getting-started/2.migration.md

@@ -180,7 +180,7 @@ In Nuxt UI v2, we had a mix between a design system with `primary`, `gray`, `err
 
 This change introduces several breaking changes that you need to be aware of:
 
-- The `gray` color has been renamed to `neutral`
+1. The `gray` color has been renamed to `neutral`
 
 ```diff
 <template>
@@ -203,7 +203,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 ```
 ::
 
-- The `DEFAULT` shade that let you write `text-primary` no longer exists, you can use [color shades](/getting-started/theme#color-shades) instead:
+2. The `DEFAULT` shade that let you write `text-primary` no longer exists, you can use [color shades](/getting-started/theme#color-shades) instead:
 
 ```diff
 <template>
@@ -212,7 +212,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 </template>
 ```
 
-- The `gray`, `black` and `white` in the `color` props have been removed in favor of `neutral`:
+3. The `gray`, `black` and `white` in the `color` props have been removed in favor of `neutral`:
 
 ```diff
 - <UButton color="black" />
@@ -225,7 +225,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 + <UButton color="neutral" variant="outline" />
 ```
 
-- You can no longer use Tailwind CSS colors in the `color` props, use the new aliases instead:
+4. You can no longer use Tailwind CSS colors in the `color` props, use the new aliases instead:
 
 ```diff
 - <UButton color="red" />
@@ -236,7 +236,7 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 Learn how to extend the design system to add new color aliases.
 ::
 
-- The color configuration in `app.config.ts` has been moved into a `colors` object:
+5. The color configuration in `app.config.ts` has been moved into a `colors` object:
 
 ```diff
 export default defineAppConfig({
@@ -255,7 +255,7 @@ export default defineAppConfig({
 
 Nuxt UI components are now styled using the [Tailwind Variants API](/getting-started/theme#components-theme), which makes all the overrides you made using the `app.config.ts` and the `ui` prop obsolete.
 
-- Update your [`app.config.ts`](/getting-started/theme#config) to override components with their new theme:
+1. Update your [`app.config.ts`](/getting-started/theme#config) to override components with their new theme:
 
 ```diff
 export default defineAppConfig({
@@ -278,7 +278,7 @@ export default defineAppConfig({
 })
 ```
 
-- Update your [`ui` props](/getting-started/theme#props) to override each component's slots using their new theme:
+2. Update your [`ui` props](/getting-started/theme#props) to override each component's slots using their new theme:
 
 ```diff
 <template>
@@ -351,7 +351,7 @@ Here are the Nuxt UI Pro components that have been renamed or removed:
 
 In addition to the renamed components, there are lots of changes to the components API. Let's detail the most important ones:
 
-- The `links` and `options` props have been renamed to `items` for consistency:
+1. The `links` and `options` props have been renamed to `items` for consistency:
 
 ```diff
 <template>
@@ -367,25 +367,7 @@ In addition to the renamed components, there are lots of changes to the componen
 This change affects the following components: `Breadcrumb`, `HorizontalNavigation`, `InputMenu`, `RadioGroup`, `Select`, `SelectMenu`, `VerticalNavigation`.
 ::
 
-- The `click` field in different components has been removed in favor of the native Vue `onClick` event:
-
-```diff
-<script setup lang="ts">
-const items = [{
-  label: 'Edit',
--  click: () => {
-+  onClick: () => {
-    console.log('Edit')
-  }
-}]
-</script>
-```
-
-::note
-This change affects the `Toast` component as well as all component that have `items` links like `NavigationMenu`, `DropdownMenu`, `CommandPalette`, etc.
-::
-
-- The global `Modals`, `Slideovers` and `Notifications` components have been removed in favor the [App](/components/app) component:
+2. The global `Modals`, `Slideovers` and `Notifications` components have been removed in favor the [App](/components/app) component:
 
 ```diff [app.vue]
 <template>
@@ -398,7 +380,7 @@ This change affects the `Toast` component as well as all component that have `it
 </template>
 ```
 
-- The `v-model:open` directive and `default-open` prop are now used to control visibility:
+3. The `v-model:open` directive and `default-open` prop are now used to control visibility:
 
 ```diff
 <template>
@@ -411,7 +393,7 @@ This change affects the `Toast` component as well as all component that have `it
 This change affects the following components: `ContextMenu`, `Modal` and `Slideover` and enables controlling visibility for `InputMenu`, `Select`, `SelectMenu` and `Tooltip`.
 ::
 
-- The default slot is now used for the trigger and the content goes inside the `#content` slot (you don't need to use a `v-model:open` directive with this method):
+4. The default slot is now used for the trigger and the content goes inside the `#content` slot (you don't need to use a `v-model:open` directive with this method):
 
 ```diff
 <script setup lang="ts">
@@ -438,7 +420,7 @@ This change affects the following components: `ContextMenu`, `Modal` and `Slideo
 This change affects the following components: `Modal`, `Popover`, `Slideover`, `Tooltip`.
 ::
 
-- A `#header`, `#body` and `#footer` slots have been added inside the `#content` slot like the `Card` component:
+5. A `#header`, `#body` and `#footer` slots have been added inside the `#content` slot like the `Card` component:
 
 ```diff
 <template>
@@ -457,9 +439,10 @@ This change affects the following components: `Modal`, `Popover`, `Slideover`, `
 This change affects the following components: `Modal`, `Slideover`.
 ::
 
+
 ### Changed composables
 
-- The `useToast()` composable `timeout` prop has been renamed to `duration`:
+1. The `useToast()` composable `timeout` prop has been renamed to `duration`:
 
 ```diff
 <script setup lang="ts">
@@ -470,7 +453,7 @@ const toast = useToast()
 </script>
 ```
 
-- The `useModal` and `useSlideover` composables have been removed in favor of a more generic `useOverlay` composable:
+2. The `useModal` and `useSlideover` composables have been removed in favor of a more generic `useOverlay` composable:
 
 Some important differences:
 - The `useOverlay` composable is now used to create overlay instances

docs/content/3.components/context-menu.md

@@ -32,7 +32,6 @@ Use the `items` prop as an array of objects with the following properties:
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `onSelect?(e: Event): void`{lang="ts-type"}
 - [`onUpdateChecked?(checked: boolean): void`{lang="ts-type"}](#with-checkbox-items)
-- `children?: ContextMenuItem[] | ContextMenuItem[][]`{lang="ts-type"}
 
 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
 

docs/content/3.components/dropdown-menu.md

@@ -32,7 +32,6 @@ Use the `items` prop as an array of objects with the following properties:
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `onSelect?(e: Event): void`{lang="ts-type"}
 - [`onUpdateChecked?(checked: boolean): void`{lang="ts-type"}](#with-checkbox-items)
-- `children?: DropdownMenuItem[] | DropdownMenuItem[][]`{lang="ts-type"}
 
 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
 

docs/content/3.components/form.md

@@ -32,7 +32,7 @@ It requires two props:
     class: 'w-60'
   ---
   ::
-
+  
   ::component-example{label="Zod"}
   ---
   name: 'form-example-zod'
@@ -206,7 +206,3 @@ This will give you access to the following:
 | `dirtyFields`{lang="ts-type"} | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields that have been modified by the user. |
 | `touchedFields`{lang="ts-type"} | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields that the user interacted with. |
 | `blurredFields`{lang="ts-type"} | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields blurred by the user. |
-
-## Theme
-
-:component-theme

docs/content/3.components/navigation-menu.md

@@ -28,7 +28,6 @@ Use the `items` prop as an array of objects with the following properties:
 - `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `onSelect?(e: Event): void`{lang="ts-type"}
-- `children?: NavigationMenuChildItem[]`{lang="ts-type"}
 
 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
 

docs/content/showcase.yml

@@ -5,49 +5,32 @@ hero:
   title: Showcase
   description: Discover our selection of projects built with Nuxt UI.
 items:
-  - name: Details
-    url: https://details.team/
-  - name: Directus Docs
-    url: https://docs.directus.io/
-  - name: Espace Asso by Benevolt
-    url: https://asso.benevolt.fr/
-  - name: Juno.one
-    url: https://www.juno.one/
-  - name: Kassebil
-    url: https://kassebil.dk/
-  - name: LearnVue
-    url: https://learnvue.co/
-  - name: Mawrble
-    url: https://mawrble.com/
-  - name: Meet Sponsors
-    url: https://meetsponsors.com/
   - name: Ovatu
     url: https://ovatu.com/
-  - name: Pallyy
-    url: https://pallyy.com/
-  - name: Passionate People
-    url: https://passionatepeople.io/
-  - name: Postal
-    url: https://postalserver.io/
-  - name: Prismos
-    url: https://prismos.co/
-  - name: Readyy
-    url: https://readyy.app/
-  - name: Sagematt
-    url: https://siedlung-sagematt.ch/
   - name: Shelve
-    url: https://shelve.cloud/
-  - name: Speaker Bot
-    url: https://speaker.bot/
+    url: https://shelve.cloud
+    github: https://github.com/hugorcd/shelve
+  - name: Uneed
+    url: https://uneed.best/
+  - name: Details
+    url: https://details.team/
+  - name: Espace Asso by Benevolt
+    url: https://asso.benevolt.fr/
+  - name: Directus Docs
+    url: https://docs.directus.io/
   - name: Super SaaS
     url: https://supersaas.dev/
+  - name: Passionate People
+    url: https://passionatepeople.io/
   - name: The Companies API
     url: https://www.thecompaniesapi.com/
   - name: Thuprai
     url: https://thuprai.com/
-  - name: Uneed
-    url: https://uneed.best/
-  - name: Wiredash
-    url: https://wiredash.com/
-  - name: Zielgestalt
-    url: https://zielgestalt.de/
+  - name: Juno.one
+    url: https://www.juno.one/
+  - name: Pallyy
+    url: https://pallyy.com/
+  - name: Readyy
+    url: https://readyy.app/
+  - name: CareerDeck
+    url: https://careerdeck.ai

docs/nuxt.config.ts

@@ -175,10 +175,6 @@ export default defineNuxtConfig({
     }
   },
 
-  hub: {
-    ai: true
-  },
-
   vite: {
     plugins: [
       yaml()

docs/package.json

@@ -3,23 +3,22 @@
   "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/vue": "^1.2.8",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.36",
-    "@iconify-json/simple-icons": "^1.2.32",
-    "@iconify-json/vscode-icons": "^1.2.19",
+    "@iconify-json/lucide": "^1.2.34",
+    "@iconify-json/simple-icons": "^1.2.30",
+    "@iconify-json/vscode-icons": "^1.2.18",
     "@nuxt/content": "^3.4.0",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@4757a1e",
-    "@nuxthub/core": "^0.8.24",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@63da8be",
+    "@nuxthub/core": "^0.8.23",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.1.1",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.1.0",
-    "@vueuse/nuxt": "^13.1.0",
-    "ai": "^4.3.6",
+    "@vueuse/nuxt": "^13.0.0",
     "capture-website": "^4.2.0",
+    "@vueuse/integrations": "^13.0.0",
+    "sortablejs": "^1.15.6",
     "joi": "^17.13.3",
     "motion-v": "0.13.1",
     "nuxt": "^3.16.2",
@@ -28,15 +27,13 @@
     "nuxt-og-image": "^5.1.1",
     "prettier": "^3.5.3",
     "shiki-transformer-color-highlight": "^1.0.0",
-    "sortablejs": "^1.15.6",
     "superstruct": "^2.0.2",
-    "ufo": "^1.6.1",
+    "ufo": "^1.5.4",
     "valibot": "^1.0.0",
-    "workers-ai-provider": "^0.3.0",
     "yup": "^1.6.1",
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "wrangler": "^4.10.0"
+    "wrangler": "^4.7.1"
   }
 }

docs/server/api/chat.ts

@@ -1,22 +0,0 @@
-import { streamText } from 'ai'
-import { createWorkersAI } from 'workers-ai-provider'
-
-export default defineEventHandler(async (event) => {
-  const { messages } = await readBody(event)
-
-  // Enable AI Gateway if defined in environment variables
-  const gateway = process.env.CLOUDFLARE_AI_GATEWAY_ID
-    ? {
-        id: process.env.CLOUDFLARE_AI_GATEWAY_ID,
-        cacheTtl: 60 * 60 * 24 // 24 hours
-      }
-    : undefined
-  const workersAI = createWorkersAI({ binding: hubAI(), gateway })
-
-  return streamText({
-    model: workersAI('@cf/meta/llama-3.2-3b-instruct'),
-    maxTokens: 10000,
-    system: 'You are a helpful assistant that can answer questions and help.',
-    messages
-  }).toDataStreamResponse()
-})

package.json

@@ -2,7 +2,7 @@
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
   "version": "3.0.2",
-  "packageManager": "pnpm@10.8.0",
+  "packageManager": "pnpm@10.7.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -12,17 +12,20 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/module.d.mts",
+      "types": "./dist/module.d.ts",
       "style": "./dist/runtime/index.css",
-      "import": "./dist/module.mjs"
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
     },
     "./unplugin": {
-      "types": "./dist/unplugin.d.mts",
-      "import": "./dist/unplugin.mjs"
+      "types": "./dist/unplugin.d.ts",
+      "import": "./dist/unplugin.mjs",
+      "require": "./dist/unplugin.cjs"
     },
     "./vite": {
-      "types": "./dist/vite.d.mts",
-      "import": "./dist/vite.mjs"
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.mjs",
+      "require": "./dist/vite.cjs"
     },
     "./vue-plugin": {
       "types": "./vue-plugin.d.ts"
@@ -30,10 +33,6 @@
     "./runtime/*": "./dist/runtime/*",
     "./components/*": "./dist/runtime/components/*",
     "./composables/*": "./dist/runtime/composables/*",
-    "./utils": {
-      "types": "./dist/runtime/utils/index.d.ts",
-      "import": "./dist/runtime/utils/index.js"
-    },
     "./utils/*": {
       "types": "./dist/runtime/utils/*.d.ts",
       "import": "./dist/runtime/utils/*.js"
@@ -43,40 +42,6 @@
       "import": "./dist/runtime/locale/index.js"
     }
   },
-  "typesVersions": {
-    "*": {
-      ".": [
-        "./dist/module.d.mts"
-      ],
-      "unplugin": [
-        "./dist/unplugin.d.mts"
-      ],
-      "vite": [
-        "./dist/vite.d.mts"
-      ],
-      "vue-plugin": [
-        "./vue-plugin.d.ts"
-      ],
-      "runtime/*": [
-        "./dist/runtime/*"
-      ],
-      "components/*": [
-        "./dist/runtime/components/*"
-      ],
-      "composables/*": [
-        "./dist/runtime/composables/*"
-      ],
-      "utils": [
-        "./dist/runtime/utils/index.d.ts"
-      ],
-      "utils/*": [
-        "./dist/runtime/utils/*.d.ts"
-      ],
-      "locale": [
-        "./dist/runtime/locale/index.d.ts"
-      ]
-    }
-  },
   "imports": {
     "#build/ui/*": "./.nuxt/ui/*.ts",
     "#build/ui.css": "./.nuxt/ui.css"
@@ -85,7 +50,8 @@
     "nuxt-ui": "./cli/index.mjs"
   },
   "style": "./dist/runtime/index.css",
-  "main": "./dist/module.mjs",
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
     ".nuxt/ui",
     ".nuxt/ui.css",
@@ -96,13 +62,13 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
-    "dev": "nuxi dev playground",
+    "dev": "DEV=true nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:vue": "vite playground-vue",
+    "dev:vue": "DEV=true vite playground-vue",
     "dev:vue:build": "vite build playground-vue",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
-    "docs": "nuxi dev docs",
-    "docs:build": "nuxi build docs",
+    "docs": "DEV=true nuxi dev docs",
+    "docs:build": "NODE_OPTIONS='--max-old-space-size=8192' nuxi build docs",
     "docs:prepare": "nuxt-component-meta docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -113,29 +79,29 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.3.0",
-    "@internationalized/date": "^3.8.0",
-    "@internationalized/number": "^3.6.1",
+    "@internationalized/date": "^3.7.0",
+    "@internationalized/number": "^3.6.0",
     "@nuxt/fonts": "^0.11.1",
-    "@nuxt/icon": "^1.12.0",
+    "@nuxt/icon": "^1.11.0",
     "@nuxt/kit": "^3.16.2",
     "@nuxt/schema": "^3.16.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.3",
-    "@tailwindcss/vite": "^4.1.3",
+    "@tailwindcss/postcss": "^4.1.2",
+    "@tailwindcss/vite": "^4.1.2",
     "@tanstack/vue-table": "^8.21.2",
-    "@unhead/vue": "^2.0.5",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/integrations": "^13.1.0",
+    "@unhead/vue": "^2.0.3",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/integrations": "^13.0.0",
     "colortranslator": "^4.1.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
-    "embla-carousel-auto-height": "^8.6.0",
-    "embla-carousel-auto-scroll": "^8.6.0",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-class-names": "^8.6.0",
-    "embla-carousel-fade": "^8.6.0",
-    "embla-carousel-vue": "^8.6.0",
+    "embla-carousel-auto-height": "^8.5.2",
+    "embla-carousel-auto-scroll": "^8.5.2",
+    "embla-carousel-autoplay": "^8.5.2",
+    "embla-carousel-class-names": "^8.5.2",
+    "embla-carousel-fade": "^8.5.2",
+    "embla-carousel-vue": "^8.5.2",
     "embla-carousel-wheel-gestures": "^8.0.2",
     "fuse.js": "^7.1.0",
     "hookable": "^5.5.3",
@@ -147,21 +113,23 @@
     "reka-ui": "^2.2.0",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.3",
+    "tailwindcss": "^4.1.2",
     "tinyglobby": "^0.2.12",
-    "unplugin": "^2.3.2",
+    "unplugin": "^2.2.2",
     "unplugin-auto-import": "^19.1.2",
-    "unplugin-vue-components": "^28.5.0",
-    "vaul-vue": "^0.4.1"
+    "unplugin-vue-components": "^28.4.1",
+    "vaul-vue": "^0.4.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^1.3.0",
-    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/module-builder": "^0.8.4",
     "@nuxt/test-utils": "^3.17.2",
     "@release-it/conventional-changelog": "^10.0.0",
     "@vue/test-utils": "^2.4.6",
-    "embla-carousel": "^8.6.0",
-    "eslint": "^9.24.0",
+    "embla-carousel": "^8.5.2",
+    "eslint": "^9.23.0",
     "happy-dom": "^17.4.4",
     "nuxt": "^3.16.2",
     "release-it": "^18.1.2",
@@ -170,19 +138,14 @@
     "vue-tsc": "^2.2.0"
   },
   "peerDependencies": {
-    "@inertiajs/vue3": "^2.0.7",
     "joi": "^17.13.0",
     "superstruct": "^2.0.0",
     "typescript": "^5.6.3",
     "valibot": "^1.0.0",
-    "vue-router": "^4.5.0",
     "yup": "^1.6.0",
     "zod": "^3.24.0"
   },
   "peerDependenciesMeta": {
-    "@inertiajs/vue3": {
-      "optional": true
-    },
     "joi": {
       "optional": true
     },
@@ -192,9 +155,6 @@
     "superstruct": {
       "optional": true
     },
-    "vue-router": {
-      "optional": true
-    },
     "yup": {
       "optional": true
     },
@@ -207,7 +167,7 @@
     "chokidar": "3.6.0",
     "debug": "4.3.7",
     "rollup": "4.34.9",
-    "unplugin": "^2.3.2",
+    "unplugin": "^2.2.2",
     "vue-tsc": "2.2.0"
   },
   "pnpm": {

playground-vue/package.json

@@ -17,8 +17,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
-    "typescript": "^5.8.3",
-    "vite": "^6.2.6",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.5",
     "vue-tsc": "^2.2.0"
   }
 }

playground/app/pages/components/command-palette.vue

@@ -146,7 +146,7 @@ defineShortcuts({
         <UButton label="Select label (popover)" color="neutral" variant="outline" />
 
         <template #content>
-          <UCommandPalette v-model="label" placeholder="Search labels..." :groups="[{ id: 'labels', items: labels }]" :ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }" />
+          <UCommandPalette v-model="label" placeholder="Search labels..." :groups="[{ id: 'labels', items: labels }]" :ui="{ input: '[&>input]:h-9' }" />
         </template>
       </UPopover>
     </div>

playground/app/pages/components/form-sandro.vue

@@ -1,71 +0,0 @@
-<template>
-  <UContainer>
-    <UForm :schema :state @submit="onSubmit">
-      <UFormField label="A" name="a">
-        <UInput v-model="state.a" />
-      </UFormField>
-      <UFormField label="B" name="b">
-        <UInput v-model="state.b" />
-      </UFormField>
-
-      <UButton type="submit">
-        Submit
-      </UButton>
-    </UForm>
-
-    {{ output }}
-  </UContainer>
-</template>
-
-<script lang="ts" setup>
-import type { FormSubmitEvent } from '@nuxt/ui'
-import * as v from 'valibot'
-
-const _schemaStringFiltered = v.pipe(v.string(), v.trim())
-const schema = v.object({
-  a: v.string(),
-  b: v.union([
-    v.pipe(
-      v.array(_schemaStringFiltered),
-      v.filterItems((item, index, array) => (array.indexOf(item) === index || item !== ''))
-    ),
-    v.pipe(
-      v.string(),
-      v.trim(),
-      v.transform(
-        (item) => {
-          if (item === '') return undefined
-
-          return item
-            .split(',')
-            .map(val => val.trim())
-            .filter(val => val !== '')
-        }
-      )
-    )
-  ])
-})
-
-const state = reactive<{
-  a: string
-  b: string
-}>({
-  a: 'hello, world',
-  b: 'hello, world'
-})
-const output = reactive<{
-  a: string
-  b?: string[]
-}>({
-  a: '',
-  b: []
-})
-
-function onSubmit(event: FormSubmitEvent<v.InferOutput<typeof schema>>) {
-  console.log('typeof `a`:', typeof event.data.a) // should be string
-  console.log('typeof `b`:', typeof event.data.b) // should be object (array of strings)
-
-  output.a = event.data.a
-  output.b = event.data.b
-}
-</script>

playground/app/pages/components/tabs.vue

@@ -59,14 +59,6 @@ const items = [{
         <template #custom="{ item }">
           <span class="text-(--ui-text-muted)">Custom: {{ item.content }}</span>
         </template>
-
-        <template #list-trailing>
-          <UButton
-            icon="lucide:refresh-cw"
-            variant="soft"
-            class="ml-2"
-          />
-        </template>
       </UTabs>
     </div>
   </div>

playground/package.json

@@ -8,10 +8,10 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.36",
-    "@iconify-json/simple-icons": "^1.2.32",
+    "@iconify-json/lucide": "^1.2.34",
+    "@iconify-json/simple-icons": "^1.2.30",
     "@nuxt/ui": "latest",
-    "@nuxthub/core": "^0.8.24",
+    "@nuxthub/core": "^0.8.23",
     "nuxt": "^3.16.2",
     "zod": "^3.24.2"
   }

src/module.ts

@@ -2,7 +2,6 @@ import { defu } from 'defu'
 import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit'
 import { addTemplates } from './templates'
 import { defaultOptions, getDefaultUiConfig, resolveColors } from './defaults'
-import { name, version } from '../package.json'
 
 export type * from './runtime/types'
 
@@ -51,13 +50,12 @@ export interface ModuleOptions {
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name,
-    version,
-    docs: 'https://ui.nuxt.com/getting-started/installation/nuxt',
+    name: 'ui',
     configKey: 'ui',
     compatibility: {
       nuxt: '>=3.16.0'
-    }
+    },
+    docs: 'https://ui.nuxt.com/getting-started/installation/nuxt'
   },
   defaults: defaultOptions,
   async setup(options, nuxt) {

src/plugins/components.ts

@@ -18,9 +18,6 @@ export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix:
   const overrides = globSync('**/*.vue', { cwd: join(runtimeDir, 'vue/components') })
   const overrideNames = new Set(overrides.map(c => `${options.prefix}${c.replace(/\.vue$/, '')}`))
 
-  const inertiaOverrides = globSync('**/*.vue', { cwd: join(runtimeDir, 'inertia/components') })
-  const inertiaOverrideNames = new Set(inertiaOverrides.map(c => `${options.prefix}${c.replace(/\.vue$/, '')}`))
-
   const pluginOptions = defu(options.components, <ComponentsOptions>{
     dts: options.dts ?? true,
     exclude: [
@@ -30,9 +27,6 @@ export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix:
     ],
     resolvers: [
       (componentName) => {
-        if (options.inertia && inertiaOverrideNames.has(componentName)) {
-          return { name: 'default', from: join(runtimeDir, 'inertia/components', `${componentName.slice(options.prefix.length)}.vue`) }
-        }
         if (overrideNames.has(componentName))
           return { name: 'default', from: join(runtimeDir, 'vue/components', `${componentName.slice(options.prefix.length)}.vue`) }
         if (componentNames.has(componentName))
@@ -61,9 +55,6 @@ export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix:
         }
 
         const filename = id.match(/([^/]+)\.vue$/)?.[1]
-        if (filename && options.inertia && inertiaOverrideNames.has(`${options.prefix}${filename}`)) {
-          return join(runtimeDir, 'inertia/components', `${filename}.vue`)
-        }
         if (filename && overrideNames.has(`${options.prefix}${filename}`)) {
           return join(runtimeDir, 'vue/components', `${filename}.vue`)
         }

src/plugins/nuxt-environment.ts

@@ -3,13 +3,13 @@ import { normalize } from 'pathe'
 import { resolvePathSync } from 'mlly'
 import MagicString from 'magic-string'
 
-import { runtimeDir, type NuxtUIOptions } from '../unplugin'
+import { runtimeDir } from '../unplugin'
 
 /**
  * This plugin normalises Nuxt environment (#imports) and `import.meta.client` within the Nuxt UI components.
  */
-export default function NuxtEnvironmentPlugin(options: NuxtUIOptions) {
-  const stubPath = resolvePathSync(options.inertia ? '../runtime/inertia/stubs' : '../runtime/vue/stubs', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url })
+export default function NuxtEnvironmentPlugin() {
+  const stubPath = resolvePathSync('../runtime/vue/stubs', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url })
 
   return {
     name: 'nuxt:ui',

src/runtime/components/Accordion.vue

@@ -2,10 +2,14 @@
 <script lang="ts">
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
-import type { DynamicSlots, ComponentConfig } from '../types/utils'
+import { tv } from '../utils/tv'
+import type { DynamicSlots } from '../types/utils'
 
-type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>
+const appConfigAccordion = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
+
+const accordion = tv({ extend: tv(theme), ...(appConfigAccordion.ui?.accordion || {}) })
 
 export interface AccordionItem {
   label?: string
@@ -44,7 +48,7 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
    */
   labelKey?: string
   class?: any
-  ui?: Accordion['slots']
+  ui?: Partial<typeof accordion.slots>
 }
 
 export interface AccordionEmits extends AccordionRootEmits {}
@@ -67,7 +71,6 @@ import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, Accord
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { get } from '../utils'
-import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<AccordionProps<T>>(), {
@@ -79,11 +82,10 @@ const props = withDefaults(defineProps<AccordionProps<T>>(), {
 const emits = defineEmits<AccordionEmits>()
 const slots = defineSlots<AccordionSlots<T>>()
 
-const appConfig = useAppConfig() as Accordion['AppConfig']
-
+const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })({
+const ui = computed(() => accordion({
   disabled: props.disabled
 }))
 </script>

src/runtime/components/Alert.vue

@@ -1,10 +1,16 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
+import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
-import type { ComponentConfig } from '../types/utils'
 
-type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>
+const appConfigAlert = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
+
+const alert = tv({ extend: tv(theme), ...(appConfigAlert.ui?.alert || {}) })
+
+type AlertVariants = VariantProps<typeof alert>
 
 export interface AlertProps {
   /**
@@ -22,16 +28,16 @@ export interface AlertProps {
   /**
    * @defaultValue 'primary'
    */
-  color?: Alert['variants']['color']
+  color?: AlertVariants['color']
   /**
    * @defaultValue 'solid'
    */
-  variant?: Alert['variants']['variant']
+  variant?: AlertVariants['variant']
   /**
    * The orientation between the content and the actions.
    * @defaultValue 'vertical'
    */
-  orientation?: Alert['variants']['orientation']
+  orientation?: AlertVariants['orientation']
   /**
    * Display a list of actions:
    * - under the title and description when orientation is `vertical`
@@ -53,7 +59,7 @@ export interface AlertProps {
    */
   closeIcon?: string
   class?: any
-  ui?: Alert['slots']
+  ui?: Partial<typeof alert.slots>
 }
 
 export interface AlertEmits {
@@ -65,7 +71,7 @@ export interface AlertSlots {
   title(props?: {}): any
   description(props?: {}): any
   actions(props?: {}): any
-  close(props: { ui: { [K in keyof Required<Alert['slots']>]: (props?: Record<string, any>) => string } }): any
+  close(props: { ui: ReturnType<typeof alert> }): any
 }
 </script>
 
@@ -74,7 +80,6 @@ import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
-import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
@@ -86,9 +91,9 @@ const emits = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
 const { t } = useLocale()
-const appConfig = useAppConfig() as Alert['AppConfig']
+const appConfig = useAppConfig()
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })({
+const ui = computed(() => alert({
   color: props.color,
   variant: props.variant,
   orientation: props.orientation,

src/runtime/components/Avatar.vue

@@ -1,9 +1,15 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
-import type { ComponentConfig } from '../types/utils'
+import { tv } from '../utils/tv'
 
-type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>
+const appConfigAvatar = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
+
+const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.ui?.avatar || {}) })
+
+type AvatarVariants = VariantProps<typeof avatar>
 
 export interface AvatarProps {
   /**
@@ -21,10 +27,10 @@ export interface AvatarProps {
   /**
    * @defaultValue 'md'
    */
-  size?: Avatar['variants']['size']
+  size?: AvatarVariants['size']
   class?: any
   style?: any
-  ui?: Avatar['slots']
+  ui?: Partial<typeof avatar.slots>
 }
 
 export interface AvatarSlots {
@@ -35,10 +41,8 @@ export interface AvatarSlots {
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Primitive, Slot } from 'reka-ui'
-import { useAppConfig } from '#imports'
 import ImageComponent from '#build/ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
-import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -47,11 +51,10 @@ const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
 
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
-const appConfig = useAppConfig() as Avatar['AppConfig']
 const { size } = useAvatarGroup(props)
 
 // eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })({
+const ui = computed(() => avatar({
   size: size.value
 }))
 

src/runtime/components/AvatarGroup.vue

@@ -1,9 +1,15 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar-group'
-import type { ComponentConfig } from '../types/utils'
+import { tv } from '../utils/tv'
 
-type AvatarGroup = ComponentConfig<typeof theme, AppConfig, 'avatarGroup'>
+const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
+
+const avatarGroup = tv({ extend: tv(theme), ...(appConfigAvatarGroup.ui?.avatarGroup || {}) })
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
 
 export interface AvatarGroupProps {
   /**
@@ -14,13 +20,13 @@ export interface AvatarGroupProps {
   /**
    * @defaultValue 'md'
    */
-  size?: AvatarGroup['variants']['size']
+  size?: AvatarGroupVariants['size']
   /**
    * The maximum number of avatars to display.
    */
   max?: number | string
   class?: any
-  ui?: AvatarGroup['slots']
+  ui?: Partial<typeof avatarGroup.slots>
 }
 
 export interface AvatarGroupSlots {
@@ -31,17 +37,13 @@ export interface AvatarGroupSlots {
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 import { Primitive } from 'reka-ui'
-import { useAppConfig } from '#imports'
 import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
-import { tv } from '../utils/tv'
 import UAvatar from './Avatar.vue'
 
 const props = defineProps<AvatarGroupProps>()
 const slots = defineSlots<AvatarGroupSlots>()
 
-const appConfig = useAppConfig() as AvatarGroup['AppConfig']
-
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })({
+const ui = computed(() => avatarGroup({
   size: props.size
 }))
 

src/runtime/components/Badge.vue

@@ -1,11 +1,17 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
-import type { ComponentConfig } from '../types/utils'
 
-type Badge = ComponentConfig<typeof theme, AppConfig, 'badge'>
+const appConfigBadge = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
+
+const badge = tv({ extend: tv(theme), ...(appConfigBadge.ui?.badge || {}) })
+
+type BadgeVariants = VariantProps<typeof badge>
 
 export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
@@ -17,17 +23,17 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
   /**
    * @defaultValue 'primary'
    */
-  color?: Badge['variants']['color']
+  color?: BadgeVariants['color']
   /**
    * @defaultValue 'solid'
    */
-  variant?: Badge['variants']['variant']
+  variant?: BadgeVariants['variant']
   /**
    * @defaultValue 'md'
    */
-  size?: Badge['variants']['size']
+  size?: BadgeVariants['size']
   class?: any
-  ui?: Badge['slots']
+  ui?: Partial<typeof badge.slots>
 }
 
 export interface BadgeSlots {
@@ -40,10 +46,8 @@ export interface BadgeSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
-import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
-import { tv } from '../utils/tv'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 
@@ -52,11 +56,10 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 })
 defineSlots<BadgeSlots>()
 
-const appConfig = useAppConfig() as Badge['AppConfig']
 const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })({
+const ui = computed(() => badge({
   color: props.color,
   variant: props.variant,
   size: buttonGroupSize.value || props.size,

src/runtime/components/Breadcrumb.vue

@@ -1,11 +1,15 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
+import { tv } from '../utils/tv'
 import type { AvatarProps, LinkProps } from '../types'
-import type { DynamicSlots, ComponentConfig } from '../types/utils'
+import type { DynamicSlots, PartialString } from '../types/utils'
 
-type Breadcrumb = ComponentConfig<typeof theme, AppConfig, 'breadcrumb'>
+const appConfigBreadcrumb = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
+
+const breadcrumb = tv({ extend: tv(theme), ...(appConfigBreadcrumb.ui?.breadcrumb || {}) })
 
 export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
@@ -37,7 +41,7 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
    */
   labelKey?: string
   class?: any
-  ui?: Breadcrumb['slots']
+  ui?: PartialString<typeof breadcrumb.slots>
 }
 
 type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean }) => any
@@ -58,7 +62,6 @@ import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
 import { get } from '../utils'
-import { tv } from '../utils/tv'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
@@ -70,14 +73,13 @@ const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
   labelKey: 'label'
 })
 const slots = defineSlots<BreadcrumbSlots<T>>()
-
 const { dir } = useLocale()
-const appConfig = useAppConfig() as Breadcrumb['AppConfig']
+const appConfig = useAppConfig()
 
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
 
 // eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })())
+const ui = breadcrumb()
 </script>
 
 <template>

src/runtime/components/Button.vue

@@ -1,29 +1,36 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
-import type { ComponentConfig } from '../types/utils'
+import type { PartialString } from '../types/utils'
 
-type Button = ComponentConfig<typeof theme, AppConfig, 'button'>
+const appConfigButton = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
+
+const button = tv({ extend: tv(theme), ...(appConfigButton.ui?.button || {}) })
+
+type ButtonVariants = VariantProps<typeof button>
 
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
   /**
    * @defaultValue 'primary'
    */
-  color?: Button['variants']['color']
-  activeColor?: Button['variants']['color']
+  color?: ButtonVariants['color']
+  activeColor?: ButtonVariants['color']
   /**
    * @defaultValue 'solid'
    */
-  variant?: Button['variants']['variant']
-  activeVariant?: Button['variants']['variant']
+  variant?: ButtonVariants['variant']
+  activeVariant?: ButtonVariants['variant']
   /**
    * @defaultValue 'md'
    */
-  size?: Button['variants']['size']
+  size?: ButtonVariants['size']
   /** Render the button with equal padding on all sides. */
   square?: boolean
   /** Render the button full width. */
@@ -32,7 +39,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   loadingAuto?: boolean
   onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
   class?: any
-  ui?: Button['slots']
+  ui?: PartialString<typeof button.slots>
 }
 
 export interface ButtonSlots {
@@ -44,14 +51,11 @@ export interface ButtonSlots {
 
 <script setup lang="ts">
 import { type Ref, computed, ref, inject } from 'vue'
-import { defu } from 'defu'
 import { useForwardProps } from 'reka-ui'
-import { useAppConfig } from '#imports'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { formLoadingInjectionKey } from '../composables/useFormField'
 import { omit } from '../utils'
-import { tv } from '../utils/tv'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
@@ -65,11 +69,10 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 })
 const slots = defineSlots<ButtonSlots>()
 
-const appConfig = useAppConfig() as Button['AppConfig']
-const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
-
 const linkProps = useForwardProps(pickLinkProps(props))
 
+const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
+
 const loadingAutoState = ref(false)
 const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
 
@@ -92,19 +95,17 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
 )
 
 const ui = computed(() => tv({
-  extend: tv(theme),
-  ...defu({
-    variants: {
-      active: {
-        true: {
-          base: props.activeClass
-        },
-        false: {
-          base: props.inactiveClass
-        }
+  extend: button,
+  variants: {
+    active: {
+      true: {
+        base: props.activeClass
+      },
+      false: {
+        base: props.inactiveClass
       }
     }
-  }, appConfig.ui?.button || {})
+  }
 })({
   color: props.color,
   variant: props.variant,

src/runtime/components/ButtonGroup.vue

@@ -1,9 +1,15 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
 import theme from '#build/ui/button-group'
-import type { ComponentConfig } from '../types/utils'
+import { tv } from '../utils/tv'
 
-type ButtonGroup = ComponentConfig<typeof theme, AppConfig, 'buttonGroup'>
+const appConfigButtonGroup = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
+
+const buttonGroup = tv({ extend: tv(theme), ...(appConfigButtonGroup.ui?.buttonGroup) })
+
+type ButtonGroupVariants = VariantProps<typeof buttonGroup>
 
 export interface ButtonGroupProps {
   /**
@@ -14,14 +20,13 @@ export interface ButtonGroupProps {
   /**
    * @defaultValue 'md'
    */
-  size?: ButtonGroup['variants']['size']
+  size?: ButtonGroupVariants['size']
   /**
    * The orientation the buttons are laid out.
    * @defaultValue 'horizontal'
    */
-  orientation?: ButtonGroup['variants']['orientation']
+  orientation?: ButtonGroupVariants['orientation']
   class?: any
-  ui?: ButtonGroup['slots']
 }
 
 export interface ButtonGroupSlots {
@@ -32,20 +37,13 @@ export interface ButtonGroupSlots {
 <script setup lang="ts">
 import { provide, computed } from 'vue'
 import { Primitive } from 'reka-ui'
-import { useAppConfig } from '#imports'
 import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
-import { tv } from '../utils/tv'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
   orientation: 'horizontal'
 })
 defineSlots<ButtonGroupSlots>()
 
-const appConfig = useAppConfig() as ButtonGroup['AppConfig']
-
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.buttonGroup || {}) }))
-
 provide(buttonGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
   size: props.size
@@ -53,7 +51,7 @@ provide(buttonGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ orientation, class: props.class })">
+  <Primitive :as="as" :class="buttonGroup({ orientation, class: props.class })">
     <slot />
   </Primitive>
 </template>