github/ui-ux-pro-max-skill
1
0
Fork 0
mirror of https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git synced 2026-09-26 14:06:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt-ui): refresh guidance for v4.11 (#502)

Browse Source 
Reverify the full stack catalog against Nuxt UI 4.11.1 and correct stale API examples. Add Splitter, ProgressGroup, motion, Vite detection, and CommandPalette security guidance.

Co-authored-by: Ray <ray.tien@cloudeep.com.tw>
This commit is contained in:
Ray Tien 2026-09-21 13:28:06 +08:00 committed by GitHub
parent f1c725fd2f
commit 0d2b646cb6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 282 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.claude/skills/ui-ux-pro-max/data/catalog-summary.json
View File

@ -20,7 +20,7 @@
"motionPresets": 17,
"chartTypes": 25,
"stacks": 22,
"stackGuidelines": 1265
"stackGuidelines": 1271
},
"snapshots": {
"google-fonts.csv": {

146
.claude/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv
View File

@ -1,71 +1,77 @@
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
1,Installation,Add Nuxt UI module,Install and configure Nuxt UI in your Nuxt project,pnpm add @nuxt/ui and add to modules,Manual component imports,modules: ['@nuxt/ui'],import { UButton } from '@nuxt/ui',High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
3,Installation,Wrap app with UApp component,UApp provides global configs for Toast Tooltip and overlays,<UApp> wrapper in app.vue,Skip UApp wrapper,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app,nuxt-ui 4.10,active,2026-08-13
4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
5,Components,Use semantic color props,Use semantic colors like primary secondary error,"color=""primary"" color=""error""",Hardcoded colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,"variant=""soft"" variant=""outline""",Custom button classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,"size=""sm"" size=""lg""",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
8,Icons,Use i-{collection}-{name} format for icons,Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy,i-lucide-home i-heroicons-user format,lucide:home format (v3 syntax),"<UButton icon=""i-lucide-home"">","<UButton icon=""lucide:home"">",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
9,Icons,Use leadingIcon and trailingIcon props,Position icons with dedicated props for clarity,"leadingIcon=""i-lucide-plus"" trailingIcon=""i-lucide-arrow-right""",Manual icon positioning or slots,"<UButton leadingIcon=""i-lucide-plus"" label=""Add"">","<UButton><UIcon name=""i-lucide-plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,defineAppConfig({ ui: { colors: { primary: 'blue' } } }),"<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
11,Theming,Use @theme directive for custom colors,Define design tokens in CSS with Tailwind @theme,@theme { --color-brand-500: #xxx },Inline color definitions,@theme { --color-brand-500: #ef4444; },":style=""{ color: '#ef4444' }""",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
12,Theming,Register and map semantic colors,Register extra semantic color names at build time then map them to a palette in app.config,nuxt.config ui.theme.colors plus app.config ui.colors,Use an unregistered semantic color,"ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
13,Forms,Use UForm with schema validation,UForm supports Zod Yup Joi Valibot schemas,:schema prop with validation schema,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.10,active,2026-08-13
15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
16,Forms,Choose validation timing deliberately,UForm validates on input blur and change by default; input is delayed and begins after blur unless eager,Set validateOn and eager to match the interaction,Assume the default validates every keystroke immediately,"<UForm :validateOn=""['blur', 'change']"">",Describe default UForm as eager input-only validation,Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">","<UModal v-if=""isOpen"">",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically — v4 API is create().open() not open(Component),overlay.create(Component).open({ props }) pattern,v3 overlay.open(Component) pattern (removed in v4),const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }),"overlay.open(MyModal, { props: { title: 'Confirm' } })",High,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
19,Overlays,Use title and description props,Built-in header support for overlays,"title=""Confirm"" description=""Are you sure?""",Manual header content,"<UModal title=""Confirm"" description=""Are you sure?"">",<UModal><template #header><h2>Confirm</h2></template>,Low,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,"<aside class=""w-64 border-r"">",Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar,nuxt-ui 4.10,active,2026-08-13
21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group,nuxt-ui 4.10,active,2026-08-13
22,Dashboard,Use UDashboardNavbar for top navigation,Responsive navbar with mobile menu support,UDashboardNavbar in dashboard layout,Custom navbar implementation,"<UDashboardNavbar :links=""navLinks""/>","<nav class=""border-b"">",Low,https://ui.nuxt.com/docs/components/dashboard-navbar,nuxt-ui 4.10,active,2026-08-13
23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
25,Tables,Use column cell slots,Customize cell content with the documented column-id slot pattern,#status-cell for a status column,Use the obsolete #cell-status name,"<template #status-cell=""{ row }"">","<template #cell-status=""{ row }"">",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
26,Tables,Enable sorting with TanStack column APIs,Render a header control that calls column.toggleSorting,Use getCanSort and toggleSorting,Invent a sortable property not in the column contract,"header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })","{ accessorKey: 'name', sortable: true }",Low,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu,nuxt-ui 4.10,active,2026-08-13
28,Navigation,Use UBreadcrumb for page hierarchy,Automatic breadcrumb with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb,nuxt-ui 4.10,active,2026-08-13
29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs,nuxt-ui 4.10,active,2026-08-13
30,Feedback,Use useToast for notifications,Composable for toast notifications,useToast().add({ title description }),Alert components for toasts,const toast = useToast(); toast.add({ title: 'Saved' }),"<UAlert v-if=""showSuccess"">",High,https://ui.nuxt.com/docs/components/toast,nuxt-ui 4.10,active,2026-08-13
31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert,nuxt-ui 4.10,active,2026-08-13
32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,"<USkeleton class=""h-4 w-32""/>","<UIcon name=""lucide:loader"" class=""animate-spin""/>",Low,https://ui.nuxt.com/docs/components/skeleton,nuxt-ui 4.10,active,2026-08-13
33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button,nuxt-ui 4.10,active,2026-08-13
34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select,nuxt-ui 4.10,active,2026-08-13
35,Customization,Use ui prop for component styling,Override component styles via ui prop,ui prop with slot class overrides,Global CSS overrides,"<UButton :ui=""{ base: 'rounded-full' }""/>","<UButton class=""!rounded-full""/>",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
36,Customization,Configure default variants in app.config,Set component default variants under ui component keys,app.config ui.button.defaultVariants,Put component defaults in nuxt.config,"defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } })",ui.theme.defaultVariants in nuxt.config,Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }),nuxt.config ui.button.size: 'sm',Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
38,Performance,Enable component detection,Tree-shake unused component CSS,experimental.componentDetection: true,Include all component CSS,ui: { experimental: { componentDetection: true } },ui: {} (includes all CSS),Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
39,Performance,Use UTable virtualize for large data,Enable virtualization for 1000+ rows,:virtualize prop on UTable,Render all rows,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
40,Accessibility,Use semantic component props,Components have built-in ARIA support,Use title description label props,Skip accessibility props,"<UModal title=""Settings"">",<UModal><h2>Settings</h2>,Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
41,Accessibility,Associate labels with controls,Use UFormField or correct native id and for attributes,UFormField for convenience or explicit label association,Use placeholders as labels,"<UFormField label=""Email""><UInput/></UFormField>","<UInput placeholder=""Email""/>",High,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.10,active,2026-08-13
42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc,nuxt-ui 4.10,active,2026-08-13
43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,"<UCommandPalette :groups=""searchResults""/>",Low,https://ui.nuxt.com/docs/components/content-search,nuxt-ui 4.10,active,2026-08-13
44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages,nuxt-ui 4.10,active,2026-08-13
45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,"<UChatPrompt v-model=""prompt""/>","<UTextarea v-model=""prompt""/>",Medium,https://ui.nuxt.com/docs/components/chat-prompt,nuxt-ui 4.10,active,2026-08-13
46,Editor,Use UEditor for rich text,TipTap-based editor binds its document with v-model,UEditor with v-model,Use the undocumented v-model:content binding,"<UEditor v-model=""content""/>","<UEditor v-model:content=""content""/>",Medium,https://ui.nuxt.com/docs/components/editor,nuxt-ui 4.10,active,2026-08-13
47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,"to=""/dashboard"" for internal links",href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
48,Links,Use to for external URLs,ULink and link-enabled components detect absolute URLs and support target when a new tab is intended,"to=""https://example.com"" target=""_blank""",Use href inconsistently or claim an external prop is required,"<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link,nuxt-ui 4.10,active,2026-08-13
49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
51,Installation,Let Nuxt UI declare module dependencies,Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration,Configure dependency options at their root keys,Add duplicate module entries without a documented need,icon: { /* opts */ } in nuxt.config,"modules: ['@nuxt/ui', '@nuxt/icon']",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
52,Installation,Use official templates to bootstrap projects,Create a Nuxt project from an official Nuxt UI template,npm create nuxt@latest -- -t ui/dashboard,Manually reconstruct a template,npm create nuxt@latest -- -t ui/dashboard,pnpm create nuxt app then copy dashboard files,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
53,Icons,Install required icon collections locally,Install Iconify JSON collections used by the app; Nuxt UI 4.10 can bundle icons from installed collections,pnpm i @iconify-json/lucide for lucide icons,Rely on an unavailable collection at runtime,pnpm i @iconify-json/lucide,Use i-custom-* without installing its collection,Medium,https://ui.nuxt.com/docs/getting-started/icons/nuxt,nuxt-ui 4.10,active,2026-08-13
54,Icons,Override default component icons globally,Components use default icons configurable via appConfig.ui.icons,Set loading close check icons in app.config.ts,Accept default icons for all components,"defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })","<UModal :close-icon=""'i-lucide-x'""> on every usage",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
55,Forms,Use UFileUpload for file input,Built-in drag-drop and preview support,UFileUpload with v-model and accept prop,Custom input type=file,"<UFileUpload v-model=""files"" accept=""image/*"" multiple/>","<input type=""file"" @change=""handleFiles"">",Medium,https://ui.nuxt.com/docs/components/file-upload,nuxt-ui 4.10,active,2026-08-13
56,Forms,Use UInputDate for date selection,Locale-aware date picker built on UCalendar,UInputDate with v-model and locale prop,Third-party date picker libraries,"<UInputDate v-model=""date"" />","<DatePicker v-model=""date"" />",Medium,https://ui.nuxt.com/docs/components/input-date,nuxt-ui 4.10,active,2026-08-13
57,Forms,Use UInputTags for tag input,Multi-value tag input with keyboard support,UInputTags with v-model and max prop,Custom chip input implementation,"<UInputTags v-model=""tags"" :max=""5"" />","<UInput @keydown.enter=""addTag"">",Low,https://ui.nuxt.com/docs/components/input-tags,nuxt-ui 4.10,active,2026-08-13
58,Forms,Use UColorPicker for color selection,Full-featured color picker with multiple format support,UColorPicker with v-model and format prop,Native input type=color,"<UColorPicker v-model=""color"" format=""hex"" />","<input type=""color"" v-model=""color"">",Low,https://ui.nuxt.com/docs/components/color-picker,nuxt-ui 4.10,active,2026-08-13
59,Data,Use UTree for hierarchical data,Built-in tree component with expand/collapse,UTree with items prop containing nested children,Custom recursive component,"<UTree :items=""treeItems"" />","<TreeNode v-for=""item in items"" :key=""item.id"">",Low,https://ui.nuxt.com/docs/components/tree,nuxt-ui 4.10,active,2026-08-13
60,Data,Use UMarquee for infinite scroll content,Animated infinite scroll band for logos or testimonials,UMarquee with repeat and pauseOnHover props,CSS animation keyframes loop,"<UMarquee :repeat=""3"" pause-on-hover>","<div class=""animate-marquee"">",Low,https://ui.nuxt.com/docs/components/marquee,nuxt-ui 4.10,active,2026-08-13
61,Overlays,Use UContextMenu for right-click menus,Context menu triggered by right-click on children,UContextMenu wrapping target element,Browser default context menu,"<UContextMenu :items=""menuItems""><div>Right-click me</div></UContextMenu>","<div @contextmenu.prevent=""showMenu"">",Medium,https://ui.nuxt.com/docs/components/context-menu,nuxt-ui 4.10,active,2026-08-13
62,Overlays,Await overlay result for confirmation dialogs,useOverlay returns a result Promise resolving to user action,await instance.result to get confirm/cancel,Emit events from overlay components,const { result } = modal.open(); if (await result) { deleteItem() },"overlay.open(Confirm, { onConfirm: deleteItem })",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
63,Navigation,Use UCommandPalette with grouped items,Command palette supports grouped search with icons and kbds,groups array with id label items,Flat list without categories,"<UCommandPalette :groups=""[{ id: 'actions', label: 'Actions', items }]""/>","<UCommandPalette :items=""flatList""/>",Medium,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.10,active,2026-08-13
64,Navigation,Use defineShortcuts with extractShortcuts,Wire keyboard shortcuts from menu item kbds automatically,extractShortcuts(items) + defineShortcuts to sync keybindings,Manually duplicate shortcuts from menu items,defineShortcuts(extractShortcuts(items)),defineShortcuts({ meta_n: () => newFile() }) // duplicated from items,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.10,active,2026-08-13
65,Layout,Use UHeader and UFooter for page layout,Responsive header/footer with built-in mobile menu,UHeader with #default slot for nav UFooter with columns,Custom header/footer from scratch,<UHeader><template #right><UNavigationMenu/></template></UHeader>,"<header class=""sticky top-0"">",Low,https://ui.nuxt.com/docs/components/header,nuxt-ui 4.10,active,2026-08-13
66,Layout,Use UPageAside for sidebar content,Sidebar that hides below lg breakpoint automatically,UPageAside for docs and landing page sidebars,Manual hidden lg: classes,"<UPageAside><UNavigationMenu orientation=""vertical""/></UPageAside>","<aside class=""hidden lg:block"">",Low,https://ui.nuxt.com/docs/components/page-aside,nuxt-ui 4.10,active,2026-08-13
67,Color Mode,Wrap custom color mode toggles in ClientOnly,Prevents hydration mismatch on server-rendered color mode,ClientOnly with fallback placeholder,Direct useColorMode in template without ClientOnly,"<ClientOnly><USwitch v-model=""isDark""/><template #fallback><div class=""size-8""/></template></ClientOnly>","<USwitch v-model=""isDark""/> directly in template",Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
68,Theming,Read generated theme file to find slot names,Nuxt UI generates theme files listing all component slots and variants,Check .nuxt/ui/<component>.ts for slot names,Guess slot names or use trial-and-error,.nuxt/ui/button.ts for UButton slot names,"<UButton :ui=""{ base: 'rounded-full' }""/> without checking slots",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
69,Composables,Use defineShortcuts whenever keyword shortcut,whenever array condition prevents shortcut firing when inactive,whenever: [isFormValid] to guard shortcut execution,Always-on shortcuts that fire in wrong context,"defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })",defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.10,active,2026-08-13
70,i18n,Use UApp locale prop for internationalization,Nuxt UI supports 50+ built-in locales via locale prop on UApp,Import locale from @nuxt/ui/locale and pass to UApp,Manual translation of component UI strings,"import { fr } from '@nuxt/ui/locale'; // <UApp :locale=""fr"">","<UModal title=""Fermer""> manually for each component",Low,https://ui.nuxt.com/docs/composables/define-locale,nuxt-ui 4.10,active,2026-08-13
1,Installation,Add Nuxt UI module,"Install Nuxt UI and Tailwind CSS, then register the Nuxt module",pnpm add @nuxt/ui tailwindcss and add @nuxt/ui to modules,Manual component imports,modules: ['@nuxt/ui'] // after pnpm add @nuxt/ui tailwindcss,import { UButton } from '@nuxt/ui',High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
3,Installation,Wrap app with UApp component,"UApp provides toast, tooltip, overlay, and locale context",Wrap NuxtPage or RouterView once at the app root,Mount pages outside UApp,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app,nuxt-ui 4.11.1,active,2026-09-21
4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
5,Components,Use semantic color props,"Style Nuxt UI components with meaning-based colors such as primary, success, and error","Use color props such as color=""primary"" or color=""error""",Hardcoded palette colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,Choose a built-in variant before adding custom classes,Recreate a built-in variant with custom classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,"size=""sm"" size=""lg""",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
8,Icons,Use i-{collection}-{name} format for icons,Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy,i-lucide-home i-heroicons-user format,lucide:home format (v3 syntax),"<UButton icon=""i-lucide-home"">","<UButton icon=""lucide:home"">",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
9,Icons,Use leadingIcon and trailingIcon props,Position icons with dedicated props for clarity,Use leadingIcon or trailingIcon for standard button icons,Build a custom icon slot when a standard icon prop is enough,"<UButton leadingIcon=""i-lucide-plus"" label=""Add"">","<UButton><UIcon name=""i-lucide-plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,defineAppConfig({ ui: { colors: { primary: 'blue' } } }),"<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
11,Theming,Define complete custom palettes with @theme static,Nuxt UI custom colors require shades 50 through 950,Define every --color-brand-* shade in @theme static,Define only one shade for a custom palette,@theme static { --color-brand-50: #fff1f2; ... --color-brand-950: #4c0519; },@theme { --color-brand-500: #ef4444; },Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
12,Theming,Register and map semantic colors,Register extra semantic color names at build time then map them to a palette in app.config,nuxt.config ui.theme.colors plus app.config ui.colors,Use an unregistered semantic color,"ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
13,Forms,Use UForm with schema validation,"UForm accepts Standard Schema libraries such as Zod, Valibot, Yup, and Joi",Pass a Standard Schema with :schema and reactive state with :state,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
16,Forms,Choose validation timing deliberately,UForm validates on input blur and change by default; input is delayed and begins after blur unless eager,Set validateOn and eager to match the interaction,Assume the default validates every keystroke immediately,"<UForm :validateOn=""['blur', 'change']"">",Describe default UForm as eager input-only validation,Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">","<UModal v-if=""isOpen"">",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically — v4 API is create().open() not open(Component),"Create the overlay once, then pass component props directly to open()",v3 overlay.open(Component) pattern (removed in v4),const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }),"overlay.open(MyModal, { props: { title: 'Confirm' } })",High,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
19,Overlays,Use title and description props,Built-in header support for overlays,Use title and description props for a standard overlay header,Rebuild a simple title and description with a custom header slot,"<UModal title=""Confirm"" description=""Are you sure?"">",<UModal><template #header><h2>Confirm</h2></template>,Low,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,"<aside class=""w-64 border-r"">",Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar,nuxt-ui 4.11.1,active,2026-09-21
21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group,nuxt-ui 4.11.1,active,2026-09-21
22,Dashboard,Use UDashboardNavbar for top navigation,Responsive dashboard header with sidebar toggle and layout slots,Place UDashboardNavbar in a UDashboardPanel header and use its slots for actions,Pass unsupported links props or rebuild the responsive toggle,"<UDashboardNavbar title=""Dashboard""><template #right><UButton label=""Add""/></template></UDashboardNavbar>","<UDashboardNavbar :links=""navLinks""/>",Low,https://ui.nuxt.com/docs/components/dashboard-navbar,nuxt-ui 4.11.1,active,2026-09-21
23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
25,Tables,Use column cell slots,Customize cell content with the documented column-id slot pattern,#status-cell for a status column,Use the obsolete #cell-status name,"<template #status-cell=""{ row }"">","<template #cell-status=""{ row }"">",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
26,Tables,Enable sorting with TanStack column APIs,Render a header control that calls column.toggleSorting,Use getCanSort and toggleSorting,Invent a sortable property not in the column contract,"header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })","{ accessorKey: 'name', sortable: true }",Low,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu,nuxt-ui 4.11.1,active,2026-09-21
28,Navigation,Use UBreadcrumb for page hierarchy,Render accessible page hierarchy from an items array with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb,nuxt-ui 4.11.1,active,2026-09-21
29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs,nuxt-ui 4.11.1,active,2026-09-21
30,Feedback,Use useToast for notifications,Composable notifications rendered by the UApp toast provider,Wrap the app in UApp and call useToast().add(),Alert components for toasts,const toast = useToast(); toast.add({ title: 'Saved' }),"<UAlert v-if=""showSuccess"">",High,https://ui.nuxt.com/docs/components/toast,nuxt-ui 4.11.1,active,2026-09-21
31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert,nuxt-ui 4.11.1,active,2026-09-21
32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,"<USkeleton class=""h-4 w-32""/>","<UIcon name=""i-lucide-loader-circle"" class=""animate-spin""/>",Low,https://ui.nuxt.com/docs/components/skeleton,nuxt-ui 4.11.1,active,2026-09-21
33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button,nuxt-ui 4.11.1,active,2026-09-21
34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select,nuxt-ui 4.11.1,active,2026-09-21
35,Customization,Use class for the root and ui for named slots,class customizes the root slot; ui targets component slots,Use class for root-only changes and ui after checking generated slot names,Use !important or guess undocumented slot names,"<UButton class=""rounded-full"" :ui=""{ trailingIcon: 'size-3' }""/>","<UButton class=""!rounded-full""/>",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
36,Customization,Configure default variants in app.config,Set component default variants under ui component keys,app.config ui.button.defaultVariants,Put button-specific defaults under global ui.theme.defaultVariants,defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } }),ui: { theme: { defaultVariants: { variant: 'outline' } } } // affects every component,Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }),nuxt.config ui.button.size: 'sm',Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
38,Performance,Enable component detection for Nuxt,Generate CSS only for detected Nuxt UI components and their dependencies,Use true for static usage or include dynamic component names in an array,Enable detection and omit components rendered through dynamic :is values,ui: { experimental: { componentDetection: ['Modal'] } },"componentDetection: true with <component :is=""name""/> only",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
39,Performance,Use UTable virtualize for large data,Enable row virtualization when rendering large datasets,Use the virtualize prop after row rendering becomes a measured bottleneck,Render a large dataset without pagination or virtualization,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
40,Accessibility,Give overlays an accessible name and description,Overlay title and description props provide dialog labeling,Provide title and description unless custom slots supply equivalent semantics,Open an unlabeled modal,"<UModal title=""Settings"" description=""Update your preferences"">",<UModal><template #body>...</template></UModal>,High,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
41,Accessibility,Associate labels with controls,Use UFormField or correct native id and for attributes,UFormField for convenience or explicit label association,Use placeholders as labels,"<UFormField label=""Email""><UInput/></UFormField>","<UInput placeholder=""Email""/>",High,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc,nuxt-ui 4.11.1,active,2026-09-21
43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,"<UCommandPalette :groups=""searchResults""/>",Low,https://ui.nuxt.com/docs/components/content-search,nuxt-ui 4.11.1,active,2026-09-21
44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages,nuxt-ui 4.11.1,active,2026-09-21
45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,"<UChatPrompt v-model=""prompt""/>","<UTextarea v-model=""prompt""/>",Medium,https://ui.nuxt.com/docs/components/chat-prompt,nuxt-ui 4.11.1,active,2026-09-21
46,Editor,Use UEditor for rich text,TipTap-based editor binds its document with v-model,UEditor with v-model,Use the undocumented v-model:content binding,"<UEditor v-model=""content""/>","<UEditor v-model:content=""content""/>",Medium,https://ui.nuxt.com/docs/components/editor,nuxt-ui 4.11.1,active,2026-09-21
47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,"to=""/dashboard"" for internal links",href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
48,Links,Use to for external URLs,ULink and link-enabled components detect absolute URLs and support target when a new tab is intended,"to=""https://example.com"" target=""_blank""",Use href inconsistently or claim an external prop is required,"<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link,nuxt-ui 4.11.1,active,2026-09-21
49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
51,Installation,Let Nuxt UI declare module dependencies,Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration,Configure dependency options at their root keys,Add duplicate module entries without a documented need,icon: { /* opts */ } in nuxt.config,"modules: ['@nuxt/ui', '@nuxt/icon']",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
52,Installation,Use official templates to bootstrap projects,Create a Nuxt project from an official Nuxt UI template,npm create nuxt@latest -- -t ui/dashboard,Manually reconstruct a template,npm create nuxt@latest -- -t ui/dashboard,pnpm create nuxt app then copy dashboard files,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
53,Icons,Install required icon collections locally,Install the Iconify JSON collections used by the app for reliable SSR and bundling,pnpm i @iconify-json/lucide for lucide icons,Rely on an unavailable collection at runtime,pnpm i @iconify-json/lucide,Use i-custom-* without installing its collection,Medium,https://ui.nuxt.com/docs/getting-started/icons/nuxt,nuxt-ui 4.11.1,active,2026-09-21
54,Icons,Override default component icons centrally when needed,appConfig.ui.icons keeps intentional icon overrides consistent,Set a global icon key when the product needs a different default,Repeat the same icon override on every component instance,"defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })","<UModal close-icon=""i-lucide-circle-x""/> repeated everywhere",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
55,Forms,Use UFileUpload for file input,Built-in drag-drop and preview support,UFileUpload with v-model and accept prop,Custom input type=file,"<UFileUpload v-model=""files"" accept=""image/*"" multiple/>","<input type=""file"" @change=""handleFiles"">",Medium,https://ui.nuxt.com/docs/components/file-upload,nuxt-ui 4.11.1,active,2026-09-21
56,Forms,Use UInputDate for date selection,Date input supports single dates and ranges with locale inherited from UApp,Use range when needed and configure locale on UApp,Third-party date picker libraries,"<UApp :locale=""fr""><UInputDate v-model=""range"" range/></UApp>","<UInputDate locale=""fr""/>",Medium,https://ui.nuxt.com/docs/components/input-date,nuxt-ui 4.11.1,active,2026-09-21
57,Forms,Use UInputTags for tag input,Multi-value tag input with keyboard support,UInputTags with v-model and max prop,Custom chip input implementation,"<UInputTags v-model=""tags"" :max=""5"" />","<UInput @keydown.enter=""addTag"">",Low,https://ui.nuxt.com/docs/components/input-tags,nuxt-ui 4.11.1,active,2026-09-21
58,Forms,Use UColorPicker for color selection,Full-featured color picker with multiple format support,UColorPicker with v-model and format prop,Native input type=color,"<UColorPicker v-model=""color"" format=""hex"" />","<input type=""color"" v-model=""color"">",Low,https://ui.nuxt.com/docs/components/color-picker,nuxt-ui 4.11.1,active,2026-09-21
59,Data,Use UTree for hierarchical data,Built-in tree component with expand/collapse,UTree with items prop containing nested children,Custom recursive component,"<UTree :items=""treeItems"" />","<TreeNode v-for=""item in items"" :key=""item.id"">",Low,https://ui.nuxt.com/docs/components/tree,nuxt-ui 4.11.1,active,2026-09-21
60,Data,Use UMarquee for infinite scroll content,Animated infinite scroll band for logos or testimonials,UMarquee with repeat and pauseOnHover props,CSS animation keyframes loop,"<UMarquee :repeat=""3"" pause-on-hover>","<div class=""animate-marquee"">",Low,https://ui.nuxt.com/docs/components/marquee,nuxt-ui 4.11.1,active,2026-09-21
61,Overlays,Use UContextMenu for right-click menus,Context menu triggered by right-click on children,UContextMenu wrapping target element,Browser default context menu,"<UContextMenu :items=""menuItems""><div>Right-click me</div></UContextMenu>","<div @contextmenu.prevent=""showMenu"">",Medium,https://ui.nuxt.com/docs/components/context-menu,nuxt-ui 4.11.1,active,2026-09-21
62,Overlays,Await overlay result for confirmation dialogs,open() returns a Promise that resolves when the overlay component emits close,Emit a close value from the overlay component and await modal.open(),Expect a result from a component that never emits close,if (await modal.open()) { deleteItem() },modal.open(); deleteItem(),Medium,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
63,Navigation,Use UCommandPalette with identified groups,"Command palette accepts groups with an id, label, and items",Give every group a stable id and its own items,Pass a flat items prop that is not part of the component API,"<UCommandPalette :groups=""[{ id: 'actions', label: 'Actions', items }]""/>","<UCommandPalette :items=""flatList""/>",Medium,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21
64,Navigation,Use defineShortcuts with extractShortcuts,Wire keyboard shortcuts from menu item kbds automatically,extractShortcuts(items) + defineShortcuts to sync keybindings,Manually duplicate shortcuts from menu items,defineShortcuts(extractShortcuts(items)),defineShortcuts({ meta_n: () => newFile() }) // duplicated from items,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
65,Layout,Use UHeader and UFooter for page layout,Responsive header/footer with built-in mobile menu,UHeader with #default slot for nav UFooter with columns,Custom header/footer from scratch,<UHeader><template #right><UNavigationMenu/></template></UHeader>,"<header class=""sticky top-0"">",Low,https://ui.nuxt.com/docs/components/header,nuxt-ui 4.11.1,active,2026-09-21
66,Layout,Use UPageAside for sidebar content,Sidebar that hides below lg breakpoint automatically,UPageAside for docs and landing page sidebars,Manual hidden lg: classes,"<UPageAside><UNavigationMenu orientation=""vertical""/></UPageAside>","<aside class=""hidden lg:block"">",Low,https://ui.nuxt.com/docs/components/page-aside,nuxt-ui 4.11.1,active,2026-09-21
67,Color Mode,Wrap custom color mode toggles in ClientOnly,Prevents hydration mismatch on server-rendered color mode,ClientOnly with fallback placeholder,Direct useColorMode in template without ClientOnly,"<ClientOnly><USwitch v-model=""isDark""/><template #fallback><div class=""size-8""/></template></ClientOnly>","<USwitch v-model=""isDark""/> directly in template",Medium,https://ui.nuxt.com/docs/getting-started/integrations/color-mode/nuxt,nuxt-ui 4.11.1,active,2026-09-21
68,Theming,Read generated theme file to find slot names,"Generated theme files list current slots, variants, and default classes",Check .nuxt/ui in Nuxt or node_modules/.nuxt-ui/ui in Vue before overriding slots,Guess slot names or use trial-and-error,.nuxt/ui/button.ts or node_modules/.nuxt-ui/ui/button.ts,"<UButton :ui=""{ base: 'rounded-full' }""/> without checking slots",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
69,Composables,Use defineShortcuts whenever keyword shortcut,whenever array condition prevents shortcut firing when inactive,whenever: [isFormValid] to guard shortcut execution,Always-on shortcuts that fire in wrong context,"defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })",defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
70,i18n,Use UApp locale prop for internationalization,"UApp locale configures component messages, formatting, and direction",Pass a locale object to UApp and propagate lang and dir to html,Translate built-in component strings instance by instance,"import { fr } from '@nuxt/ui/locale'; // <UApp :locale=""fr"">","<UModal title=""Fermer""> manually for each component",Low,https://ui.nuxt.com/docs/getting-started/integrations/i18n/nuxt,nuxt-ui 4.11.1,active,2026-09-21
71,Layout,Use USplitter for resizable panel layouts,"Splitter provides horizontal, vertical, nested, and collapsible resizable panels",Define panel items with stable slots and size constraints,Reimplement drag resizing and keyboard behavior,"<USplitter id=""layout"" :items=""items"" class=""h-96"">","<div @mousemove=""resizePanels"">",Medium,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
72,Layout,Stabilize server-rendered splitter layouts,Generated ids and mixed default sizes can cause hydration mismatches or panel jumps,Set id and give defaultSize to every item or to none; use auto-save-id for persistence,Mix items with and without defaultSize during SSR,"<USplitter id=""layout"" auto-save-id=""layout"" :items=""sizedItems"">","<USplitter :items=""mixedDefaultSizes"">",High,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
73,Data,Use UProgressGroup for segmented totals,ProgressGroup displays multiple values as segments of one total with a legend,Pass labeled items and an explicit max when the total is not 100,Build a segmented progress bar from unrelated div widths,"<UProgressGroup :items=""usage"" :max=""128"" status/>","<div v-for=""item in usage"" :style=""{ width: item.value + '%' }"">",Low,https://ui.nuxt.com/docs/components/progress-group,nuxt-ui 4.11.1,active,2026-09-21
74,Motion,Retune library motion with theme easing tokens,"Nuxt UI 4.11 uses --ease-out for enter, exit, and movement transitions",Override --ease-out in @theme to retime motion consistently,Override transition timing independently on every component,"@theme { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }",.modal { transition-timing-function: ... } repeated per component,Low,https://ui.nuxt.com/docs/getting-started/theme/design-system#motion,nuxt-ui 4.11.1,active,2026-09-21
75,Performance,Enable component detection in Vue and Vite,The Nuxt UI Vite plugin can generate CSS only for detected components,Set experimental.componentDetection in the @nuxt/ui/vite plugin and restart after adding components,Expect newly detected component styles without restarting the dev server,ui({ experimental: { componentDetection: true } }),ui({}) // generates theme CSS for every component,Low,https://ui.nuxt.com/docs/getting-started/installation/vue#experimentalcomponentdetection,nuxt-ui 4.11.1,active,2026-09-21
76,Security,Use Nuxt UI 4.11+ for CommandPalette search,Nuxt UI 4.11 escapes CommandPalette search highlights to prevent XSS,Upgrade @nuxt/ui to 4.11.1 or newer when rendering untrusted command labels,Render untrusted CommandPalette labels with a pre-4.11 release,pnpm add @nuxt/ui@^4.11.1,@nuxt/ui@4.10 with user-controlled command labels,High,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21

1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 1 Installation Add Nuxt UI module Install and configure Nuxt UI in your Nuxt project Install Nuxt UI and Tailwind CSS, then register the Nuxt module pnpm add @nuxt/ui and add to modules pnpm add @nuxt/ui tailwindcss and add @nuxt/ui to modules Manual component imports modules: ['@nuxt/ui'] modules: ['@nuxt/ui'] // after pnpm add @nuxt/ui tailwindcss import { UButton } from '@nuxt/ui' High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
3 2 Installation Import Tailwind and Nuxt UI CSS Required CSS imports in main.css file @import tailwindcss and @import @nuxt/ui Skip CSS imports @import "tailwindcss"; @import "@nuxt/ui"; No CSS imports High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
4 3 Installation Wrap app with UApp component UApp provides global configs for Toast Tooltip and overlays UApp provides toast, tooltip, overlay, and locale context <UApp> wrapper in app.vue Wrap NuxtPage or RouterView once at the app root Skip UApp wrapper Mount pages outside UApp <UApp><NuxtPage/></UApp> <NuxtPage/> without wrapper High https://ui.nuxt.com/docs/components/app nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
5 4 Components Use U prefix for components All Nuxt UI components use U prefix by default UButton UInput UModal Button Input Modal <UButton>Click</UButton> <Button>Click</Button> Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
6 5 Components Use semantic color props Use semantic colors like primary secondary error Style Nuxt UI components with meaning-based colors such as primary, success, and error color="primary" color="error" Use color props such as color="primary" or color="error" Hardcoded colors Hardcoded palette colors <UButton color="primary"> <UButton class="bg-green-500"> Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
7 6 Components Use variant prop for styling Nuxt UI provides solid outline soft subtle ghost link variants variant="soft" variant="outline" Choose a built-in variant before adding custom classes Custom button classes Recreate a built-in variant with custom classes <UButton variant="soft"> <UButton class="border bg-transparent"> Medium https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
8 7 Components Use size prop consistently Components support xs sm md lg xl sizes size="sm" size="lg" Arbitrary sizing classes <UButton size="lg"> <UButton class="text-xl px-6"> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
9 8 Icons Use i-{collection}-{name} format for icons Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy i-lucide-home i-heroicons-user format lucide:home format (v3 syntax) <UButton icon="i-lucide-home"> <UButton icon="lucide:home"> High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
10 9 Icons Use leadingIcon and trailingIcon props Position icons with dedicated props for clarity leadingIcon="i-lucide-plus" trailingIcon="i-lucide-arrow-right" Use leadingIcon or trailingIcon for standard button icons Manual icon positioning or slots Build a custom icon slot when a standard icon prop is enough <UButton leadingIcon="i-lucide-plus" label="Add"> <UButton><UIcon name="i-lucide-plus"/>Add</UButton> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
11 10 Theming Configure colors in app.config.ts Runtime color configuration without restart ui.colors.primary in app.config.ts Hardcoded colors in components defineAppConfig({ ui: { colors: { primary: 'blue' } } }) <UButton class="bg-blue-500"> High https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
12 11 Theming Use @theme directive for custom colors Define complete custom palettes with @theme static Define design tokens in CSS with Tailwind @theme Nuxt UI custom colors require shades 50 through 950 @theme { --color-brand-500: #xxx } Define every --color-brand-* shade in @theme static Inline color definitions Define only one shade for a custom palette @theme { --color-brand-500: #ef4444; } @theme static { --color-brand-50: #fff1f2; ... --color-brand-950: #4c0519; } :style="{ color: '#ef4444' }" @theme { --color-brand-500: #ef4444; } Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
13 12 Theming Register and map semantic colors Register extra semantic color names at build time then map them to a palette in app.config nuxt.config ui.theme.colors plus app.config ui.colors Use an unregistered semantic color ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet' <UButton color="tertiary"> without config Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
14 13 Forms Use UForm with schema validation UForm supports Zod Yup Joi Valibot schemas UForm accepts Standard Schema libraries such as Zod, Valibot, Yup, and Joi :schema prop with validation schema Pass a Standard Schema with :schema and reactive state with :state Manual form validation <UForm :schema="schema" :state="state"> Manual @blur validation High https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
15 14 Forms Use UFormField for field wrapper Provides label error message and validation display UFormField with name prop Manual error handling <UFormField name="email" label="Email"> <div><label>Email</label><UInput/><span>error</span></div> Medium https://ui.nuxt.com/docs/components/form-field nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
16 15 Forms Handle form submit with @submit UForm emits submit event with validated data @submit handler on UForm @click on submit button <UForm @submit="onSubmit"> <UButton @click="onSubmit"> Medium https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
17 16 Forms Choose validation timing deliberately UForm validates on input blur and change by default; input is delayed and begins after blur unless eager Set validateOn and eager to match the interaction Assume the default validates every keystroke immediately <UForm :validateOn="['blur', 'change']"> Describe default UForm as eager input-only validation Low https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
18 17 Overlays Use v-model:open for overlay control Modal Slideover Drawer use v-model:open v-model:open for controlled state Manual show/hide logic <UModal v-model:open="isOpen"> <UModal v-if="isOpen"> Medium https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
19 18 Overlays Use useOverlay composable for programmatic overlays Open overlays programmatically — v4 API is create().open() not open(Component) overlay.create(Component).open({ props }) pattern Create the overlay once, then pass component props directly to open() v3 overlay.open(Component) pattern (removed in v4) const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }) overlay.open(MyModal, { props: { title: 'Confirm' } }) High https://ui.nuxt.com/docs/components/modal https://ui.nuxt.com/docs/composables/use-overlay nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
20 19 Overlays Use title and description props Built-in header support for overlays title="Confirm" description="Are you sure?" Use title and description props for a standard overlay header Manual header content Rebuild a simple title and description with a custom header slot <UModal title="Confirm" description="Are you sure?"> <UModal><template #header><h2>Confirm</h2></template> Low https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
21 20 Dashboard Use UDashboardSidebar for navigation Provides collapsible resizable sidebar with mobile support UDashboardSidebar with header default footer slots Custom sidebar implementation <UDashboardSidebar><template #header>...</template></UDashboardSidebar> <aside class="w-64 border-r"> Medium https://ui.nuxt.com/docs/components/dashboard-sidebar nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
22 21 Dashboard Use UDashboardGroup for layout Wraps dashboard components with sidebar state management UDashboardGroup > UDashboardSidebar + UDashboardPanel Manual layout flex containers <UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup> <div class="flex"><aside/><main/></div> Medium https://ui.nuxt.com/docs/components/dashboard-group nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
23 22 Dashboard Use UDashboardNavbar for top navigation Responsive navbar with mobile menu support Responsive dashboard header with sidebar toggle and layout slots UDashboardNavbar in dashboard layout Place UDashboardNavbar in a UDashboardPanel header and use its slots for actions Custom navbar implementation Pass unsupported links props or rebuild the responsive toggle <UDashboardNavbar :links="navLinks"/> <UDashboardNavbar title="Dashboard"><template #right><UButton label="Add"/></template></UDashboardNavbar> <nav class="border-b"> <UDashboardNavbar :links="navLinks"/> Low https://ui.nuxt.com/docs/components/dashboard-navbar nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
24 23 Tables Use UTable with data and columns props Powered by TanStack Table with built-in features :data and :columns props Manual table markup <UTable :data="users" :columns="columns"/> <table><tr v-for="user in users"> High https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
25 24 Tables Define columns with accessorKey Column definitions use accessorKey for data binding accessorKey: 'email' in column def String column names only { accessorKey: 'email', header: 'Email' } ['name', 'email'] Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
26 25 Tables Use column cell slots Customize cell content with the documented column-id slot pattern #status-cell for a status column Use the obsolete #cell-status name <template #status-cell="{ row }"> <template #cell-status="{ row }"> Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
27 26 Tables Enable sorting with TanStack column APIs Render a header control that calls column.toggleSorting Use getCanSort and toggleSorting Invent a sortable property not in the column contract header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() }) { accessorKey: 'name', sortable: true } Low https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
28 27 Navigation Use UNavigationMenu for nav links Horizontal or vertical navigation with dropdown support UNavigationMenu with items array Manual nav with v-for <UNavigationMenu :items="navItems"/> <nav><a v-for="item in items"> Medium https://ui.nuxt.com/docs/components/navigation-menu nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
29 28 Navigation Use UBreadcrumb for page hierarchy Automatic breadcrumb with NuxtLink support Render accessible page hierarchy from an items array with NuxtLink support :items array with label and to Manual breadcrumb links <UBreadcrumb :items="breadcrumbs"/> <nav><span v-for="crumb in crumbs"> Low https://ui.nuxt.com/docs/components/breadcrumb nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
30 29 Navigation Use UTabs for tabbed content Tab navigation with content panels UTabs with items containing slot content Manual tab state <UTabs :items="tabs"/> <div><button @click="tab=1"> Medium https://ui.nuxt.com/docs/components/tabs nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
31 30 Feedback Use useToast for notifications Composable for toast notifications Composable notifications rendered by the UApp toast provider useToast().add({ title description }) Wrap the app in UApp and call useToast().add() Alert components for toasts const toast = useToast(); toast.add({ title: 'Saved' }) <UAlert v-if="showSuccess"> High https://ui.nuxt.com/docs/components/toast nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
32 31 Feedback Use UAlert for inline messages Static alert messages with icon and actions UAlert with title description color Toast for static messages <UAlert title="Warning" color="warning"/> useToast for inline alerts Medium https://ui.nuxt.com/docs/components/alert nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
33 32 Feedback Use USkeleton for loading states Placeholder content during data loading USkeleton with appropriate size Spinner for content loading <USkeleton class="h-4 w-32"/> <UIcon name="lucide:loader" class="animate-spin"/> <UIcon name="i-lucide-loader-circle" class="animate-spin"/> Low https://ui.nuxt.com/docs/components/skeleton nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
34 33 Color Mode Use UColorModeButton for theme toggle Built-in light/dark mode toggle button UColorModeButton component Manual color mode logic <UColorModeButton/> <button @click="toggleColorMode"> Low https://ui.nuxt.com/docs/components/color-mode-button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
35 34 Color Mode Use UColorModeSelect for theme picker Dropdown to select system light or dark mode UColorModeSelect component Custom select for theme <UColorModeSelect/> <USelect v-model="colorMode" :items="modes"/> Low https://ui.nuxt.com/docs/components/color-mode-select nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
36 35 Customization Use ui prop for component styling Use class for the root and ui for named slots Override component styles via ui prop class customizes the root slot; ui targets component slots ui prop with slot class overrides Use class for root-only changes and ui after checking generated slot names Global CSS overrides Use !important or guess undocumented slot names <UButton :ui="{ base: 'rounded-full' }"/> <UButton class="rounded-full" :ui="{ trailingIcon: 'size-3' }"/> <UButton class="!rounded-full"/> Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
37 36 Customization Configure default variants in app.config Set component default variants under ui component keys app.config ui.button.defaultVariants Put component defaults in nuxt.config Put button-specific defaults under global ui.theme.defaultVariants defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } }) ui.theme.defaultVariants in nuxt.config ui: { theme: { defaultVariants: { variant: 'outline' } } } // affects every component Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
38 37 Customization Use app.config.ts for theme overrides Runtime theme customization defineAppConfig with ui key nuxt.config for runtime values defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }) nuxt.config ui.button.size: 'sm' Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
39 38 Performance Enable component detection Enable component detection for Nuxt Tree-shake unused component CSS Generate CSS only for detected Nuxt UI components and their dependencies experimental.componentDetection: true Use true for static usage or include dynamic component names in an array Include all component CSS Enable detection and omit components rendered through dynamic :is values ui: { experimental: { componentDetection: true } } ui: { experimental: { componentDetection: ['Modal'] } } ui: {} (includes all CSS) componentDetection: true with <component :is="name"/> only Low https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
40 39 Performance Use UTable virtualize for large data Enable virtualization for 1000+ rows Enable row virtualization when rendering large datasets :virtualize prop on UTable Use the virtualize prop after row rendering becomes a measured bottleneck Render all rows Render a large dataset without pagination or virtualization <UTable :data="largeData" virtualize/> <UTable :data="largeData"/> Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
41 40 Accessibility Use semantic component props Give overlays an accessible name and description Components have built-in ARIA support Overlay title and description props provide dialog labeling Use title description label props Provide title and description unless custom slots supply equivalent semantics Skip accessibility props Open an unlabeled modal <UModal title="Settings"> <UModal title="Settings" description="Update your preferences"> <UModal><h2>Settings</h2> <UModal><template #body>...</template></UModal> Medium High https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
42 41 Accessibility Associate labels with controls Use UFormField or correct native id and for attributes UFormField for convenience or explicit label association Use placeholders as labels <UFormField label="Email"><UInput/></UFormField> <UInput placeholder="Email"/> High https://ui.nuxt.com/docs/components/form-field nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
43 42 Content Use UContentToc for table of contents Automatic TOC with active heading highlight UContentToc with :links Manual TOC implementation <UContentToc :links="toc"/> <nav><a v-for="heading in headings"> Low https://ui.nuxt.com/docs/components/content-toc nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
44 43 Content Use UContentSearch for docs search Command palette for documentation search UContentSearch with Nuxt Content Custom search implementation <UContentSearch/> <UCommandPalette :groups="searchResults"/> Low https://ui.nuxt.com/docs/components/content-search nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
45 44 AI/Chat Use UChatMessages for chat UI Designed for Vercel AI SDK integration UChatMessages with messages array Custom chat message list <UChatMessages :messages="messages"/> <div v-for="msg in messages"> Medium https://ui.nuxt.com/docs/components/chat-messages nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
46 45 AI/Chat Use UChatPrompt for input Enhanced textarea for AI prompts UChatPrompt with v-model Basic textarea <UChatPrompt v-model="prompt"/> <UTextarea v-model="prompt"/> Medium https://ui.nuxt.com/docs/components/chat-prompt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
47 46 Editor Use UEditor for rich text TipTap-based editor binds its document with v-model UEditor with v-model Use the undocumented v-model:content binding <UEditor v-model="content"/> <UEditor v-model:content="content"/> Medium https://ui.nuxt.com/docs/components/editor nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
48 47 Links Use to prop for navigation UButton and ULink support NuxtLink to prop to="/dashboard" for internal links href for internal navigation <UButton to="/dashboard"> <UButton href="/dashboard"> Medium https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
49 48 Links Use to for external URLs ULink and link-enabled components detect absolute URLs and support target when a new tab is intended to="https://example.com" target="_blank" Use href inconsistently or claim an external prop is required <UButton to="https://example.com" target="_blank"> <UButton href="https://..."> Low https://ui.nuxt.com/docs/components/link nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
50 49 Loading Use loadingAuto on buttons Automatic loading state from @click promise loadingAuto prop on UButton Manual loading state <UButton loadingAuto @click="async () => await save()"> <UButton :loading="isLoading" @click="save"> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
51 50 Loading Use UForm loadingAuto Auto-disable form during submit loadingAuto on UForm (default true) Manual form disabled state <UForm @submit="handleSubmit"> <UForm :disabled="isSubmitting"> Low https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
52 51 Installation Let Nuxt UI declare module dependencies Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration Configure dependency options at their root keys Add duplicate module entries without a documented need icon: { /* opts */ } in nuxt.config modules: ['@nuxt/ui', '@nuxt/icon'] High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
53 52 Installation Use official templates to bootstrap projects Create a Nuxt project from an official Nuxt UI template npm create nuxt@latest -- -t ui/dashboard Manually reconstruct a template npm create nuxt@latest -- -t ui/dashboard pnpm create nuxt app then copy dashboard files Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
54 53 Icons Install required icon collections locally Install Iconify JSON collections used by the app; Nuxt UI 4.10 can bundle icons from installed collections Install the Iconify JSON collections used by the app for reliable SSR and bundling pnpm i @iconify-json/lucide for lucide icons Rely on an unavailable collection at runtime pnpm i @iconify-json/lucide Use i-custom-* without installing its collection Medium https://ui.nuxt.com/docs/getting-started/icons/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
55 54 Icons Override default component icons globally Override default component icons centrally when needed Components use default icons configurable via appConfig.ui.icons appConfig.ui.icons keeps intentional icon overrides consistent Set loading close check icons in app.config.ts Set a global icon key when the product needs a different default Accept default icons for all components Repeat the same icon override on every component instance defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } }) <UModal :close-icon="'i-lucide-x'"> on every usage <UModal close-icon="i-lucide-circle-x"/> repeated everywhere Low https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
56 55 Forms Use UFileUpload for file input Built-in drag-drop and preview support UFileUpload with v-model and accept prop Custom input type=file <UFileUpload v-model="files" accept="image/*" multiple/> <input type="file" @change="handleFiles"> Medium https://ui.nuxt.com/docs/components/file-upload nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
57 56 Forms Use UInputDate for date selection Locale-aware date picker built on UCalendar Date input supports single dates and ranges with locale inherited from UApp UInputDate with v-model and locale prop Use range when needed and configure locale on UApp Third-party date picker libraries <UInputDate v-model="date" /> <UApp :locale="fr"><UInputDate v-model="range" range/></UApp> <DatePicker v-model="date" /> <UInputDate locale="fr"/> Medium https://ui.nuxt.com/docs/components/input-date nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
58 57 Forms Use UInputTags for tag input Multi-value tag input with keyboard support UInputTags with v-model and max prop Custom chip input implementation <UInputTags v-model="tags" :max="5" /> <UInput @keydown.enter="addTag"> Low https://ui.nuxt.com/docs/components/input-tags nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
59 58 Forms Use UColorPicker for color selection Full-featured color picker with multiple format support UColorPicker with v-model and format prop Native input type=color <UColorPicker v-model="color" format="hex" /> <input type="color" v-model="color"> Low https://ui.nuxt.com/docs/components/color-picker nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
60 59 Data Use UTree for hierarchical data Built-in tree component with expand/collapse UTree with items prop containing nested children Custom recursive component <UTree :items="treeItems" /> <TreeNode v-for="item in items" :key="item.id"> Low https://ui.nuxt.com/docs/components/tree nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
61 60 Data Use UMarquee for infinite scroll content Animated infinite scroll band for logos or testimonials UMarquee with repeat and pauseOnHover props CSS animation keyframes loop <UMarquee :repeat="3" pause-on-hover> <div class="animate-marquee"> Low https://ui.nuxt.com/docs/components/marquee nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
62 61 Overlays Use UContextMenu for right-click menus Context menu triggered by right-click on children UContextMenu wrapping target element Browser default context menu <UContextMenu :items="menuItems"><div>Right-click me</div></UContextMenu> <div @contextmenu.prevent="showMenu"> Medium https://ui.nuxt.com/docs/components/context-menu nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
63 62 Overlays Await overlay result for confirmation dialogs useOverlay returns a result Promise resolving to user action open() returns a Promise that resolves when the overlay component emits close await instance.result to get confirm/cancel Emit a close value from the overlay component and await modal.open() Emit events from overlay components Expect a result from a component that never emits close const { result } = modal.open(); if (await result) { deleteItem() } if (await modal.open()) { deleteItem() } overlay.open(Confirm, { onConfirm: deleteItem }) modal.open(); deleteItem() Medium https://ui.nuxt.com/docs/components/modal https://ui.nuxt.com/docs/composables/use-overlay nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
64 63 Navigation Use UCommandPalette with grouped items Use UCommandPalette with identified groups Command palette supports grouped search with icons and kbds Command palette accepts groups with an id, label, and items groups array with id label items Give every group a stable id and its own items Flat list without categories Pass a flat items prop that is not part of the component API <UCommandPalette :groups="[{ id: 'actions', label: 'Actions', items }]"/> <UCommandPalette :items="flatList"/> Medium https://ui.nuxt.com/docs/components/command-palette nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
65 64 Navigation Use defineShortcuts with extractShortcuts Wire keyboard shortcuts from menu item kbds automatically extractShortcuts(items) + defineShortcuts to sync keybindings Manually duplicate shortcuts from menu items defineShortcuts(extractShortcuts(items)) defineShortcuts({ meta_n: () => newFile() }) // duplicated from items Low https://ui.nuxt.com/docs/composables/define-shortcuts nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
66 65 Layout Use UHeader and UFooter for page layout Responsive header/footer with built-in mobile menu UHeader with #default slot for nav UFooter with columns Custom header/footer from scratch <UHeader><template #right><UNavigationMenu/></template></UHeader> <header class="sticky top-0"> Low https://ui.nuxt.com/docs/components/header nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
67 66 Layout Use UPageAside for sidebar content Sidebar that hides below lg breakpoint automatically UPageAside for docs and landing page sidebars Manual hidden lg: classes <UPageAside><UNavigationMenu orientation="vertical"/></UPageAside> <aside class="hidden lg:block"> Low https://ui.nuxt.com/docs/components/page-aside nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
68 67 Color Mode Wrap custom color mode toggles in ClientOnly Prevents hydration mismatch on server-rendered color mode ClientOnly with fallback placeholder Direct useColorMode in template without ClientOnly <ClientOnly><USwitch v-model="isDark"/><template #fallback><div class="size-8"/></template></ClientOnly> <USwitch v-model="isDark"/> directly in template Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt https://ui.nuxt.com/docs/getting-started/integrations/color-mode/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
69 68 Theming Read generated theme file to find slot names Nuxt UI generates theme files listing all component slots and variants Generated theme files list current slots, variants, and default classes Check .nuxt/ui/<component>.ts for slot names Check .nuxt/ui in Nuxt or node_modules/.nuxt-ui/ui in Vue before overriding slots Guess slot names or use trial-and-error .nuxt/ui/button.ts for UButton slot names .nuxt/ui/button.ts or node_modules/.nuxt-ui/ui/button.ts <UButton :ui="{ base: 'rounded-full' }"/> without checking slots Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
70 69 Composables Use defineShortcuts whenever keyword shortcut whenever array condition prevents shortcut firing when inactive whenever: [isFormValid] to guard shortcut execution Always-on shortcuts that fire in wrong context defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } }) defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid Low https://ui.nuxt.com/docs/composables/define-shortcuts nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
71 70 i18n Use UApp locale prop for internationalization Nuxt UI supports 50+ built-in locales via locale prop on UApp UApp locale configures component messages, formatting, and direction Import locale from @nuxt/ui/locale and pass to UApp Pass a locale object to UApp and propagate lang and dir to html Manual translation of component UI strings Translate built-in component strings instance by instance import { fr } from '@nuxt/ui/locale'; // <UApp :locale="fr"> <UModal title="Fermer"> manually for each component Low https://ui.nuxt.com/docs/composables/define-locale https://ui.nuxt.com/docs/getting-started/integrations/i18n/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
72 71 Layout Use USplitter for resizable panel layouts Splitter provides horizontal, vertical, nested, and collapsible resizable panels Define panel items with stable slots and size constraints Reimplement drag resizing and keyboard behavior <USplitter id="layout" :items="items" class="h-96"> <div @mousemove="resizePanels"> Medium https://ui.nuxt.com/docs/components/splitter nuxt-ui 4.11.1 active 2026-09-21
73 72 Layout Stabilize server-rendered splitter layouts Generated ids and mixed default sizes can cause hydration mismatches or panel jumps Set id and give defaultSize to every item or to none; use auto-save-id for persistence Mix items with and without defaultSize during SSR <USplitter id="layout" auto-save-id="layout" :items="sizedItems"> <USplitter :items="mixedDefaultSizes"> High https://ui.nuxt.com/docs/components/splitter nuxt-ui 4.11.1 active 2026-09-21
74 73 Data Use UProgressGroup for segmented totals ProgressGroup displays multiple values as segments of one total with a legend Pass labeled items and an explicit max when the total is not 100 Build a segmented progress bar from unrelated div widths <UProgressGroup :items="usage" :max="128" status/> <div v-for="item in usage" :style="{ width: item.value + '%' }"> Low https://ui.nuxt.com/docs/components/progress-group nuxt-ui 4.11.1 active 2026-09-21
75 74 Motion Retune library motion with theme easing tokens Nuxt UI 4.11 uses --ease-out for enter, exit, and movement transitions Override --ease-out in @theme to retime motion consistently Override transition timing independently on every component @theme { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } .modal { transition-timing-function: ... } repeated per component Low https://ui.nuxt.com/docs/getting-started/theme/design-system#motion nuxt-ui 4.11.1 active 2026-09-21
76 75 Performance Enable component detection in Vue and Vite The Nuxt UI Vite plugin can generate CSS only for detected components Set experimental.componentDetection in the @nuxt/ui/vite plugin and restart after adding components Expect newly detected component styles without restarting the dev server ui({ experimental: { componentDetection: true } }) ui({}) // generates theme CSS for every component Low https://ui.nuxt.com/docs/getting-started/installation/vue#experimentalcomponentdetection nuxt-ui 4.11.1 active 2026-09-21
77 76 Security Use Nuxt UI 4.11+ for CommandPalette search Nuxt UI 4.11 escapes CommandPalette search highlights to prevent XSS Upgrade @nuxt/ui to 4.11.1 or newer when rendering untrusted command labels Render untrusted CommandPalette labels with a pre-4.11 release pnpm add @nuxt/ui@^4.11.1 @nuxt/ui@4.10 with user-controlled command labels High https://ui.nuxt.com/docs/components/command-palette nuxt-ui 4.11.1 active 2026-09-21

2
.claude/skills/ui-ux-pro-max/scripts/core.py
View File

@ -156,7 +156,7 @@ STACK_CURRENT_APPLICABILITY = {
"html-tailwind": "html-tailwind 4.3",
"shadcn": "shadcn cli 4",
"nuxtjs": "nuxtjs 4.5",
"nuxt-ui": "nuxt-ui 4.10",
"nuxt-ui": "nuxt-ui 4.11.1",
"react-native": "react-native 0.86.x",
"flutter": "flutter 3.44.x",
"swiftui": "swiftui current",

28
.claude/skills/ui-ux-pro-max/scripts/tests/fixtures/relevance-baseline.json vendored
View File

@ -1707,21 +1707,21 @@
"Guideline": "Let Nuxt UI declare module dependencies"
},
{
"Category": "Icons",
"Guideline": "Install required icon collections locally"
"Category": "Theming",
"Guideline": "Read generated theme file to find slot names"
}
],
"diagnostics": {
"abstained": false,
"calibration_version": "2026-08-12-v1",
"margin": 3.1826026810457666,
"margin": 3.838208672372261,
"normalized_query": "install the Nuxt UI module",
"query_rewrites": [],
"reason": "matched",
"runner_up_score": 9.430568542253825,
"runner_up_score": 9.354004973008944,
"search_query": "install the Nuxt UI module",
"token_coverage": 1.0,
"top_score": 12.613171223299592
"top_score": 13.192213645381205
},
"expectedRoute": null,
"grades": [
@ -1745,25 +1745,25 @@
"Guideline": "Use semantic color props"
},
{
"Category": "Theming",
"Guideline": "Use @theme directive for custom colors"
"Category": "Performance",
"Guideline": "Enable component detection for Nuxt"
},
{
"Category": "Installation",
"Guideline": "Let Nuxt UI declare module dependencies"
"Category": "Theming",
"Guideline": "Define complete custom palettes with @theme static"
}
],
"diagnostics": {
"abstained": false,
"calibration_version": "2026-08-12-v1",
"margin": 0.48203542343964934,
"margin": 13.200313041581737,
"normalized_query": "style Nuxt UI components through meaning-based color props",
"query_rewrites": [],
"reason": "matched",
"runner_up_score": 7.263126698989611,
"runner_up_score": 9.334552712447977,
"search_query": "style Nuxt UI components through meaning-based color props",
"token_coverage": 0.7777777777777778,
"top_score": 7.74516212242926
"token_coverage": 1.0,
"top_score": 22.534865754029713
},
"expectedRoute": null,
"grades": [
@ -3277,7 +3277,7 @@
"typoRecoveryAt3": 1.0
},
"oracleFingerprint": "02e7226428c64a995ec24ae104ce4d186f5f91bf0f062556e90ef9b0fcb6d67a",
"runtimeFingerprint": "8ba69ee0070e055363e089a3a9338d0d2f79196ed4f8509c3a8a0aec379d40df",
"runtimeFingerprint": "1d18a1cac526f15cea7f4e94cef4bed39fafa250a2b6cc81d8c8007b47c6042e",
"samples": {
"cases": 90,
"designSystem": 8,

2
.claude/skills/ui-ux-pro-max/scripts/tests/fixtures/relevance-thresholds.json vendored
View File

@ -2,7 +2,7 @@
"schemaVersion": 1,
"status": "provisional-baseline-regression-gate",
"baselineRevision": "97eb2a2",
"runtimeFingerprint": "8ba69ee0070e055363e089a3a9338d0d2f79196ed4f8509c3a8a0aec379d40df",
"runtimeFingerprint": "1d18a1cac526f15cea7f4e94cef4bed39fafa250a2b6cc81d8c8007b47c6042e",
"oracleFingerprint": "02e7226428c64a995ec24ae104ce4d186f5f91bf0f062556e90ef9b0fcb6d67a",
"approvingMaintainer": "repository maintainer approved Phase 1 testing checkpoint; second judgment review remains required before final-target promotion",
"units": "All metrics are ratios in [0,1]. Precision treats missing ranks as non-relevant. Negative abstention is measured across the hard-negative by domain/stack cross-product.",

2
.claude/skills/ui-ux-pro-max/scripts/tests/test_web_stack_freshness.py
View File

@ -24,7 +24,7 @@ CURRENT_APPLICABILITY = {
"html-tailwind": "html-tailwind 4.3",
"shadcn": "shadcn cli 4",
"nuxtjs": "nuxtjs 4.5",
"nuxt-ui": "nuxt-ui 4.10",
"nuxt-ui": "nuxt-ui 4.11.1",
}

2
cli/assets/data/catalog-summary.json
View File

@ -20,7 +20,7 @@
"motionPresets": 17,
"chartTypes": 25,
"stacks": 22,
"stackGuidelines": 1265
"stackGuidelines": 1271
},
"snapshots": {
"google-fonts.csv": {

146
cli/assets/data/stacks/nuxt-ui.csv
View File

@ -1,71 +1,77 @@
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
1,Installation,Add Nuxt UI module,Install and configure Nuxt UI in your Nuxt project,pnpm add @nuxt/ui and add to modules,Manual component imports,modules: ['@nuxt/ui'],import { UButton } from '@nuxt/ui',High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
3,Installation,Wrap app with UApp component,UApp provides global configs for Toast Tooltip and overlays,<UApp> wrapper in app.vue,Skip UApp wrapper,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app,nuxt-ui 4.10,active,2026-08-13
4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
5,Components,Use semantic color props,Use semantic colors like primary secondary error,"color=""primary"" color=""error""",Hardcoded colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,"variant=""soft"" variant=""outline""",Custom button classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,"size=""sm"" size=""lg""",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
8,Icons,Use i-{collection}-{name} format for icons,Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy,i-lucide-home i-heroicons-user format,lucide:home format (v3 syntax),"<UButton icon=""i-lucide-home"">","<UButton icon=""lucide:home"">",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
9,Icons,Use leadingIcon and trailingIcon props,Position icons with dedicated props for clarity,"leadingIcon=""i-lucide-plus"" trailingIcon=""i-lucide-arrow-right""",Manual icon positioning or slots,"<UButton leadingIcon=""i-lucide-plus"" label=""Add"">","<UButton><UIcon name=""i-lucide-plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,defineAppConfig({ ui: { colors: { primary: 'blue' } } }),"<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
11,Theming,Use @theme directive for custom colors,Define design tokens in CSS with Tailwind @theme,@theme { --color-brand-500: #xxx },Inline color definitions,@theme { --color-brand-500: #ef4444; },":style=""{ color: '#ef4444' }""",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
12,Theming,Register and map semantic colors,Register extra semantic color names at build time then map them to a palette in app.config,nuxt.config ui.theme.colors plus app.config ui.colors,Use an unregistered semantic color,"ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
13,Forms,Use UForm with schema validation,UForm supports Zod Yup Joi Valibot schemas,:schema prop with validation schema,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.10,active,2026-08-13
15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
16,Forms,Choose validation timing deliberately,UForm validates on input blur and change by default; input is delayed and begins after blur unless eager,Set validateOn and eager to match the interaction,Assume the default validates every keystroke immediately,"<UForm :validateOn=""['blur', 'change']"">",Describe default UForm as eager input-only validation,Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">","<UModal v-if=""isOpen"">",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically — v4 API is create().open() not open(Component),overlay.create(Component).open({ props }) pattern,v3 overlay.open(Component) pattern (removed in v4),const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }),"overlay.open(MyModal, { props: { title: 'Confirm' } })",High,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
19,Overlays,Use title and description props,Built-in header support for overlays,"title=""Confirm"" description=""Are you sure?""",Manual header content,"<UModal title=""Confirm"" description=""Are you sure?"">",<UModal><template #header><h2>Confirm</h2></template>,Low,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,"<aside class=""w-64 border-r"">",Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar,nuxt-ui 4.10,active,2026-08-13
21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group,nuxt-ui 4.10,active,2026-08-13
22,Dashboard,Use UDashboardNavbar for top navigation,Responsive navbar with mobile menu support,UDashboardNavbar in dashboard layout,Custom navbar implementation,"<UDashboardNavbar :links=""navLinks""/>","<nav class=""border-b"">",Low,https://ui.nuxt.com/docs/components/dashboard-navbar,nuxt-ui 4.10,active,2026-08-13
23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
25,Tables,Use column cell slots,Customize cell content with the documented column-id slot pattern,#status-cell for a status column,Use the obsolete #cell-status name,"<template #status-cell=""{ row }"">","<template #cell-status=""{ row }"">",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
26,Tables,Enable sorting with TanStack column APIs,Render a header control that calls column.toggleSorting,Use getCanSort and toggleSorting,Invent a sortable property not in the column contract,"header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })","{ accessorKey: 'name', sortable: true }",Low,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu,nuxt-ui 4.10,active,2026-08-13
28,Navigation,Use UBreadcrumb for page hierarchy,Automatic breadcrumb with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb,nuxt-ui 4.10,active,2026-08-13
29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs,nuxt-ui 4.10,active,2026-08-13
30,Feedback,Use useToast for notifications,Composable for toast notifications,useToast().add({ title description }),Alert components for toasts,const toast = useToast(); toast.add({ title: 'Saved' }),"<UAlert v-if=""showSuccess"">",High,https://ui.nuxt.com/docs/components/toast,nuxt-ui 4.10,active,2026-08-13
31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert,nuxt-ui 4.10,active,2026-08-13
32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,"<USkeleton class=""h-4 w-32""/>","<UIcon name=""lucide:loader"" class=""animate-spin""/>",Low,https://ui.nuxt.com/docs/components/skeleton,nuxt-ui 4.10,active,2026-08-13
33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button,nuxt-ui 4.10,active,2026-08-13
34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select,nuxt-ui 4.10,active,2026-08-13
35,Customization,Use ui prop for component styling,Override component styles via ui prop,ui prop with slot class overrides,Global CSS overrides,"<UButton :ui=""{ base: 'rounded-full' }""/>","<UButton class=""!rounded-full""/>",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
36,Customization,Configure default variants in app.config,Set component default variants under ui component keys,app.config ui.button.defaultVariants,Put component defaults in nuxt.config,"defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } })",ui.theme.defaultVariants in nuxt.config,Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }),nuxt.config ui.button.size: 'sm',Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
38,Performance,Enable component detection,Tree-shake unused component CSS,experimental.componentDetection: true,Include all component CSS,ui: { experimental: { componentDetection: true } },ui: {} (includes all CSS),Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
39,Performance,Use UTable virtualize for large data,Enable virtualization for 1000+ rows,:virtualize prop on UTable,Render all rows,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
40,Accessibility,Use semantic component props,Components have built-in ARIA support,Use title description label props,Skip accessibility props,"<UModal title=""Settings"">",<UModal><h2>Settings</h2>,Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
41,Accessibility,Associate labels with controls,Use UFormField or correct native id and for attributes,UFormField for convenience or explicit label association,Use placeholders as labels,"<UFormField label=""Email""><UInput/></UFormField>","<UInput placeholder=""Email""/>",High,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.10,active,2026-08-13
42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc,nuxt-ui 4.10,active,2026-08-13
43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,"<UCommandPalette :groups=""searchResults""/>",Low,https://ui.nuxt.com/docs/components/content-search,nuxt-ui 4.10,active,2026-08-13
44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages,nuxt-ui 4.10,active,2026-08-13
45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,"<UChatPrompt v-model=""prompt""/>","<UTextarea v-model=""prompt""/>",Medium,https://ui.nuxt.com/docs/components/chat-prompt,nuxt-ui 4.10,active,2026-08-13
46,Editor,Use UEditor for rich text,TipTap-based editor binds its document with v-model,UEditor with v-model,Use the undocumented v-model:content binding,"<UEditor v-model=""content""/>","<UEditor v-model:content=""content""/>",Medium,https://ui.nuxt.com/docs/components/editor,nuxt-ui 4.10,active,2026-08-13
47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,"to=""/dashboard"" for internal links",href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
48,Links,Use to for external URLs,ULink and link-enabled components detect absolute URLs and support target when a new tab is intended,"to=""https://example.com"" target=""_blank""",Use href inconsistently or claim an external prop is required,"<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link,nuxt-ui 4.10,active,2026-08-13
49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
51,Installation,Let Nuxt UI declare module dependencies,Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration,Configure dependency options at their root keys,Add duplicate module entries without a documented need,icon: { /* opts */ } in nuxt.config,"modules: ['@nuxt/ui', '@nuxt/icon']",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
52,Installation,Use official templates to bootstrap projects,Create a Nuxt project from an official Nuxt UI template,npm create nuxt@latest -- -t ui/dashboard,Manually reconstruct a template,npm create nuxt@latest -- -t ui/dashboard,pnpm create nuxt app then copy dashboard files,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
53,Icons,Install required icon collections locally,Install Iconify JSON collections used by the app; Nuxt UI 4.10 can bundle icons from installed collections,pnpm i @iconify-json/lucide for lucide icons,Rely on an unavailable collection at runtime,pnpm i @iconify-json/lucide,Use i-custom-* without installing its collection,Medium,https://ui.nuxt.com/docs/getting-started/icons/nuxt,nuxt-ui 4.10,active,2026-08-13
54,Icons,Override default component icons globally,Components use default icons configurable via appConfig.ui.icons,Set loading close check icons in app.config.ts,Accept default icons for all components,"defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })","<UModal :close-icon=""'i-lucide-x'""> on every usage",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
55,Forms,Use UFileUpload for file input,Built-in drag-drop and preview support,UFileUpload with v-model and accept prop,Custom input type=file,"<UFileUpload v-model=""files"" accept=""image/*"" multiple/>","<input type=""file"" @change=""handleFiles"">",Medium,https://ui.nuxt.com/docs/components/file-upload,nuxt-ui 4.10,active,2026-08-13
56,Forms,Use UInputDate for date selection,Locale-aware date picker built on UCalendar,UInputDate with v-model and locale prop,Third-party date picker libraries,"<UInputDate v-model=""date"" />","<DatePicker v-model=""date"" />",Medium,https://ui.nuxt.com/docs/components/input-date,nuxt-ui 4.10,active,2026-08-13
57,Forms,Use UInputTags for tag input,Multi-value tag input with keyboard support,UInputTags with v-model and max prop,Custom chip input implementation,"<UInputTags v-model=""tags"" :max=""5"" />","<UInput @keydown.enter=""addTag"">",Low,https://ui.nuxt.com/docs/components/input-tags,nuxt-ui 4.10,active,2026-08-13
58,Forms,Use UColorPicker for color selection,Full-featured color picker with multiple format support,UColorPicker with v-model and format prop,Native input type=color,"<UColorPicker v-model=""color"" format=""hex"" />","<input type=""color"" v-model=""color"">",Low,https://ui.nuxt.com/docs/components/color-picker,nuxt-ui 4.10,active,2026-08-13
59,Data,Use UTree for hierarchical data,Built-in tree component with expand/collapse,UTree with items prop containing nested children,Custom recursive component,"<UTree :items=""treeItems"" />","<TreeNode v-for=""item in items"" :key=""item.id"">",Low,https://ui.nuxt.com/docs/components/tree,nuxt-ui 4.10,active,2026-08-13
60,Data,Use UMarquee for infinite scroll content,Animated infinite scroll band for logos or testimonials,UMarquee with repeat and pauseOnHover props,CSS animation keyframes loop,"<UMarquee :repeat=""3"" pause-on-hover>","<div class=""animate-marquee"">",Low,https://ui.nuxt.com/docs/components/marquee,nuxt-ui 4.10,active,2026-08-13
61,Overlays,Use UContextMenu for right-click menus,Context menu triggered by right-click on children,UContextMenu wrapping target element,Browser default context menu,"<UContextMenu :items=""menuItems""><div>Right-click me</div></UContextMenu>","<div @contextmenu.prevent=""showMenu"">",Medium,https://ui.nuxt.com/docs/components/context-menu,nuxt-ui 4.10,active,2026-08-13
62,Overlays,Await overlay result for confirmation dialogs,useOverlay returns a result Promise resolving to user action,await instance.result to get confirm/cancel,Emit events from overlay components,const { result } = modal.open(); if (await result) { deleteItem() },"overlay.open(Confirm, { onConfirm: deleteItem })",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
63,Navigation,Use UCommandPalette with grouped items,Command palette supports grouped search with icons and kbds,groups array with id label items,Flat list without categories,"<UCommandPalette :groups=""[{ id: 'actions', label: 'Actions', items }]""/>","<UCommandPalette :items=""flatList""/>",Medium,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.10,active,2026-08-13
64,Navigation,Use defineShortcuts with extractShortcuts,Wire keyboard shortcuts from menu item kbds automatically,extractShortcuts(items) + defineShortcuts to sync keybindings,Manually duplicate shortcuts from menu items,defineShortcuts(extractShortcuts(items)),defineShortcuts({ meta_n: () => newFile() }) // duplicated from items,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.10,active,2026-08-13
65,Layout,Use UHeader and UFooter for page layout,Responsive header/footer with built-in mobile menu,UHeader with #default slot for nav UFooter with columns,Custom header/footer from scratch,<UHeader><template #right><UNavigationMenu/></template></UHeader>,"<header class=""sticky top-0"">",Low,https://ui.nuxt.com/docs/components/header,nuxt-ui 4.10,active,2026-08-13
66,Layout,Use UPageAside for sidebar content,Sidebar that hides below lg breakpoint automatically,UPageAside for docs and landing page sidebars,Manual hidden lg: classes,"<UPageAside><UNavigationMenu orientation=""vertical""/></UPageAside>","<aside class=""hidden lg:block"">",Low,https://ui.nuxt.com/docs/components/page-aside,nuxt-ui 4.10,active,2026-08-13
67,Color Mode,Wrap custom color mode toggles in ClientOnly,Prevents hydration mismatch on server-rendered color mode,ClientOnly with fallback placeholder,Direct useColorMode in template without ClientOnly,"<ClientOnly><USwitch v-model=""isDark""/><template #fallback><div class=""size-8""/></template></ClientOnly>","<USwitch v-model=""isDark""/> directly in template",Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
68,Theming,Read generated theme file to find slot names,Nuxt UI generates theme files listing all component slots and variants,Check .nuxt/ui/<component>.ts for slot names,Guess slot names or use trial-and-error,.nuxt/ui/button.ts for UButton slot names,"<UButton :ui=""{ base: 'rounded-full' }""/> without checking slots",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
69,Composables,Use defineShortcuts whenever keyword shortcut,whenever array condition prevents shortcut firing when inactive,whenever: [isFormValid] to guard shortcut execution,Always-on shortcuts that fire in wrong context,"defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })",defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.10,active,2026-08-13
70,i18n,Use UApp locale prop for internationalization,Nuxt UI supports 50+ built-in locales via locale prop on UApp,Import locale from @nuxt/ui/locale and pass to UApp,Manual translation of component UI strings,"import { fr } from '@nuxt/ui/locale'; // <UApp :locale=""fr"">","<UModal title=""Fermer""> manually for each component",Low,https://ui.nuxt.com/docs/composables/define-locale,nuxt-ui 4.10,active,2026-08-13
1,Installation,Add Nuxt UI module,"Install Nuxt UI and Tailwind CSS, then register the Nuxt module",pnpm add @nuxt/ui tailwindcss and add @nuxt/ui to modules,Manual component imports,modules: ['@nuxt/ui'] // after pnpm add @nuxt/ui tailwindcss,import { UButton } from '@nuxt/ui',High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
3,Installation,Wrap app with UApp component,"UApp provides toast, tooltip, overlay, and locale context",Wrap NuxtPage or RouterView once at the app root,Mount pages outside UApp,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app,nuxt-ui 4.11.1,active,2026-09-21
4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
5,Components,Use semantic color props,"Style Nuxt UI components with meaning-based colors such as primary, success, and error","Use color props such as color=""primary"" or color=""error""",Hardcoded palette colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,Choose a built-in variant before adding custom classes,Recreate a built-in variant with custom classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,"size=""sm"" size=""lg""",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
8,Icons,Use i-{collection}-{name} format for icons,Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy,i-lucide-home i-heroicons-user format,lucide:home format (v3 syntax),"<UButton icon=""i-lucide-home"">","<UButton icon=""lucide:home"">",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
9,Icons,Use leadingIcon and trailingIcon props,Position icons with dedicated props for clarity,Use leadingIcon or trailingIcon for standard button icons,Build a custom icon slot when a standard icon prop is enough,"<UButton leadingIcon=""i-lucide-plus"" label=""Add"">","<UButton><UIcon name=""i-lucide-plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,defineAppConfig({ ui: { colors: { primary: 'blue' } } }),"<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
11,Theming,Define complete custom palettes with @theme static,Nuxt UI custom colors require shades 50 through 950,Define every --color-brand-* shade in @theme static,Define only one shade for a custom palette,@theme static { --color-brand-50: #fff1f2; ... --color-brand-950: #4c0519; },@theme { --color-brand-500: #ef4444; },Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
12,Theming,Register and map semantic colors,Register extra semantic color names at build time then map them to a palette in app.config,nuxt.config ui.theme.colors plus app.config ui.colors,Use an unregistered semantic color,"ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
13,Forms,Use UForm with schema validation,"UForm accepts Standard Schema libraries such as Zod, Valibot, Yup, and Joi",Pass a Standard Schema with :schema and reactive state with :state,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
16,Forms,Choose validation timing deliberately,UForm validates on input blur and change by default; input is delayed and begins after blur unless eager,Set validateOn and eager to match the interaction,Assume the default validates every keystroke immediately,"<UForm :validateOn=""['blur', 'change']"">",Describe default UForm as eager input-only validation,Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">","<UModal v-if=""isOpen"">",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically — v4 API is create().open() not open(Component),"Create the overlay once, then pass component props directly to open()",v3 overlay.open(Component) pattern (removed in v4),const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }),"overlay.open(MyModal, { props: { title: 'Confirm' } })",High,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
19,Overlays,Use title and description props,Built-in header support for overlays,Use title and description props for a standard overlay header,Rebuild a simple title and description with a custom header slot,"<UModal title=""Confirm"" description=""Are you sure?"">",<UModal><template #header><h2>Confirm</h2></template>,Low,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,"<aside class=""w-64 border-r"">",Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar,nuxt-ui 4.11.1,active,2026-09-21
21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group,nuxt-ui 4.11.1,active,2026-09-21
22,Dashboard,Use UDashboardNavbar for top navigation,Responsive dashboard header with sidebar toggle and layout slots,Place UDashboardNavbar in a UDashboardPanel header and use its slots for actions,Pass unsupported links props or rebuild the responsive toggle,"<UDashboardNavbar title=""Dashboard""><template #right><UButton label=""Add""/></template></UDashboardNavbar>","<UDashboardNavbar :links=""navLinks""/>",Low,https://ui.nuxt.com/docs/components/dashboard-navbar,nuxt-ui 4.11.1,active,2026-09-21
23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
25,Tables,Use column cell slots,Customize cell content with the documented column-id slot pattern,#status-cell for a status column,Use the obsolete #cell-status name,"<template #status-cell=""{ row }"">","<template #cell-status=""{ row }"">",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
26,Tables,Enable sorting with TanStack column APIs,Render a header control that calls column.toggleSorting,Use getCanSort and toggleSorting,Invent a sortable property not in the column contract,"header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })","{ accessorKey: 'name', sortable: true }",Low,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu,nuxt-ui 4.11.1,active,2026-09-21
28,Navigation,Use UBreadcrumb for page hierarchy,Render accessible page hierarchy from an items array with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb,nuxt-ui 4.11.1,active,2026-09-21
29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs,nuxt-ui 4.11.1,active,2026-09-21
30,Feedback,Use useToast for notifications,Composable notifications rendered by the UApp toast provider,Wrap the app in UApp and call useToast().add(),Alert components for toasts,const toast = useToast(); toast.add({ title: 'Saved' }),"<UAlert v-if=""showSuccess"">",High,https://ui.nuxt.com/docs/components/toast,nuxt-ui 4.11.1,active,2026-09-21
31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert,nuxt-ui 4.11.1,active,2026-09-21
32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,"<USkeleton class=""h-4 w-32""/>","<UIcon name=""i-lucide-loader-circle"" class=""animate-spin""/>",Low,https://ui.nuxt.com/docs/components/skeleton,nuxt-ui 4.11.1,active,2026-09-21
33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button,nuxt-ui 4.11.1,active,2026-09-21
34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select,nuxt-ui 4.11.1,active,2026-09-21
35,Customization,Use class for the root and ui for named slots,class customizes the root slot; ui targets component slots,Use class for root-only changes and ui after checking generated slot names,Use !important or guess undocumented slot names,"<UButton class=""rounded-full"" :ui=""{ trailingIcon: 'size-3' }""/>","<UButton class=""!rounded-full""/>",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
36,Customization,Configure default variants in app.config,Set component default variants under ui component keys,app.config ui.button.defaultVariants,Put button-specific defaults under global ui.theme.defaultVariants,defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } }),ui: { theme: { defaultVariants: { variant: 'outline' } } } // affects every component,Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }),nuxt.config ui.button.size: 'sm',Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
38,Performance,Enable component detection for Nuxt,Generate CSS only for detected Nuxt UI components and their dependencies,Use true for static usage or include dynamic component names in an array,Enable detection and omit components rendered through dynamic :is values,ui: { experimental: { componentDetection: ['Modal'] } },"componentDetection: true with <component :is=""name""/> only",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
39,Performance,Use UTable virtualize for large data,Enable row virtualization when rendering large datasets,Use the virtualize prop after row rendering becomes a measured bottleneck,Render a large dataset without pagination or virtualization,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
40,Accessibility,Give overlays an accessible name and description,Overlay title and description props provide dialog labeling,Provide title and description unless custom slots supply equivalent semantics,Open an unlabeled modal,"<UModal title=""Settings"" description=""Update your preferences"">",<UModal><template #body>...</template></UModal>,High,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
41,Accessibility,Associate labels with controls,Use UFormField or correct native id and for attributes,UFormField for convenience or explicit label association,Use placeholders as labels,"<UFormField label=""Email""><UInput/></UFormField>","<UInput placeholder=""Email""/>",High,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc,nuxt-ui 4.11.1,active,2026-09-21
43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,"<UCommandPalette :groups=""searchResults""/>",Low,https://ui.nuxt.com/docs/components/content-search,nuxt-ui 4.11.1,active,2026-09-21
44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages,nuxt-ui 4.11.1,active,2026-09-21
45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,"<UChatPrompt v-model=""prompt""/>","<UTextarea v-model=""prompt""/>",Medium,https://ui.nuxt.com/docs/components/chat-prompt,nuxt-ui 4.11.1,active,2026-09-21
46,Editor,Use UEditor for rich text,TipTap-based editor binds its document with v-model,UEditor with v-model,Use the undocumented v-model:content binding,"<UEditor v-model=""content""/>","<UEditor v-model:content=""content""/>",Medium,https://ui.nuxt.com/docs/components/editor,nuxt-ui 4.11.1,active,2026-09-21
47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,"to=""/dashboard"" for internal links",href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
48,Links,Use to for external URLs,ULink and link-enabled components detect absolute URLs and support target when a new tab is intended,"to=""https://example.com"" target=""_blank""",Use href inconsistently or claim an external prop is required,"<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link,nuxt-ui 4.11.1,active,2026-09-21
49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
51,Installation,Let Nuxt UI declare module dependencies,Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration,Configure dependency options at their root keys,Add duplicate module entries without a documented need,icon: { /* opts */ } in nuxt.config,"modules: ['@nuxt/ui', '@nuxt/icon']",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
52,Installation,Use official templates to bootstrap projects,Create a Nuxt project from an official Nuxt UI template,npm create nuxt@latest -- -t ui/dashboard,Manually reconstruct a template,npm create nuxt@latest -- -t ui/dashboard,pnpm create nuxt app then copy dashboard files,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
53,Icons,Install required icon collections locally,Install the Iconify JSON collections used by the app for reliable SSR and bundling,pnpm i @iconify-json/lucide for lucide icons,Rely on an unavailable collection at runtime,pnpm i @iconify-json/lucide,Use i-custom-* without installing its collection,Medium,https://ui.nuxt.com/docs/getting-started/icons/nuxt,nuxt-ui 4.11.1,active,2026-09-21
54,Icons,Override default component icons centrally when needed,appConfig.ui.icons keeps intentional icon overrides consistent,Set a global icon key when the product needs a different default,Repeat the same icon override on every component instance,"defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })","<UModal close-icon=""i-lucide-circle-x""/> repeated everywhere",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
55,Forms,Use UFileUpload for file input,Built-in drag-drop and preview support,UFileUpload with v-model and accept prop,Custom input type=file,"<UFileUpload v-model=""files"" accept=""image/*"" multiple/>","<input type=""file"" @change=""handleFiles"">",Medium,https://ui.nuxt.com/docs/components/file-upload,nuxt-ui 4.11.1,active,2026-09-21
56,Forms,Use UInputDate for date selection,Date input supports single dates and ranges with locale inherited from UApp,Use range when needed and configure locale on UApp,Third-party date picker libraries,"<UApp :locale=""fr""><UInputDate v-model=""range"" range/></UApp>","<UInputDate locale=""fr""/>",Medium,https://ui.nuxt.com/docs/components/input-date,nuxt-ui 4.11.1,active,2026-09-21
57,Forms,Use UInputTags for tag input,Multi-value tag input with keyboard support,UInputTags with v-model and max prop,Custom chip input implementation,"<UInputTags v-model=""tags"" :max=""5"" />","<UInput @keydown.enter=""addTag"">",Low,https://ui.nuxt.com/docs/components/input-tags,nuxt-ui 4.11.1,active,2026-09-21
58,Forms,Use UColorPicker for color selection,Full-featured color picker with multiple format support,UColorPicker with v-model and format prop,Native input type=color,"<UColorPicker v-model=""color"" format=""hex"" />","<input type=""color"" v-model=""color"">",Low,https://ui.nuxt.com/docs/components/color-picker,nuxt-ui 4.11.1,active,2026-09-21
59,Data,Use UTree for hierarchical data,Built-in tree component with expand/collapse,UTree with items prop containing nested children,Custom recursive component,"<UTree :items=""treeItems"" />","<TreeNode v-for=""item in items"" :key=""item.id"">",Low,https://ui.nuxt.com/docs/components/tree,nuxt-ui 4.11.1,active,2026-09-21
60,Data,Use UMarquee for infinite scroll content,Animated infinite scroll band for logos or testimonials,UMarquee with repeat and pauseOnHover props,CSS animation keyframes loop,"<UMarquee :repeat=""3"" pause-on-hover>","<div class=""animate-marquee"">",Low,https://ui.nuxt.com/docs/components/marquee,nuxt-ui 4.11.1,active,2026-09-21
61,Overlays,Use UContextMenu for right-click menus,Context menu triggered by right-click on children,UContextMenu wrapping target element,Browser default context menu,"<UContextMenu :items=""menuItems""><div>Right-click me</div></UContextMenu>","<div @contextmenu.prevent=""showMenu"">",Medium,https://ui.nuxt.com/docs/components/context-menu,nuxt-ui 4.11.1,active,2026-09-21
62,Overlays,Await overlay result for confirmation dialogs,open() returns a Promise that resolves when the overlay component emits close,Emit a close value from the overlay component and await modal.open(),Expect a result from a component that never emits close,if (await modal.open()) { deleteItem() },modal.open(); deleteItem(),Medium,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
63,Navigation,Use UCommandPalette with identified groups,"Command palette accepts groups with an id, label, and items",Give every group a stable id and its own items,Pass a flat items prop that is not part of the component API,"<UCommandPalette :groups=""[{ id: 'actions', label: 'Actions', items }]""/>","<UCommandPalette :items=""flatList""/>",Medium,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21
64,Navigation,Use defineShortcuts with extractShortcuts,Wire keyboard shortcuts from menu item kbds automatically,extractShortcuts(items) + defineShortcuts to sync keybindings,Manually duplicate shortcuts from menu items,defineShortcuts(extractShortcuts(items)),defineShortcuts({ meta_n: () => newFile() }) // duplicated from items,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
65,Layout,Use UHeader and UFooter for page layout,Responsive header/footer with built-in mobile menu,UHeader with #default slot for nav UFooter with columns,Custom header/footer from scratch,<UHeader><template #right><UNavigationMenu/></template></UHeader>,"<header class=""sticky top-0"">",Low,https://ui.nuxt.com/docs/components/header,nuxt-ui 4.11.1,active,2026-09-21
66,Layout,Use UPageAside for sidebar content,Sidebar that hides below lg breakpoint automatically,UPageAside for docs and landing page sidebars,Manual hidden lg: classes,"<UPageAside><UNavigationMenu orientation=""vertical""/></UPageAside>","<aside class=""hidden lg:block"">",Low,https://ui.nuxt.com/docs/components/page-aside,nuxt-ui 4.11.1,active,2026-09-21
67,Color Mode,Wrap custom color mode toggles in ClientOnly,Prevents hydration mismatch on server-rendered color mode,ClientOnly with fallback placeholder,Direct useColorMode in template without ClientOnly,"<ClientOnly><USwitch v-model=""isDark""/><template #fallback><div class=""size-8""/></template></ClientOnly>","<USwitch v-model=""isDark""/> directly in template",Medium,https://ui.nuxt.com/docs/getting-started/integrations/color-mode/nuxt,nuxt-ui 4.11.1,active,2026-09-21
68,Theming,Read generated theme file to find slot names,"Generated theme files list current slots, variants, and default classes",Check .nuxt/ui in Nuxt or node_modules/.nuxt-ui/ui in Vue before overriding slots,Guess slot names or use trial-and-error,.nuxt/ui/button.ts or node_modules/.nuxt-ui/ui/button.ts,"<UButton :ui=""{ base: 'rounded-full' }""/> without checking slots",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
69,Composables,Use defineShortcuts whenever keyword shortcut,whenever array condition prevents shortcut firing when inactive,whenever: [isFormValid] to guard shortcut execution,Always-on shortcuts that fire in wrong context,"defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })",defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
70,i18n,Use UApp locale prop for internationalization,"UApp locale configures component messages, formatting, and direction",Pass a locale object to UApp and propagate lang and dir to html,Translate built-in component strings instance by instance,"import { fr } from '@nuxt/ui/locale'; // <UApp :locale=""fr"">","<UModal title=""Fermer""> manually for each component",Low,https://ui.nuxt.com/docs/getting-started/integrations/i18n/nuxt,nuxt-ui 4.11.1,active,2026-09-21
71,Layout,Use USplitter for resizable panel layouts,"Splitter provides horizontal, vertical, nested, and collapsible resizable panels",Define panel items with stable slots and size constraints,Reimplement drag resizing and keyboard behavior,"<USplitter id=""layout"" :items=""items"" class=""h-96"">","<div @mousemove=""resizePanels"">",Medium,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
72,Layout,Stabilize server-rendered splitter layouts,Generated ids and mixed default sizes can cause hydration mismatches or panel jumps,Set id and give defaultSize to every item or to none; use auto-save-id for persistence,Mix items with and without defaultSize during SSR,"<USplitter id=""layout"" auto-save-id=""layout"" :items=""sizedItems"">","<USplitter :items=""mixedDefaultSizes"">",High,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
73,Data,Use UProgressGroup for segmented totals,ProgressGroup displays multiple values as segments of one total with a legend,Pass labeled items and an explicit max when the total is not 100,Build a segmented progress bar from unrelated div widths,"<UProgressGroup :items=""usage"" :max=""128"" status/>","<div v-for=""item in usage"" :style=""{ width: item.value + '%' }"">",Low,https://ui.nuxt.com/docs/components/progress-group,nuxt-ui 4.11.1,active,2026-09-21
74,Motion,Retune library motion with theme easing tokens,"Nuxt UI 4.11 uses --ease-out for enter, exit, and movement transitions",Override --ease-out in @theme to retime motion consistently,Override transition timing independently on every component,"@theme { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }",.modal { transition-timing-function: ... } repeated per component,Low,https://ui.nuxt.com/docs/getting-started/theme/design-system#motion,nuxt-ui 4.11.1,active,2026-09-21
75,Performance,Enable component detection in Vue and Vite,The Nuxt UI Vite plugin can generate CSS only for detected components,Set experimental.componentDetection in the @nuxt/ui/vite plugin and restart after adding components,Expect newly detected component styles without restarting the dev server,ui({ experimental: { componentDetection: true } }),ui({}) // generates theme CSS for every component,Low,https://ui.nuxt.com/docs/getting-started/installation/vue#experimentalcomponentdetection,nuxt-ui 4.11.1,active,2026-09-21
76,Security,Use Nuxt UI 4.11+ for CommandPalette search,Nuxt UI 4.11 escapes CommandPalette search highlights to prevent XSS,Upgrade @nuxt/ui to 4.11.1 or newer when rendering untrusted command labels,Render untrusted CommandPalette labels with a pre-4.11 release,pnpm add @nuxt/ui@^4.11.1,@nuxt/ui@4.10 with user-controlled command labels,High,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21

1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 1 Installation Add Nuxt UI module Install and configure Nuxt UI in your Nuxt project Install Nuxt UI and Tailwind CSS, then register the Nuxt module pnpm add @nuxt/ui and add to modules pnpm add @nuxt/ui tailwindcss and add @nuxt/ui to modules Manual component imports modules: ['@nuxt/ui'] modules: ['@nuxt/ui'] // after pnpm add @nuxt/ui tailwindcss import { UButton } from '@nuxt/ui' High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
3 2 Installation Import Tailwind and Nuxt UI CSS Required CSS imports in main.css file @import tailwindcss and @import @nuxt/ui Skip CSS imports @import "tailwindcss"; @import "@nuxt/ui"; No CSS imports High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
4 3 Installation Wrap app with UApp component UApp provides global configs for Toast Tooltip and overlays UApp provides toast, tooltip, overlay, and locale context <UApp> wrapper in app.vue Wrap NuxtPage or RouterView once at the app root Skip UApp wrapper Mount pages outside UApp <UApp><NuxtPage/></UApp> <NuxtPage/> without wrapper High https://ui.nuxt.com/docs/components/app nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
5 4 Components Use U prefix for components All Nuxt UI components use U prefix by default UButton UInput UModal Button Input Modal <UButton>Click</UButton> <Button>Click</Button> Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
6 5 Components Use semantic color props Use semantic colors like primary secondary error Style Nuxt UI components with meaning-based colors such as primary, success, and error color="primary" color="error" Use color props such as color="primary" or color="error" Hardcoded colors Hardcoded palette colors <UButton color="primary"> <UButton class="bg-green-500"> Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
7 6 Components Use variant prop for styling Nuxt UI provides solid outline soft subtle ghost link variants variant="soft" variant="outline" Choose a built-in variant before adding custom classes Custom button classes Recreate a built-in variant with custom classes <UButton variant="soft"> <UButton class="border bg-transparent"> Medium https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
8 7 Components Use size prop consistently Components support xs sm md lg xl sizes size="sm" size="lg" Arbitrary sizing classes <UButton size="lg"> <UButton class="text-xl px-6"> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
9 8 Icons Use i-{collection}-{name} format for icons Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy i-lucide-home i-heroicons-user format lucide:home format (v3 syntax) <UButton icon="i-lucide-home"> <UButton icon="lucide:home"> High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
10 9 Icons Use leadingIcon and trailingIcon props Position icons with dedicated props for clarity leadingIcon="i-lucide-plus" trailingIcon="i-lucide-arrow-right" Use leadingIcon or trailingIcon for standard button icons Manual icon positioning or slots Build a custom icon slot when a standard icon prop is enough <UButton leadingIcon="i-lucide-plus" label="Add"> <UButton><UIcon name="i-lucide-plus"/>Add</UButton> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
11 10 Theming Configure colors in app.config.ts Runtime color configuration without restart ui.colors.primary in app.config.ts Hardcoded colors in components defineAppConfig({ ui: { colors: { primary: 'blue' } } }) <UButton class="bg-blue-500"> High https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
12 11 Theming Use @theme directive for custom colors Define complete custom palettes with @theme static Define design tokens in CSS with Tailwind @theme Nuxt UI custom colors require shades 50 through 950 @theme { --color-brand-500: #xxx } Define every --color-brand-* shade in @theme static Inline color definitions Define only one shade for a custom palette @theme { --color-brand-500: #ef4444; } @theme static { --color-brand-50: #fff1f2; ... --color-brand-950: #4c0519; } :style="{ color: '#ef4444' }" @theme { --color-brand-500: #ef4444; } Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
13 12 Theming Register and map semantic colors Register extra semantic color names at build time then map them to a palette in app.config nuxt.config ui.theme.colors plus app.config ui.colors Use an unregistered semantic color ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet' <UButton color="tertiary"> without config Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
14 13 Forms Use UForm with schema validation UForm supports Zod Yup Joi Valibot schemas UForm accepts Standard Schema libraries such as Zod, Valibot, Yup, and Joi :schema prop with validation schema Pass a Standard Schema with :schema and reactive state with :state Manual form validation <UForm :schema="schema" :state="state"> Manual @blur validation High https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
15 14 Forms Use UFormField for field wrapper Provides label error message and validation display UFormField with name prop Manual error handling <UFormField name="email" label="Email"> <div><label>Email</label><UInput/><span>error</span></div> Medium https://ui.nuxt.com/docs/components/form-field nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
16 15 Forms Handle form submit with @submit UForm emits submit event with validated data @submit handler on UForm @click on submit button <UForm @submit="onSubmit"> <UButton @click="onSubmit"> Medium https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
17 16 Forms Choose validation timing deliberately UForm validates on input blur and change by default; input is delayed and begins after blur unless eager Set validateOn and eager to match the interaction Assume the default validates every keystroke immediately <UForm :validateOn="['blur', 'change']"> Describe default UForm as eager input-only validation Low https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
18 17 Overlays Use v-model:open for overlay control Modal Slideover Drawer use v-model:open v-model:open for controlled state Manual show/hide logic <UModal v-model:open="isOpen"> <UModal v-if="isOpen"> Medium https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
19 18 Overlays Use useOverlay composable for programmatic overlays Open overlays programmatically — v4 API is create().open() not open(Component) overlay.create(Component).open({ props }) pattern Create the overlay once, then pass component props directly to open() v3 overlay.open(Component) pattern (removed in v4) const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }) overlay.open(MyModal, { props: { title: 'Confirm' } }) High https://ui.nuxt.com/docs/components/modal https://ui.nuxt.com/docs/composables/use-overlay nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
20 19 Overlays Use title and description props Built-in header support for overlays title="Confirm" description="Are you sure?" Use title and description props for a standard overlay header Manual header content Rebuild a simple title and description with a custom header slot <UModal title="Confirm" description="Are you sure?"> <UModal><template #header><h2>Confirm</h2></template> Low https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
21 20 Dashboard Use UDashboardSidebar for navigation Provides collapsible resizable sidebar with mobile support UDashboardSidebar with header default footer slots Custom sidebar implementation <UDashboardSidebar><template #header>...</template></UDashboardSidebar> <aside class="w-64 border-r"> Medium https://ui.nuxt.com/docs/components/dashboard-sidebar nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
22 21 Dashboard Use UDashboardGroup for layout Wraps dashboard components with sidebar state management UDashboardGroup > UDashboardSidebar + UDashboardPanel Manual layout flex containers <UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup> <div class="flex"><aside/><main/></div> Medium https://ui.nuxt.com/docs/components/dashboard-group nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
23 22 Dashboard Use UDashboardNavbar for top navigation Responsive navbar with mobile menu support Responsive dashboard header with sidebar toggle and layout slots UDashboardNavbar in dashboard layout Place UDashboardNavbar in a UDashboardPanel header and use its slots for actions Custom navbar implementation Pass unsupported links props or rebuild the responsive toggle <UDashboardNavbar :links="navLinks"/> <UDashboardNavbar title="Dashboard"><template #right><UButton label="Add"/></template></UDashboardNavbar> <nav class="border-b"> <UDashboardNavbar :links="navLinks"/> Low https://ui.nuxt.com/docs/components/dashboard-navbar nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
24 23 Tables Use UTable with data and columns props Powered by TanStack Table with built-in features :data and :columns props Manual table markup <UTable :data="users" :columns="columns"/> <table><tr v-for="user in users"> High https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
25 24 Tables Define columns with accessorKey Column definitions use accessorKey for data binding accessorKey: 'email' in column def String column names only { accessorKey: 'email', header: 'Email' } ['name', 'email'] Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
26 25 Tables Use column cell slots Customize cell content with the documented column-id slot pattern #status-cell for a status column Use the obsolete #cell-status name <template #status-cell="{ row }"> <template #cell-status="{ row }"> Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
27 26 Tables Enable sorting with TanStack column APIs Render a header control that calls column.toggleSorting Use getCanSort and toggleSorting Invent a sortable property not in the column contract header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() }) { accessorKey: 'name', sortable: true } Low https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
28 27 Navigation Use UNavigationMenu for nav links Horizontal or vertical navigation with dropdown support UNavigationMenu with items array Manual nav with v-for <UNavigationMenu :items="navItems"/> <nav><a v-for="item in items"> Medium https://ui.nuxt.com/docs/components/navigation-menu nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
29 28 Navigation Use UBreadcrumb for page hierarchy Automatic breadcrumb with NuxtLink support Render accessible page hierarchy from an items array with NuxtLink support :items array with label and to Manual breadcrumb links <UBreadcrumb :items="breadcrumbs"/> <nav><span v-for="crumb in crumbs"> Low https://ui.nuxt.com/docs/components/breadcrumb nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
30 29 Navigation Use UTabs for tabbed content Tab navigation with content panels UTabs with items containing slot content Manual tab state <UTabs :items="tabs"/> <div><button @click="tab=1"> Medium https://ui.nuxt.com/docs/components/tabs nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
31 30 Feedback Use useToast for notifications Composable for toast notifications Composable notifications rendered by the UApp toast provider useToast().add({ title description }) Wrap the app in UApp and call useToast().add() Alert components for toasts const toast = useToast(); toast.add({ title: 'Saved' }) <UAlert v-if="showSuccess"> High https://ui.nuxt.com/docs/components/toast nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
32 31 Feedback Use UAlert for inline messages Static alert messages with icon and actions UAlert with title description color Toast for static messages <UAlert title="Warning" color="warning"/> useToast for inline alerts Medium https://ui.nuxt.com/docs/components/alert nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
33 32 Feedback Use USkeleton for loading states Placeholder content during data loading USkeleton with appropriate size Spinner for content loading <USkeleton class="h-4 w-32"/> <UIcon name="lucide:loader" class="animate-spin"/> <UIcon name="i-lucide-loader-circle" class="animate-spin"/> Low https://ui.nuxt.com/docs/components/skeleton nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
34 33 Color Mode Use UColorModeButton for theme toggle Built-in light/dark mode toggle button UColorModeButton component Manual color mode logic <UColorModeButton/> <button @click="toggleColorMode"> Low https://ui.nuxt.com/docs/components/color-mode-button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
35 34 Color Mode Use UColorModeSelect for theme picker Dropdown to select system light or dark mode UColorModeSelect component Custom select for theme <UColorModeSelect/> <USelect v-model="colorMode" :items="modes"/> Low https://ui.nuxt.com/docs/components/color-mode-select nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
36 35 Customization Use ui prop for component styling Use class for the root and ui for named slots Override component styles via ui prop class customizes the root slot; ui targets component slots ui prop with slot class overrides Use class for root-only changes and ui after checking generated slot names Global CSS overrides Use !important or guess undocumented slot names <UButton :ui="{ base: 'rounded-full' }"/> <UButton class="rounded-full" :ui="{ trailingIcon: 'size-3' }"/> <UButton class="!rounded-full"/> Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
37 36 Customization Configure default variants in app.config Set component default variants under ui component keys app.config ui.button.defaultVariants Put component defaults in nuxt.config Put button-specific defaults under global ui.theme.defaultVariants defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } }) ui.theme.defaultVariants in nuxt.config ui: { theme: { defaultVariants: { variant: 'outline' } } } // affects every component Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
38 37 Customization Use app.config.ts for theme overrides Runtime theme customization defineAppConfig with ui key nuxt.config for runtime values defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }) nuxt.config ui.button.size: 'sm' Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
39 38 Performance Enable component detection Enable component detection for Nuxt Tree-shake unused component CSS Generate CSS only for detected Nuxt UI components and their dependencies experimental.componentDetection: true Use true for static usage or include dynamic component names in an array Include all component CSS Enable detection and omit components rendered through dynamic :is values ui: { experimental: { componentDetection: true } } ui: { experimental: { componentDetection: ['Modal'] } } ui: {} (includes all CSS) componentDetection: true with <component :is="name"/> only Low https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
40 39 Performance Use UTable virtualize for large data Enable virtualization for 1000+ rows Enable row virtualization when rendering large datasets :virtualize prop on UTable Use the virtualize prop after row rendering becomes a measured bottleneck Render all rows Render a large dataset without pagination or virtualization <UTable :data="largeData" virtualize/> <UTable :data="largeData"/> Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
41 40 Accessibility Use semantic component props Give overlays an accessible name and description Components have built-in ARIA support Overlay title and description props provide dialog labeling Use title description label props Provide title and description unless custom slots supply equivalent semantics Skip accessibility props Open an unlabeled modal <UModal title="Settings"> <UModal title="Settings" description="Update your preferences"> <UModal><h2>Settings</h2> <UModal><template #body>...</template></UModal> Medium High https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
42 41 Accessibility Associate labels with controls Use UFormField or correct native id and for attributes UFormField for convenience or explicit label association Use placeholders as labels <UFormField label="Email"><UInput/></UFormField> <UInput placeholder="Email"/> High https://ui.nuxt.com/docs/components/form-field nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
43 42 Content Use UContentToc for table of contents Automatic TOC with active heading highlight UContentToc with :links Manual TOC implementation <UContentToc :links="toc"/> <nav><a v-for="heading in headings"> Low https://ui.nuxt.com/docs/components/content-toc nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
44 43 Content Use UContentSearch for docs search Command palette for documentation search UContentSearch with Nuxt Content Custom search implementation <UContentSearch/> <UCommandPalette :groups="searchResults"/> Low https://ui.nuxt.com/docs/components/content-search nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
45 44 AI/Chat Use UChatMessages for chat UI Designed for Vercel AI SDK integration UChatMessages with messages array Custom chat message list <UChatMessages :messages="messages"/> <div v-for="msg in messages"> Medium https://ui.nuxt.com/docs/components/chat-messages nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
46 45 AI/Chat Use UChatPrompt for input Enhanced textarea for AI prompts UChatPrompt with v-model Basic textarea <UChatPrompt v-model="prompt"/> <UTextarea v-model="prompt"/> Medium https://ui.nuxt.com/docs/components/chat-prompt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
47 46 Editor Use UEditor for rich text TipTap-based editor binds its document with v-model UEditor with v-model Use the undocumented v-model:content binding <UEditor v-model="content"/> <UEditor v-model:content="content"/> Medium https://ui.nuxt.com/docs/components/editor nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
48 47 Links Use to prop for navigation UButton and ULink support NuxtLink to prop to="/dashboard" for internal links href for internal navigation <UButton to="/dashboard"> <UButton href="/dashboard"> Medium https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
49 48 Links Use to for external URLs ULink and link-enabled components detect absolute URLs and support target when a new tab is intended to="https://example.com" target="_blank" Use href inconsistently or claim an external prop is required <UButton to="https://example.com" target="_blank"> <UButton href="https://..."> Low https://ui.nuxt.com/docs/components/link nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
50 49 Loading Use loadingAuto on buttons Automatic loading state from @click promise loadingAuto prop on UButton Manual loading state <UButton loadingAuto @click="async () => await save()"> <UButton :loading="isLoading" @click="save"> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
51 50 Loading Use UForm loadingAuto Auto-disable form during submit loadingAuto on UForm (default true) Manual form disabled state <UForm @submit="handleSubmit"> <UForm :disabled="isSubmitting"> Low https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
52 51 Installation Let Nuxt UI declare module dependencies Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration Configure dependency options at their root keys Add duplicate module entries without a documented need icon: { /* opts */ } in nuxt.config modules: ['@nuxt/ui', '@nuxt/icon'] High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
53 52 Installation Use official templates to bootstrap projects Create a Nuxt project from an official Nuxt UI template npm create nuxt@latest -- -t ui/dashboard Manually reconstruct a template npm create nuxt@latest -- -t ui/dashboard pnpm create nuxt app then copy dashboard files Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
54 53 Icons Install required icon collections locally Install Iconify JSON collections used by the app; Nuxt UI 4.10 can bundle icons from installed collections Install the Iconify JSON collections used by the app for reliable SSR and bundling pnpm i @iconify-json/lucide for lucide icons Rely on an unavailable collection at runtime pnpm i @iconify-json/lucide Use i-custom-* without installing its collection Medium https://ui.nuxt.com/docs/getting-started/icons/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
55 54 Icons Override default component icons globally Override default component icons centrally when needed Components use default icons configurable via appConfig.ui.icons appConfig.ui.icons keeps intentional icon overrides consistent Set loading close check icons in app.config.ts Set a global icon key when the product needs a different default Accept default icons for all components Repeat the same icon override on every component instance defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } }) <UModal :close-icon="'i-lucide-x'"> on every usage <UModal close-icon="i-lucide-circle-x"/> repeated everywhere Low https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
56 55 Forms Use UFileUpload for file input Built-in drag-drop and preview support UFileUpload with v-model and accept prop Custom input type=file <UFileUpload v-model="files" accept="image/*" multiple/> <input type="file" @change="handleFiles"> Medium https://ui.nuxt.com/docs/components/file-upload nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
57 56 Forms Use UInputDate for date selection Locale-aware date picker built on UCalendar Date input supports single dates and ranges with locale inherited from UApp UInputDate with v-model and locale prop Use range when needed and configure locale on UApp Third-party date picker libraries <UInputDate v-model="date" /> <UApp :locale="fr"><UInputDate v-model="range" range/></UApp> <DatePicker v-model="date" /> <UInputDate locale="fr"/> Medium https://ui.nuxt.com/docs/components/input-date nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
58 57 Forms Use UInputTags for tag input Multi-value tag input with keyboard support UInputTags with v-model and max prop Custom chip input implementation <UInputTags v-model="tags" :max="5" /> <UInput @keydown.enter="addTag"> Low https://ui.nuxt.com/docs/components/input-tags nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
59 58 Forms Use UColorPicker for color selection Full-featured color picker with multiple format support UColorPicker with v-model and format prop Native input type=color <UColorPicker v-model="color" format="hex" /> <input type="color" v-model="color"> Low https://ui.nuxt.com/docs/components/color-picker nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
60 59 Data Use UTree for hierarchical data Built-in tree component with expand/collapse UTree with items prop containing nested children Custom recursive component <UTree :items="treeItems" /> <TreeNode v-for="item in items" :key="item.id"> Low https://ui.nuxt.com/docs/components/tree nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
61 60 Data Use UMarquee for infinite scroll content Animated infinite scroll band for logos or testimonials UMarquee with repeat and pauseOnHover props CSS animation keyframes loop <UMarquee :repeat="3" pause-on-hover> <div class="animate-marquee"> Low https://ui.nuxt.com/docs/components/marquee nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
62 61 Overlays Use UContextMenu for right-click menus Context menu triggered by right-click on children UContextMenu wrapping target element Browser default context menu <UContextMenu :items="menuItems"><div>Right-click me</div></UContextMenu> <div @contextmenu.prevent="showMenu"> Medium https://ui.nuxt.com/docs/components/context-menu nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
63 62 Overlays Await overlay result for confirmation dialogs useOverlay returns a result Promise resolving to user action open() returns a Promise that resolves when the overlay component emits close await instance.result to get confirm/cancel Emit a close value from the overlay component and await modal.open() Emit events from overlay components Expect a result from a component that never emits close const { result } = modal.open(); if (await result) { deleteItem() } if (await modal.open()) { deleteItem() } overlay.open(Confirm, { onConfirm: deleteItem }) modal.open(); deleteItem() Medium https://ui.nuxt.com/docs/components/modal https://ui.nuxt.com/docs/composables/use-overlay nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
64 63 Navigation Use UCommandPalette with grouped items Use UCommandPalette with identified groups Command palette supports grouped search with icons and kbds Command palette accepts groups with an id, label, and items groups array with id label items Give every group a stable id and its own items Flat list without categories Pass a flat items prop that is not part of the component API <UCommandPalette :groups="[{ id: 'actions', label: 'Actions', items }]"/> <UCommandPalette :items="flatList"/> Medium https://ui.nuxt.com/docs/components/command-palette nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
65 64 Navigation Use defineShortcuts with extractShortcuts Wire keyboard shortcuts from menu item kbds automatically extractShortcuts(items) + defineShortcuts to sync keybindings Manually duplicate shortcuts from menu items defineShortcuts(extractShortcuts(items)) defineShortcuts({ meta_n: () => newFile() }) // duplicated from items Low https://ui.nuxt.com/docs/composables/define-shortcuts nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
66 65 Layout Use UHeader and UFooter for page layout Responsive header/footer with built-in mobile menu UHeader with #default slot for nav UFooter with columns Custom header/footer from scratch <UHeader><template #right><UNavigationMenu/></template></UHeader> <header class="sticky top-0"> Low https://ui.nuxt.com/docs/components/header nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
67 66 Layout Use UPageAside for sidebar content Sidebar that hides below lg breakpoint automatically UPageAside for docs and landing page sidebars Manual hidden lg: classes <UPageAside><UNavigationMenu orientation="vertical"/></UPageAside> <aside class="hidden lg:block"> Low https://ui.nuxt.com/docs/components/page-aside nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
68 67 Color Mode Wrap custom color mode toggles in ClientOnly Prevents hydration mismatch on server-rendered color mode ClientOnly with fallback placeholder Direct useColorMode in template without ClientOnly <ClientOnly><USwitch v-model="isDark"/><template #fallback><div class="size-8"/></template></ClientOnly> <USwitch v-model="isDark"/> directly in template Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt https://ui.nuxt.com/docs/getting-started/integrations/color-mode/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
69 68 Theming Read generated theme file to find slot names Nuxt UI generates theme files listing all component slots and variants Generated theme files list current slots, variants, and default classes Check .nuxt/ui/<component>.ts for slot names Check .nuxt/ui in Nuxt or node_modules/.nuxt-ui/ui in Vue before overriding slots Guess slot names or use trial-and-error .nuxt/ui/button.ts for UButton slot names .nuxt/ui/button.ts or node_modules/.nuxt-ui/ui/button.ts <UButton :ui="{ base: 'rounded-full' }"/> without checking slots Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
70 69 Composables Use defineShortcuts whenever keyword shortcut whenever array condition prevents shortcut firing when inactive whenever: [isFormValid] to guard shortcut execution Always-on shortcuts that fire in wrong context defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } }) defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid Low https://ui.nuxt.com/docs/composables/define-shortcuts nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
71 70 i18n Use UApp locale prop for internationalization Nuxt UI supports 50+ built-in locales via locale prop on UApp UApp locale configures component messages, formatting, and direction Import locale from @nuxt/ui/locale and pass to UApp Pass a locale object to UApp and propagate lang and dir to html Manual translation of component UI strings Translate built-in component strings instance by instance import { fr } from '@nuxt/ui/locale'; // <UApp :locale="fr"> <UModal title="Fermer"> manually for each component Low https://ui.nuxt.com/docs/composables/define-locale https://ui.nuxt.com/docs/getting-started/integrations/i18n/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
72 71 Layout Use USplitter for resizable panel layouts Splitter provides horizontal, vertical, nested, and collapsible resizable panels Define panel items with stable slots and size constraints Reimplement drag resizing and keyboard behavior <USplitter id="layout" :items="items" class="h-96"> <div @mousemove="resizePanels"> Medium https://ui.nuxt.com/docs/components/splitter nuxt-ui 4.11.1 active 2026-09-21
73 72 Layout Stabilize server-rendered splitter layouts Generated ids and mixed default sizes can cause hydration mismatches or panel jumps Set id and give defaultSize to every item or to none; use auto-save-id for persistence Mix items with and without defaultSize during SSR <USplitter id="layout" auto-save-id="layout" :items="sizedItems"> <USplitter :items="mixedDefaultSizes"> High https://ui.nuxt.com/docs/components/splitter nuxt-ui 4.11.1 active 2026-09-21
74 73 Data Use UProgressGroup for segmented totals ProgressGroup displays multiple values as segments of one total with a legend Pass labeled items and an explicit max when the total is not 100 Build a segmented progress bar from unrelated div widths <UProgressGroup :items="usage" :max="128" status/> <div v-for="item in usage" :style="{ width: item.value + '%' }"> Low https://ui.nuxt.com/docs/components/progress-group nuxt-ui 4.11.1 active 2026-09-21
75 74 Motion Retune library motion with theme easing tokens Nuxt UI 4.11 uses --ease-out for enter, exit, and movement transitions Override --ease-out in @theme to retime motion consistently Override transition timing independently on every component @theme { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } .modal { transition-timing-function: ... } repeated per component Low https://ui.nuxt.com/docs/getting-started/theme/design-system#motion nuxt-ui 4.11.1 active 2026-09-21
76 75 Performance Enable component detection in Vue and Vite The Nuxt UI Vite plugin can generate CSS only for detected components Set experimental.componentDetection in the @nuxt/ui/vite plugin and restart after adding components Expect newly detected component styles without restarting the dev server ui({ experimental: { componentDetection: true } }) ui({}) // generates theme CSS for every component Low https://ui.nuxt.com/docs/getting-started/installation/vue#experimentalcomponentdetection nuxt-ui 4.11.1 active 2026-09-21
77 76 Security Use Nuxt UI 4.11+ for CommandPalette search Nuxt UI 4.11 escapes CommandPalette search highlights to prevent XSS Upgrade @nuxt/ui to 4.11.1 or newer when rendering untrusted command labels Render untrusted CommandPalette labels with a pre-4.11 release pnpm add @nuxt/ui@^4.11.1 @nuxt/ui@4.10 with user-controlled command labels High https://ui.nuxt.com/docs/components/command-palette nuxt-ui 4.11.1 active 2026-09-21

2
cli/assets/scripts/core.py
View File

@ -156,7 +156,7 @@ STACK_CURRENT_APPLICABILITY = {
"html-tailwind": "html-tailwind 4.3",
"shadcn": "shadcn cli 4",
"nuxtjs": "nuxtjs 4.5",
"nuxt-ui": "nuxt-ui 4.10",
"nuxt-ui": "nuxt-ui 4.11.1",
"react-native": "react-native 0.86.x",
"flutter": "flutter 3.44.x",
"swiftui": "swiftui current",

28
cli/assets/scripts/tests/fixtures/relevance-baseline.json vendored
View File

@ -1707,21 +1707,21 @@
"Guideline": "Let Nuxt UI declare module dependencies"
},
{
"Category": "Icons",
"Guideline": "Install required icon collections locally"
"Category": "Theming",
"Guideline": "Read generated theme file to find slot names"
}
],
"diagnostics": {
"abstained": false,
"calibration_version": "2026-08-12-v1",
"margin": 3.1826026810457666,
"margin": 3.838208672372261,
"normalized_query": "install the Nuxt UI module",
"query_rewrites": [],
"reason": "matched",
"runner_up_score": 9.430568542253825,
"runner_up_score": 9.354004973008944,
"search_query": "install the Nuxt UI module",
"token_coverage": 1.0,
"top_score": 12.613171223299592
"top_score": 13.192213645381205
},
"expectedRoute": null,
"grades": [
@ -1745,25 +1745,25 @@
"Guideline": "Use semantic color props"
},
{
"Category": "Theming",
"Guideline": "Use @theme directive for custom colors"
"Category": "Performance",
"Guideline": "Enable component detection for Nuxt"
},
{
"Category": "Installation",
"Guideline": "Let Nuxt UI declare module dependencies"
"Category": "Theming",
"Guideline": "Define complete custom palettes with @theme static"
}
],
"diagnostics": {
"abstained": false,
"calibration_version": "2026-08-12-v1",
"margin": 0.48203542343964934,
"margin": 13.200313041581737,
"normalized_query": "style Nuxt UI components through meaning-based color props",
"query_rewrites": [],
"reason": "matched",
"runner_up_score": 7.263126698989611,
"runner_up_score": 9.334552712447977,
"search_query": "style Nuxt UI components through meaning-based color props",
"token_coverage": 0.7777777777777778,
"top_score": 7.74516212242926
"token_coverage": 1.0,
"top_score": 22.534865754029713
},
"expectedRoute": null,
"grades": [
@ -3277,7 +3277,7 @@
"typoRecoveryAt3": 1.0
},
"oracleFingerprint": "02e7226428c64a995ec24ae104ce4d186f5f91bf0f062556e90ef9b0fcb6d67a",
"runtimeFingerprint": "8ba69ee0070e055363e089a3a9338d0d2f79196ed4f8509c3a8a0aec379d40df",
"runtimeFingerprint": "1d18a1cac526f15cea7f4e94cef4bed39fafa250a2b6cc81d8c8007b47c6042e",
"samples": {
"cases": 90,
"designSystem": 8,

2
cli/assets/scripts/tests/fixtures/relevance-thresholds.json vendored
View File

@ -2,7 +2,7 @@
"schemaVersion": 1,
"status": "provisional-baseline-regression-gate",
"baselineRevision": "97eb2a2",
"runtimeFingerprint": "8ba69ee0070e055363e089a3a9338d0d2f79196ed4f8509c3a8a0aec379d40df",
"runtimeFingerprint": "1d18a1cac526f15cea7f4e94cef4bed39fafa250a2b6cc81d8c8007b47c6042e",
"oracleFingerprint": "02e7226428c64a995ec24ae104ce4d186f5f91bf0f062556e90ef9b0fcb6d67a",
"approvingMaintainer": "repository maintainer approved Phase 1 testing checkpoint; second judgment review remains required before final-target promotion",
"units": "All metrics are ratios in [0,1]. Precision treats missing ranks as non-relevant. Negative abstention is measured across the hard-negative by domain/stack cross-product.",

2
cli/assets/scripts/tests/test_web_stack_freshness.py
View File

@ -24,7 +24,7 @@ CURRENT_APPLICABILITY = {
"html-tailwind": "html-tailwind 4.3",
"shadcn": "shadcn cli 4",
"nuxtjs": "nuxtjs 4.5",
"nuxt-ui": "nuxt-ui 4.10",
"nuxt-ui": "nuxt-ui 4.11.1",
}

2
src/ui-ux-pro-max/data/catalog-summary.json
View File

@ -20,7 +20,7 @@
"motionPresets": 17,
"chartTypes": 25,
"stacks": 22,
"stackGuidelines": 1265
"stackGuidelines": 1271
},
"snapshots": {
"google-fonts.csv": {

146
src/ui-ux-pro-max/data/stacks/nuxt-ui.csv
View File

@ -1,71 +1,77 @@
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
1,Installation,Add Nuxt UI module,Install and configure Nuxt UI in your Nuxt project,pnpm add @nuxt/ui and add to modules,Manual component imports,modules: ['@nuxt/ui'],import { UButton } from '@nuxt/ui',High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
3,Installation,Wrap app with UApp component,UApp provides global configs for Toast Tooltip and overlays,<UApp> wrapper in app.vue,Skip UApp wrapper,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app,nuxt-ui 4.10,active,2026-08-13
4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
5,Components,Use semantic color props,Use semantic colors like primary secondary error,"color=""primary"" color=""error""",Hardcoded colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,"variant=""soft"" variant=""outline""",Custom button classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,"size=""sm"" size=""lg""",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
8,Icons,Use i-{collection}-{name} format for icons,Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy,i-lucide-home i-heroicons-user format,lucide:home format (v3 syntax),"<UButton icon=""i-lucide-home"">","<UButton icon=""lucide:home"">",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
9,Icons,Use leadingIcon and trailingIcon props,Position icons with dedicated props for clarity,"leadingIcon=""i-lucide-plus"" trailingIcon=""i-lucide-arrow-right""",Manual icon positioning or slots,"<UButton leadingIcon=""i-lucide-plus"" label=""Add"">","<UButton><UIcon name=""i-lucide-plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,defineAppConfig({ ui: { colors: { primary: 'blue' } } }),"<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
11,Theming,Use @theme directive for custom colors,Define design tokens in CSS with Tailwind @theme,@theme { --color-brand-500: #xxx },Inline color definitions,@theme { --color-brand-500: #ef4444; },":style=""{ color: '#ef4444' }""",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
12,Theming,Register and map semantic colors,Register extra semantic color names at build time then map them to a palette in app.config,nuxt.config ui.theme.colors plus app.config ui.colors,Use an unregistered semantic color,"ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.10,active,2026-08-13
13,Forms,Use UForm with schema validation,UForm supports Zod Yup Joi Valibot schemas,:schema prop with validation schema,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.10,active,2026-08-13
15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
16,Forms,Choose validation timing deliberately,UForm validates on input blur and change by default; input is delayed and begins after blur unless eager,Set validateOn and eager to match the interaction,Assume the default validates every keystroke immediately,"<UForm :validateOn=""['blur', 'change']"">",Describe default UForm as eager input-only validation,Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">","<UModal v-if=""isOpen"">",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically — v4 API is create().open() not open(Component),overlay.create(Component).open({ props }) pattern,v3 overlay.open(Component) pattern (removed in v4),const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }),"overlay.open(MyModal, { props: { title: 'Confirm' } })",High,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
19,Overlays,Use title and description props,Built-in header support for overlays,"title=""Confirm"" description=""Are you sure?""",Manual header content,"<UModal title=""Confirm"" description=""Are you sure?"">",<UModal><template #header><h2>Confirm</h2></template>,Low,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,"<aside class=""w-64 border-r"">",Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar,nuxt-ui 4.10,active,2026-08-13
21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group,nuxt-ui 4.10,active,2026-08-13
22,Dashboard,Use UDashboardNavbar for top navigation,Responsive navbar with mobile menu support,UDashboardNavbar in dashboard layout,Custom navbar implementation,"<UDashboardNavbar :links=""navLinks""/>","<nav class=""border-b"">",Low,https://ui.nuxt.com/docs/components/dashboard-navbar,nuxt-ui 4.10,active,2026-08-13
23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
25,Tables,Use column cell slots,Customize cell content with the documented column-id slot pattern,#status-cell for a status column,Use the obsolete #cell-status name,"<template #status-cell=""{ row }"">","<template #cell-status=""{ row }"">",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
26,Tables,Enable sorting with TanStack column APIs,Render a header control that calls column.toggleSorting,Use getCanSort and toggleSorting,Invent a sortable property not in the column contract,"header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })","{ accessorKey: 'name', sortable: true }",Low,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu,nuxt-ui 4.10,active,2026-08-13
28,Navigation,Use UBreadcrumb for page hierarchy,Automatic breadcrumb with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb,nuxt-ui 4.10,active,2026-08-13
29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs,nuxt-ui 4.10,active,2026-08-13
30,Feedback,Use useToast for notifications,Composable for toast notifications,useToast().add({ title description }),Alert components for toasts,const toast = useToast(); toast.add({ title: 'Saved' }),"<UAlert v-if=""showSuccess"">",High,https://ui.nuxt.com/docs/components/toast,nuxt-ui 4.10,active,2026-08-13
31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert,nuxt-ui 4.10,active,2026-08-13
32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,"<USkeleton class=""h-4 w-32""/>","<UIcon name=""lucide:loader"" class=""animate-spin""/>",Low,https://ui.nuxt.com/docs/components/skeleton,nuxt-ui 4.10,active,2026-08-13
33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button,nuxt-ui 4.10,active,2026-08-13
34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select,nuxt-ui 4.10,active,2026-08-13
35,Customization,Use ui prop for component styling,Override component styles via ui prop,ui prop with slot class overrides,Global CSS overrides,"<UButton :ui=""{ base: 'rounded-full' }""/>","<UButton class=""!rounded-full""/>",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
36,Customization,Configure default variants in app.config,Set component default variants under ui component keys,app.config ui.button.defaultVariants,Put component defaults in nuxt.config,"defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } })",ui.theme.defaultVariants in nuxt.config,Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }),nuxt.config ui.button.size: 'sm',Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
38,Performance,Enable component detection,Tree-shake unused component CSS,experimental.componentDetection: true,Include all component CSS,ui: { experimental: { componentDetection: true } },ui: {} (includes all CSS),Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
39,Performance,Use UTable virtualize for large data,Enable virtualization for 1000+ rows,:virtualize prop on UTable,Render all rows,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.10,active,2026-08-13
40,Accessibility,Use semantic component props,Components have built-in ARIA support,Use title description label props,Skip accessibility props,"<UModal title=""Settings"">",<UModal><h2>Settings</h2>,Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
41,Accessibility,Associate labels with controls,Use UFormField or correct native id and for attributes,UFormField for convenience or explicit label association,Use placeholders as labels,"<UFormField label=""Email""><UInput/></UFormField>","<UInput placeholder=""Email""/>",High,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.10,active,2026-08-13
42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc,nuxt-ui 4.10,active,2026-08-13
43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,"<UCommandPalette :groups=""searchResults""/>",Low,https://ui.nuxt.com/docs/components/content-search,nuxt-ui 4.10,active,2026-08-13
44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages,nuxt-ui 4.10,active,2026-08-13
45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,"<UChatPrompt v-model=""prompt""/>","<UTextarea v-model=""prompt""/>",Medium,https://ui.nuxt.com/docs/components/chat-prompt,nuxt-ui 4.10,active,2026-08-13
46,Editor,Use UEditor for rich text,TipTap-based editor binds its document with v-model,UEditor with v-model,Use the undocumented v-model:content binding,"<UEditor v-model=""content""/>","<UEditor v-model:content=""content""/>",Medium,https://ui.nuxt.com/docs/components/editor,nuxt-ui 4.10,active,2026-08-13
47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,"to=""/dashboard"" for internal links",href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
48,Links,Use to for external URLs,ULink and link-enabled components detect absolute URLs and support target when a new tab is intended,"to=""https://example.com"" target=""_blank""",Use href inconsistently or claim an external prop is required,"<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link,nuxt-ui 4.10,active,2026-08-13
49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.10,active,2026-08-13
50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.10,active,2026-08-13
51,Installation,Let Nuxt UI declare module dependencies,Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration,Configure dependency options at their root keys,Add duplicate module entries without a documented need,icon: { /* opts */ } in nuxt.config,"modules: ['@nuxt/ui', '@nuxt/icon']",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
52,Installation,Use official templates to bootstrap projects,Create a Nuxt project from an official Nuxt UI template,npm create nuxt@latest -- -t ui/dashboard,Manually reconstruct a template,npm create nuxt@latest -- -t ui/dashboard,pnpm create nuxt app then copy dashboard files,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
53,Icons,Install required icon collections locally,Install Iconify JSON collections used by the app; Nuxt UI 4.10 can bundle icons from installed collections,pnpm i @iconify-json/lucide for lucide icons,Rely on an unavailable collection at runtime,pnpm i @iconify-json/lucide,Use i-custom-* without installing its collection,Medium,https://ui.nuxt.com/docs/getting-started/icons/nuxt,nuxt-ui 4.10,active,2026-08-13
54,Icons,Override default component icons globally,Components use default icons configurable via appConfig.ui.icons,Set loading close check icons in app.config.ts,Accept default icons for all components,"defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })","<UModal :close-icon=""'i-lucide-x'""> on every usage",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
55,Forms,Use UFileUpload for file input,Built-in drag-drop and preview support,UFileUpload with v-model and accept prop,Custom input type=file,"<UFileUpload v-model=""files"" accept=""image/*"" multiple/>","<input type=""file"" @change=""handleFiles"">",Medium,https://ui.nuxt.com/docs/components/file-upload,nuxt-ui 4.10,active,2026-08-13
56,Forms,Use UInputDate for date selection,Locale-aware date picker built on UCalendar,UInputDate with v-model and locale prop,Third-party date picker libraries,"<UInputDate v-model=""date"" />","<DatePicker v-model=""date"" />",Medium,https://ui.nuxt.com/docs/components/input-date,nuxt-ui 4.10,active,2026-08-13
57,Forms,Use UInputTags for tag input,Multi-value tag input with keyboard support,UInputTags with v-model and max prop,Custom chip input implementation,"<UInputTags v-model=""tags"" :max=""5"" />","<UInput @keydown.enter=""addTag"">",Low,https://ui.nuxt.com/docs/components/input-tags,nuxt-ui 4.10,active,2026-08-13
58,Forms,Use UColorPicker for color selection,Full-featured color picker with multiple format support,UColorPicker with v-model and format prop,Native input type=color,"<UColorPicker v-model=""color"" format=""hex"" />","<input type=""color"" v-model=""color"">",Low,https://ui.nuxt.com/docs/components/color-picker,nuxt-ui 4.10,active,2026-08-13
59,Data,Use UTree for hierarchical data,Built-in tree component with expand/collapse,UTree with items prop containing nested children,Custom recursive component,"<UTree :items=""treeItems"" />","<TreeNode v-for=""item in items"" :key=""item.id"">",Low,https://ui.nuxt.com/docs/components/tree,nuxt-ui 4.10,active,2026-08-13
60,Data,Use UMarquee for infinite scroll content,Animated infinite scroll band for logos or testimonials,UMarquee with repeat and pauseOnHover props,CSS animation keyframes loop,"<UMarquee :repeat=""3"" pause-on-hover>","<div class=""animate-marquee"">",Low,https://ui.nuxt.com/docs/components/marquee,nuxt-ui 4.10,active,2026-08-13
61,Overlays,Use UContextMenu for right-click menus,Context menu triggered by right-click on children,UContextMenu wrapping target element,Browser default context menu,"<UContextMenu :items=""menuItems""><div>Right-click me</div></UContextMenu>","<div @contextmenu.prevent=""showMenu"">",Medium,https://ui.nuxt.com/docs/components/context-menu,nuxt-ui 4.10,active,2026-08-13
62,Overlays,Await overlay result for confirmation dialogs,useOverlay returns a result Promise resolving to user action,await instance.result to get confirm/cancel,Emit events from overlay components,const { result } = modal.open(); if (await result) { deleteItem() },"overlay.open(Confirm, { onConfirm: deleteItem })",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.10,active,2026-08-13
63,Navigation,Use UCommandPalette with grouped items,Command palette supports grouped search with icons and kbds,groups array with id label items,Flat list without categories,"<UCommandPalette :groups=""[{ id: 'actions', label: 'Actions', items }]""/>","<UCommandPalette :items=""flatList""/>",Medium,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.10,active,2026-08-13
64,Navigation,Use defineShortcuts with extractShortcuts,Wire keyboard shortcuts from menu item kbds automatically,extractShortcuts(items) + defineShortcuts to sync keybindings,Manually duplicate shortcuts from menu items,defineShortcuts(extractShortcuts(items)),defineShortcuts({ meta_n: () => newFile() }) // duplicated from items,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.10,active,2026-08-13
65,Layout,Use UHeader and UFooter for page layout,Responsive header/footer with built-in mobile menu,UHeader with #default slot for nav UFooter with columns,Custom header/footer from scratch,<UHeader><template #right><UNavigationMenu/></template></UHeader>,"<header class=""sticky top-0"">",Low,https://ui.nuxt.com/docs/components/header,nuxt-ui 4.10,active,2026-08-13
66,Layout,Use UPageAside for sidebar content,Sidebar that hides below lg breakpoint automatically,UPageAside for docs and landing page sidebars,Manual hidden lg: classes,"<UPageAside><UNavigationMenu orientation=""vertical""/></UPageAside>","<aside class=""hidden lg:block"">",Low,https://ui.nuxt.com/docs/components/page-aside,nuxt-ui 4.10,active,2026-08-13
67,Color Mode,Wrap custom color mode toggles in ClientOnly,Prevents hydration mismatch on server-rendered color mode,ClientOnly with fallback placeholder,Direct useColorMode in template without ClientOnly,"<ClientOnly><USwitch v-model=""isDark""/><template #fallback><div class=""size-8""/></template></ClientOnly>","<USwitch v-model=""isDark""/> directly in template",Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.10,active,2026-08-13
68,Theming,Read generated theme file to find slot names,Nuxt UI generates theme files listing all component slots and variants,Check .nuxt/ui/<component>.ts for slot names,Guess slot names or use trial-and-error,.nuxt/ui/button.ts for UButton slot names,"<UButton :ui=""{ base: 'rounded-full' }""/> without checking slots",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.10,active,2026-08-13
69,Composables,Use defineShortcuts whenever keyword shortcut,whenever array condition prevents shortcut firing when inactive,whenever: [isFormValid] to guard shortcut execution,Always-on shortcuts that fire in wrong context,"defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })",defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.10,active,2026-08-13
70,i18n,Use UApp locale prop for internationalization,Nuxt UI supports 50+ built-in locales via locale prop on UApp,Import locale from @nuxt/ui/locale and pass to UApp,Manual translation of component UI strings,"import { fr } from '@nuxt/ui/locale'; // <UApp :locale=""fr"">","<UModal title=""Fermer""> manually for each component",Low,https://ui.nuxt.com/docs/composables/define-locale,nuxt-ui 4.10,active,2026-08-13
1,Installation,Add Nuxt UI module,"Install Nuxt UI and Tailwind CSS, then register the Nuxt module",pnpm add @nuxt/ui tailwindcss and add @nuxt/ui to modules,Manual component imports,modules: ['@nuxt/ui'] // after pnpm add @nuxt/ui tailwindcss,import { UButton } from '@nuxt/ui',High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
3,Installation,Wrap app with UApp component,"UApp provides toast, tooltip, overlay, and locale context",Wrap NuxtPage or RouterView once at the app root,Mount pages outside UApp,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app,nuxt-ui 4.11.1,active,2026-09-21
4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
5,Components,Use semantic color props,"Style Nuxt UI components with meaning-based colors such as primary, success, and error","Use color props such as color=""primary"" or color=""error""",Hardcoded palette colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,Choose a built-in variant before adding custom classes,Recreate a built-in variant with custom classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,"size=""sm"" size=""lg""",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
8,Icons,Use i-{collection}-{name} format for icons,Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy,i-lucide-home i-heroicons-user format,lucide:home format (v3 syntax),"<UButton icon=""i-lucide-home"">","<UButton icon=""lucide:home"">",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
9,Icons,Use leadingIcon and trailingIcon props,Position icons with dedicated props for clarity,Use leadingIcon or trailingIcon for standard button icons,Build a custom icon slot when a standard icon prop is enough,"<UButton leadingIcon=""i-lucide-plus"" label=""Add"">","<UButton><UIcon name=""i-lucide-plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,defineAppConfig({ ui: { colors: { primary: 'blue' } } }),"<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
11,Theming,Define complete custom palettes with @theme static,Nuxt UI custom colors require shades 50 through 950,Define every --color-brand-* shade in @theme static,Define only one shade for a custom palette,@theme static { --color-brand-50: #fff1f2; ... --color-brand-950: #4c0519; },@theme { --color-brand-500: #ef4444; },Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
12,Theming,Register and map semantic colors,Register extra semantic color names at build time then map them to a palette in app.config,nuxt.config ui.theme.colors plus app.config ui.colors,Use an unregistered semantic color,"ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
13,Forms,Use UForm with schema validation,"UForm accepts Standard Schema libraries such as Zod, Valibot, Yup, and Joi",Pass a Standard Schema with :schema and reactive state with :state,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
16,Forms,Choose validation timing deliberately,UForm validates on input blur and change by default; input is delayed and begins after blur unless eager,Set validateOn and eager to match the interaction,Assume the default validates every keystroke immediately,"<UForm :validateOn=""['blur', 'change']"">",Describe default UForm as eager input-only validation,Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">","<UModal v-if=""isOpen"">",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically — v4 API is create().open() not open(Component),"Create the overlay once, then pass component props directly to open()",v3 overlay.open(Component) pattern (removed in v4),const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }),"overlay.open(MyModal, { props: { title: 'Confirm' } })",High,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
19,Overlays,Use title and description props,Built-in header support for overlays,Use title and description props for a standard overlay header,Rebuild a simple title and description with a custom header slot,"<UModal title=""Confirm"" description=""Are you sure?"">",<UModal><template #header><h2>Confirm</h2></template>,Low,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,"<aside class=""w-64 border-r"">",Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar,nuxt-ui 4.11.1,active,2026-09-21
21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group,nuxt-ui 4.11.1,active,2026-09-21
22,Dashboard,Use UDashboardNavbar for top navigation,Responsive dashboard header with sidebar toggle and layout slots,Place UDashboardNavbar in a UDashboardPanel header and use its slots for actions,Pass unsupported links props or rebuild the responsive toggle,"<UDashboardNavbar title=""Dashboard""><template #right><UButton label=""Add""/></template></UDashboardNavbar>","<UDashboardNavbar :links=""navLinks""/>",Low,https://ui.nuxt.com/docs/components/dashboard-navbar,nuxt-ui 4.11.1,active,2026-09-21
23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
25,Tables,Use column cell slots,Customize cell content with the documented column-id slot pattern,#status-cell for a status column,Use the obsolete #cell-status name,"<template #status-cell=""{ row }"">","<template #cell-status=""{ row }"">",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
26,Tables,Enable sorting with TanStack column APIs,Render a header control that calls column.toggleSorting,Use getCanSort and toggleSorting,Invent a sortable property not in the column contract,"header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })","{ accessorKey: 'name', sortable: true }",Low,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu,nuxt-ui 4.11.1,active,2026-09-21
28,Navigation,Use UBreadcrumb for page hierarchy,Render accessible page hierarchy from an items array with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb,nuxt-ui 4.11.1,active,2026-09-21
29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs,nuxt-ui 4.11.1,active,2026-09-21
30,Feedback,Use useToast for notifications,Composable notifications rendered by the UApp toast provider,Wrap the app in UApp and call useToast().add(),Alert components for toasts,const toast = useToast(); toast.add({ title: 'Saved' }),"<UAlert v-if=""showSuccess"">",High,https://ui.nuxt.com/docs/components/toast,nuxt-ui 4.11.1,active,2026-09-21
31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert,nuxt-ui 4.11.1,active,2026-09-21
32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,"<USkeleton class=""h-4 w-32""/>","<UIcon name=""i-lucide-loader-circle"" class=""animate-spin""/>",Low,https://ui.nuxt.com/docs/components/skeleton,nuxt-ui 4.11.1,active,2026-09-21
33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button,nuxt-ui 4.11.1,active,2026-09-21
34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select,nuxt-ui 4.11.1,active,2026-09-21
35,Customization,Use class for the root and ui for named slots,class customizes the root slot; ui targets component slots,Use class for root-only changes and ui after checking generated slot names,Use !important or guess undocumented slot names,"<UButton class=""rounded-full"" :ui=""{ trailingIcon: 'size-3' }""/>","<UButton class=""!rounded-full""/>",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
36,Customization,Configure default variants in app.config,Set component default variants under ui component keys,app.config ui.button.defaultVariants,Put button-specific defaults under global ui.theme.defaultVariants,defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } }),ui: { theme: { defaultVariants: { variant: 'outline' } } } // affects every component,Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }),nuxt.config ui.button.size: 'sm',Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
38,Performance,Enable component detection for Nuxt,Generate CSS only for detected Nuxt UI components and their dependencies,Use true for static usage or include dynamic component names in an array,Enable detection and omit components rendered through dynamic :is values,ui: { experimental: { componentDetection: ['Modal'] } },"componentDetection: true with <component :is=""name""/> only",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
39,Performance,Use UTable virtualize for large data,Enable row virtualization when rendering large datasets,Use the virtualize prop after row rendering becomes a measured bottleneck,Render a large dataset without pagination or virtualization,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
40,Accessibility,Give overlays an accessible name and description,Overlay title and description props provide dialog labeling,Provide title and description unless custom slots supply equivalent semantics,Open an unlabeled modal,"<UModal title=""Settings"" description=""Update your preferences"">",<UModal><template #body>...</template></UModal>,High,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
41,Accessibility,Associate labels with controls,Use UFormField or correct native id and for attributes,UFormField for convenience or explicit label association,Use placeholders as labels,"<UFormField label=""Email""><UInput/></UFormField>","<UInput placeholder=""Email""/>",High,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc,nuxt-ui 4.11.1,active,2026-09-21
43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,"<UCommandPalette :groups=""searchResults""/>",Low,https://ui.nuxt.com/docs/components/content-search,nuxt-ui 4.11.1,active,2026-09-21
44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages,nuxt-ui 4.11.1,active,2026-09-21
45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,"<UChatPrompt v-model=""prompt""/>","<UTextarea v-model=""prompt""/>",Medium,https://ui.nuxt.com/docs/components/chat-prompt,nuxt-ui 4.11.1,active,2026-09-21
46,Editor,Use UEditor for rich text,TipTap-based editor binds its document with v-model,UEditor with v-model,Use the undocumented v-model:content binding,"<UEditor v-model=""content""/>","<UEditor v-model:content=""content""/>",Medium,https://ui.nuxt.com/docs/components/editor,nuxt-ui 4.11.1,active,2026-09-21
47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,"to=""/dashboard"" for internal links",href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
48,Links,Use to for external URLs,ULink and link-enabled components detect absolute URLs and support target when a new tab is intended,"to=""https://example.com"" target=""_blank""",Use href inconsistently or claim an external prop is required,"<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link,nuxt-ui 4.11.1,active,2026-09-21
49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
51,Installation,Let Nuxt UI declare module dependencies,Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration,Configure dependency options at their root keys,Add duplicate module entries without a documented need,icon: { /* opts */ } in nuxt.config,"modules: ['@nuxt/ui', '@nuxt/icon']",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
52,Installation,Use official templates to bootstrap projects,Create a Nuxt project from an official Nuxt UI template,npm create nuxt@latest -- -t ui/dashboard,Manually reconstruct a template,npm create nuxt@latest -- -t ui/dashboard,pnpm create nuxt app then copy dashboard files,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
53,Icons,Install required icon collections locally,Install the Iconify JSON collections used by the app for reliable SSR and bundling,pnpm i @iconify-json/lucide for lucide icons,Rely on an unavailable collection at runtime,pnpm i @iconify-json/lucide,Use i-custom-* without installing its collection,Medium,https://ui.nuxt.com/docs/getting-started/icons/nuxt,nuxt-ui 4.11.1,active,2026-09-21
54,Icons,Override default component icons centrally when needed,appConfig.ui.icons keeps intentional icon overrides consistent,Set a global icon key when the product needs a different default,Repeat the same icon override on every component instance,"defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })","<UModal close-icon=""i-lucide-circle-x""/> repeated everywhere",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
55,Forms,Use UFileUpload for file input,Built-in drag-drop and preview support,UFileUpload with v-model and accept prop,Custom input type=file,"<UFileUpload v-model=""files"" accept=""image/*"" multiple/>","<input type=""file"" @change=""handleFiles"">",Medium,https://ui.nuxt.com/docs/components/file-upload,nuxt-ui 4.11.1,active,2026-09-21
56,Forms,Use UInputDate for date selection,Date input supports single dates and ranges with locale inherited from UApp,Use range when needed and configure locale on UApp,Third-party date picker libraries,"<UApp :locale=""fr""><UInputDate v-model=""range"" range/></UApp>","<UInputDate locale=""fr""/>",Medium,https://ui.nuxt.com/docs/components/input-date,nuxt-ui 4.11.1,active,2026-09-21
57,Forms,Use UInputTags for tag input,Multi-value tag input with keyboard support,UInputTags with v-model and max prop,Custom chip input implementation,"<UInputTags v-model=""tags"" :max=""5"" />","<UInput @keydown.enter=""addTag"">",Low,https://ui.nuxt.com/docs/components/input-tags,nuxt-ui 4.11.1,active,2026-09-21
58,Forms,Use UColorPicker for color selection,Full-featured color picker with multiple format support,UColorPicker with v-model and format prop,Native input type=color,"<UColorPicker v-model=""color"" format=""hex"" />","<input type=""color"" v-model=""color"">",Low,https://ui.nuxt.com/docs/components/color-picker,nuxt-ui 4.11.1,active,2026-09-21
59,Data,Use UTree for hierarchical data,Built-in tree component with expand/collapse,UTree with items prop containing nested children,Custom recursive component,"<UTree :items=""treeItems"" />","<TreeNode v-for=""item in items"" :key=""item.id"">",Low,https://ui.nuxt.com/docs/components/tree,nuxt-ui 4.11.1,active,2026-09-21
60,Data,Use UMarquee for infinite scroll content,Animated infinite scroll band for logos or testimonials,UMarquee with repeat and pauseOnHover props,CSS animation keyframes loop,"<UMarquee :repeat=""3"" pause-on-hover>","<div class=""animate-marquee"">",Low,https://ui.nuxt.com/docs/components/marquee,nuxt-ui 4.11.1,active,2026-09-21
61,Overlays,Use UContextMenu for right-click menus,Context menu triggered by right-click on children,UContextMenu wrapping target element,Browser default context menu,"<UContextMenu :items=""menuItems""><div>Right-click me</div></UContextMenu>","<div @contextmenu.prevent=""showMenu"">",Medium,https://ui.nuxt.com/docs/components/context-menu,nuxt-ui 4.11.1,active,2026-09-21
62,Overlays,Await overlay result for confirmation dialogs,open() returns a Promise that resolves when the overlay component emits close,Emit a close value from the overlay component and await modal.open(),Expect a result from a component that never emits close,if (await modal.open()) { deleteItem() },modal.open(); deleteItem(),Medium,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
63,Navigation,Use UCommandPalette with identified groups,"Command palette accepts groups with an id, label, and items",Give every group a stable id and its own items,Pass a flat items prop that is not part of the component API,"<UCommandPalette :groups=""[{ id: 'actions', label: 'Actions', items }]""/>","<UCommandPalette :items=""flatList""/>",Medium,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21
64,Navigation,Use defineShortcuts with extractShortcuts,Wire keyboard shortcuts from menu item kbds automatically,extractShortcuts(items) + defineShortcuts to sync keybindings,Manually duplicate shortcuts from menu items,defineShortcuts(extractShortcuts(items)),defineShortcuts({ meta_n: () => newFile() }) // duplicated from items,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
65,Layout,Use UHeader and UFooter for page layout,Responsive header/footer with built-in mobile menu,UHeader with #default slot for nav UFooter with columns,Custom header/footer from scratch,<UHeader><template #right><UNavigationMenu/></template></UHeader>,"<header class=""sticky top-0"">",Low,https://ui.nuxt.com/docs/components/header,nuxt-ui 4.11.1,active,2026-09-21
66,Layout,Use UPageAside for sidebar content,Sidebar that hides below lg breakpoint automatically,UPageAside for docs and landing page sidebars,Manual hidden lg: classes,"<UPageAside><UNavigationMenu orientation=""vertical""/></UPageAside>","<aside class=""hidden lg:block"">",Low,https://ui.nuxt.com/docs/components/page-aside,nuxt-ui 4.11.1,active,2026-09-21
67,Color Mode,Wrap custom color mode toggles in ClientOnly,Prevents hydration mismatch on server-rendered color mode,ClientOnly with fallback placeholder,Direct useColorMode in template without ClientOnly,"<ClientOnly><USwitch v-model=""isDark""/><template #fallback><div class=""size-8""/></template></ClientOnly>","<USwitch v-model=""isDark""/> directly in template",Medium,https://ui.nuxt.com/docs/getting-started/integrations/color-mode/nuxt,nuxt-ui 4.11.1,active,2026-09-21
68,Theming,Read generated theme file to find slot names,"Generated theme files list current slots, variants, and default classes",Check .nuxt/ui in Nuxt or node_modules/.nuxt-ui/ui in Vue before overriding slots,Guess slot names or use trial-and-error,.nuxt/ui/button.ts or node_modules/.nuxt-ui/ui/button.ts,"<UButton :ui=""{ base: 'rounded-full' }""/> without checking slots",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
69,Composables,Use defineShortcuts whenever keyword shortcut,whenever array condition prevents shortcut firing when inactive,whenever: [isFormValid] to guard shortcut execution,Always-on shortcuts that fire in wrong context,"defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })",defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
70,i18n,Use UApp locale prop for internationalization,"UApp locale configures component messages, formatting, and direction",Pass a locale object to UApp and propagate lang and dir to html,Translate built-in component strings instance by instance,"import { fr } from '@nuxt/ui/locale'; // <UApp :locale=""fr"">","<UModal title=""Fermer""> manually for each component",Low,https://ui.nuxt.com/docs/getting-started/integrations/i18n/nuxt,nuxt-ui 4.11.1,active,2026-09-21
71,Layout,Use USplitter for resizable panel layouts,"Splitter provides horizontal, vertical, nested, and collapsible resizable panels",Define panel items with stable slots and size constraints,Reimplement drag resizing and keyboard behavior,"<USplitter id=""layout"" :items=""items"" class=""h-96"">","<div @mousemove=""resizePanels"">",Medium,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
72,Layout,Stabilize server-rendered splitter layouts,Generated ids and mixed default sizes can cause hydration mismatches or panel jumps,Set id and give defaultSize to every item or to none; use auto-save-id for persistence,Mix items with and without defaultSize during SSR,"<USplitter id=""layout"" auto-save-id=""layout"" :items=""sizedItems"">","<USplitter :items=""mixedDefaultSizes"">",High,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
73,Data,Use UProgressGroup for segmented totals,ProgressGroup displays multiple values as segments of one total with a legend,Pass labeled items and an explicit max when the total is not 100,Build a segmented progress bar from unrelated div widths,"<UProgressGroup :items=""usage"" :max=""128"" status/>","<div v-for=""item in usage"" :style=""{ width: item.value + '%' }"">",Low,https://ui.nuxt.com/docs/components/progress-group,nuxt-ui 4.11.1,active,2026-09-21
74,Motion,Retune library motion with theme easing tokens,"Nuxt UI 4.11 uses --ease-out for enter, exit, and movement transitions",Override --ease-out in @theme to retime motion consistently,Override transition timing independently on every component,"@theme { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }",.modal { transition-timing-function: ... } repeated per component,Low,https://ui.nuxt.com/docs/getting-started/theme/design-system#motion,nuxt-ui 4.11.1,active,2026-09-21
75,Performance,Enable component detection in Vue and Vite,The Nuxt UI Vite plugin can generate CSS only for detected components,Set experimental.componentDetection in the @nuxt/ui/vite plugin and restart after adding components,Expect newly detected component styles without restarting the dev server,ui({ experimental: { componentDetection: true } }),ui({}) // generates theme CSS for every component,Low,https://ui.nuxt.com/docs/getting-started/installation/vue#experimentalcomponentdetection,nuxt-ui 4.11.1,active,2026-09-21
76,Security,Use Nuxt UI 4.11+ for CommandPalette search,Nuxt UI 4.11 escapes CommandPalette search highlights to prevent XSS,Upgrade @nuxt/ui to 4.11.1 or newer when rendering untrusted command labels,Render untrusted CommandPalette labels with a pre-4.11 release,pnpm add @nuxt/ui@^4.11.1,@nuxt/ui@4.10 with user-controlled command labels,High,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21

1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 1 Installation Add Nuxt UI module Install and configure Nuxt UI in your Nuxt project Install Nuxt UI and Tailwind CSS, then register the Nuxt module pnpm add @nuxt/ui and add to modules pnpm add @nuxt/ui tailwindcss and add @nuxt/ui to modules Manual component imports modules: ['@nuxt/ui'] modules: ['@nuxt/ui'] // after pnpm add @nuxt/ui tailwindcss import { UButton } from '@nuxt/ui' High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
3 2 Installation Import Tailwind and Nuxt UI CSS Required CSS imports in main.css file @import tailwindcss and @import @nuxt/ui Skip CSS imports @import "tailwindcss"; @import "@nuxt/ui"; No CSS imports High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
4 3 Installation Wrap app with UApp component UApp provides global configs for Toast Tooltip and overlays UApp provides toast, tooltip, overlay, and locale context <UApp> wrapper in app.vue Wrap NuxtPage or RouterView once at the app root Skip UApp wrapper Mount pages outside UApp <UApp><NuxtPage/></UApp> <NuxtPage/> without wrapper High https://ui.nuxt.com/docs/components/app nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
5 4 Components Use U prefix for components All Nuxt UI components use U prefix by default UButton UInput UModal Button Input Modal <UButton>Click</UButton> <Button>Click</Button> Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
6 5 Components Use semantic color props Use semantic colors like primary secondary error Style Nuxt UI components with meaning-based colors such as primary, success, and error color="primary" color="error" Use color props such as color="primary" or color="error" Hardcoded colors Hardcoded palette colors <UButton color="primary"> <UButton class="bg-green-500"> Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
7 6 Components Use variant prop for styling Nuxt UI provides solid outline soft subtle ghost link variants variant="soft" variant="outline" Choose a built-in variant before adding custom classes Custom button classes Recreate a built-in variant with custom classes <UButton variant="soft"> <UButton class="border bg-transparent"> Medium https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
8 7 Components Use size prop consistently Components support xs sm md lg xl sizes size="sm" size="lg" Arbitrary sizing classes <UButton size="lg"> <UButton class="text-xl px-6"> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
9 8 Icons Use i-{collection}-{name} format for icons Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy i-lucide-home i-heroicons-user format lucide:home format (v3 syntax) <UButton icon="i-lucide-home"> <UButton icon="lucide:home"> High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
10 9 Icons Use leadingIcon and trailingIcon props Position icons with dedicated props for clarity leadingIcon="i-lucide-plus" trailingIcon="i-lucide-arrow-right" Use leadingIcon or trailingIcon for standard button icons Manual icon positioning or slots Build a custom icon slot when a standard icon prop is enough <UButton leadingIcon="i-lucide-plus" label="Add"> <UButton><UIcon name="i-lucide-plus"/>Add</UButton> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
11 10 Theming Configure colors in app.config.ts Runtime color configuration without restart ui.colors.primary in app.config.ts Hardcoded colors in components defineAppConfig({ ui: { colors: { primary: 'blue' } } }) <UButton class="bg-blue-500"> High https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
12 11 Theming Use @theme directive for custom colors Define complete custom palettes with @theme static Define design tokens in CSS with Tailwind @theme Nuxt UI custom colors require shades 50 through 950 @theme { --color-brand-500: #xxx } Define every --color-brand-* shade in @theme static Inline color definitions Define only one shade for a custom palette @theme { --color-brand-500: #ef4444; } @theme static { --color-brand-50: #fff1f2; ... --color-brand-950: #4c0519; } :style="{ color: '#ef4444' }" @theme { --color-brand-500: #ef4444; } Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
13 12 Theming Register and map semantic colors Register extra semantic color names at build time then map them to a palette in app.config nuxt.config ui.theme.colors plus app.config ui.colors Use an unregistered semantic color ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet' <UButton color="tertiary"> without config Medium https://ui.nuxt.com/docs/getting-started/theme/design-system nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
14 13 Forms Use UForm with schema validation UForm supports Zod Yup Joi Valibot schemas UForm accepts Standard Schema libraries such as Zod, Valibot, Yup, and Joi :schema prop with validation schema Pass a Standard Schema with :schema and reactive state with :state Manual form validation <UForm :schema="schema" :state="state"> Manual @blur validation High https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
15 14 Forms Use UFormField for field wrapper Provides label error message and validation display UFormField with name prop Manual error handling <UFormField name="email" label="Email"> <div><label>Email</label><UInput/><span>error</span></div> Medium https://ui.nuxt.com/docs/components/form-field nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
16 15 Forms Handle form submit with @submit UForm emits submit event with validated data @submit handler on UForm @click on submit button <UForm @submit="onSubmit"> <UButton @click="onSubmit"> Medium https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
17 16 Forms Choose validation timing deliberately UForm validates on input blur and change by default; input is delayed and begins after blur unless eager Set validateOn and eager to match the interaction Assume the default validates every keystroke immediately <UForm :validateOn="['blur', 'change']"> Describe default UForm as eager input-only validation Low https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
18 17 Overlays Use v-model:open for overlay control Modal Slideover Drawer use v-model:open v-model:open for controlled state Manual show/hide logic <UModal v-model:open="isOpen"> <UModal v-if="isOpen"> Medium https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
19 18 Overlays Use useOverlay composable for programmatic overlays Open overlays programmatically — v4 API is create().open() not open(Component) overlay.create(Component).open({ props }) pattern Create the overlay once, then pass component props directly to open() v3 overlay.open(Component) pattern (removed in v4) const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }) overlay.open(MyModal, { props: { title: 'Confirm' } }) High https://ui.nuxt.com/docs/components/modal https://ui.nuxt.com/docs/composables/use-overlay nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
20 19 Overlays Use title and description props Built-in header support for overlays title="Confirm" description="Are you sure?" Use title and description props for a standard overlay header Manual header content Rebuild a simple title and description with a custom header slot <UModal title="Confirm" description="Are you sure?"> <UModal><template #header><h2>Confirm</h2></template> Low https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
21 20 Dashboard Use UDashboardSidebar for navigation Provides collapsible resizable sidebar with mobile support UDashboardSidebar with header default footer slots Custom sidebar implementation <UDashboardSidebar><template #header>...</template></UDashboardSidebar> <aside class="w-64 border-r"> Medium https://ui.nuxt.com/docs/components/dashboard-sidebar nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
22 21 Dashboard Use UDashboardGroup for layout Wraps dashboard components with sidebar state management UDashboardGroup > UDashboardSidebar + UDashboardPanel Manual layout flex containers <UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup> <div class="flex"><aside/><main/></div> Medium https://ui.nuxt.com/docs/components/dashboard-group nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
23 22 Dashboard Use UDashboardNavbar for top navigation Responsive navbar with mobile menu support Responsive dashboard header with sidebar toggle and layout slots UDashboardNavbar in dashboard layout Place UDashboardNavbar in a UDashboardPanel header and use its slots for actions Custom navbar implementation Pass unsupported links props or rebuild the responsive toggle <UDashboardNavbar :links="navLinks"/> <UDashboardNavbar title="Dashboard"><template #right><UButton label="Add"/></template></UDashboardNavbar> <nav class="border-b"> <UDashboardNavbar :links="navLinks"/> Low https://ui.nuxt.com/docs/components/dashboard-navbar nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
24 23 Tables Use UTable with data and columns props Powered by TanStack Table with built-in features :data and :columns props Manual table markup <UTable :data="users" :columns="columns"/> <table><tr v-for="user in users"> High https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
25 24 Tables Define columns with accessorKey Column definitions use accessorKey for data binding accessorKey: 'email' in column def String column names only { accessorKey: 'email', header: 'Email' } ['name', 'email'] Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
26 25 Tables Use column cell slots Customize cell content with the documented column-id slot pattern #status-cell for a status column Use the obsolete #cell-status name <template #status-cell="{ row }"> <template #cell-status="{ row }"> Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
27 26 Tables Enable sorting with TanStack column APIs Render a header control that calls column.toggleSorting Use getCanSort and toggleSorting Invent a sortable property not in the column contract header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() }) { accessorKey: 'name', sortable: true } Low https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
28 27 Navigation Use UNavigationMenu for nav links Horizontal or vertical navigation with dropdown support UNavigationMenu with items array Manual nav with v-for <UNavigationMenu :items="navItems"/> <nav><a v-for="item in items"> Medium https://ui.nuxt.com/docs/components/navigation-menu nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
29 28 Navigation Use UBreadcrumb for page hierarchy Automatic breadcrumb with NuxtLink support Render accessible page hierarchy from an items array with NuxtLink support :items array with label and to Manual breadcrumb links <UBreadcrumb :items="breadcrumbs"/> <nav><span v-for="crumb in crumbs"> Low https://ui.nuxt.com/docs/components/breadcrumb nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
30 29 Navigation Use UTabs for tabbed content Tab navigation with content panels UTabs with items containing slot content Manual tab state <UTabs :items="tabs"/> <div><button @click="tab=1"> Medium https://ui.nuxt.com/docs/components/tabs nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
31 30 Feedback Use useToast for notifications Composable for toast notifications Composable notifications rendered by the UApp toast provider useToast().add({ title description }) Wrap the app in UApp and call useToast().add() Alert components for toasts const toast = useToast(); toast.add({ title: 'Saved' }) <UAlert v-if="showSuccess"> High https://ui.nuxt.com/docs/components/toast nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
32 31 Feedback Use UAlert for inline messages Static alert messages with icon and actions UAlert with title description color Toast for static messages <UAlert title="Warning" color="warning"/> useToast for inline alerts Medium https://ui.nuxt.com/docs/components/alert nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
33 32 Feedback Use USkeleton for loading states Placeholder content during data loading USkeleton with appropriate size Spinner for content loading <USkeleton class="h-4 w-32"/> <UIcon name="lucide:loader" class="animate-spin"/> <UIcon name="i-lucide-loader-circle" class="animate-spin"/> Low https://ui.nuxt.com/docs/components/skeleton nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
34 33 Color Mode Use UColorModeButton for theme toggle Built-in light/dark mode toggle button UColorModeButton component Manual color mode logic <UColorModeButton/> <button @click="toggleColorMode"> Low https://ui.nuxt.com/docs/components/color-mode-button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
35 34 Color Mode Use UColorModeSelect for theme picker Dropdown to select system light or dark mode UColorModeSelect component Custom select for theme <UColorModeSelect/> <USelect v-model="colorMode" :items="modes"/> Low https://ui.nuxt.com/docs/components/color-mode-select nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
36 35 Customization Use ui prop for component styling Use class for the root and ui for named slots Override component styles via ui prop class customizes the root slot; ui targets component slots ui prop with slot class overrides Use class for root-only changes and ui after checking generated slot names Global CSS overrides Use !important or guess undocumented slot names <UButton :ui="{ base: 'rounded-full' }"/> <UButton class="rounded-full" :ui="{ trailingIcon: 'size-3' }"/> <UButton class="!rounded-full"/> Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
37 36 Customization Configure default variants in app.config Set component default variants under ui component keys app.config ui.button.defaultVariants Put component defaults in nuxt.config Put button-specific defaults under global ui.theme.defaultVariants defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } }) ui.theme.defaultVariants in nuxt.config ui: { theme: { defaultVariants: { variant: 'outline' } } } // affects every component Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
38 37 Customization Use app.config.ts for theme overrides Runtime theme customization defineAppConfig with ui key nuxt.config for runtime values defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }) nuxt.config ui.button.size: 'sm' Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
39 38 Performance Enable component detection Enable component detection for Nuxt Tree-shake unused component CSS Generate CSS only for detected Nuxt UI components and their dependencies experimental.componentDetection: true Use true for static usage or include dynamic component names in an array Include all component CSS Enable detection and omit components rendered through dynamic :is values ui: { experimental: { componentDetection: true } } ui: { experimental: { componentDetection: ['Modal'] } } ui: {} (includes all CSS) componentDetection: true with <component :is="name"/> only Low https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
40 39 Performance Use UTable virtualize for large data Enable virtualization for 1000+ rows Enable row virtualization when rendering large datasets :virtualize prop on UTable Use the virtualize prop after row rendering becomes a measured bottleneck Render all rows Render a large dataset without pagination or virtualization <UTable :data="largeData" virtualize/> <UTable :data="largeData"/> Medium https://ui.nuxt.com/docs/components/table nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
41 40 Accessibility Use semantic component props Give overlays an accessible name and description Components have built-in ARIA support Overlay title and description props provide dialog labeling Use title description label props Provide title and description unless custom slots supply equivalent semantics Skip accessibility props Open an unlabeled modal <UModal title="Settings"> <UModal title="Settings" description="Update your preferences"> <UModal><h2>Settings</h2> <UModal><template #body>...</template></UModal> Medium High https://ui.nuxt.com/docs/components/modal nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
42 41 Accessibility Associate labels with controls Use UFormField or correct native id and for attributes UFormField for convenience or explicit label association Use placeholders as labels <UFormField label="Email"><UInput/></UFormField> <UInput placeholder="Email"/> High https://ui.nuxt.com/docs/components/form-field nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
43 42 Content Use UContentToc for table of contents Automatic TOC with active heading highlight UContentToc with :links Manual TOC implementation <UContentToc :links="toc"/> <nav><a v-for="heading in headings"> Low https://ui.nuxt.com/docs/components/content-toc nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
44 43 Content Use UContentSearch for docs search Command palette for documentation search UContentSearch with Nuxt Content Custom search implementation <UContentSearch/> <UCommandPalette :groups="searchResults"/> Low https://ui.nuxt.com/docs/components/content-search nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
45 44 AI/Chat Use UChatMessages for chat UI Designed for Vercel AI SDK integration UChatMessages with messages array Custom chat message list <UChatMessages :messages="messages"/> <div v-for="msg in messages"> Medium https://ui.nuxt.com/docs/components/chat-messages nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
46 45 AI/Chat Use UChatPrompt for input Enhanced textarea for AI prompts UChatPrompt with v-model Basic textarea <UChatPrompt v-model="prompt"/> <UTextarea v-model="prompt"/> Medium https://ui.nuxt.com/docs/components/chat-prompt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
47 46 Editor Use UEditor for rich text TipTap-based editor binds its document with v-model UEditor with v-model Use the undocumented v-model:content binding <UEditor v-model="content"/> <UEditor v-model:content="content"/> Medium https://ui.nuxt.com/docs/components/editor nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
48 47 Links Use to prop for navigation UButton and ULink support NuxtLink to prop to="/dashboard" for internal links href for internal navigation <UButton to="/dashboard"> <UButton href="/dashboard"> Medium https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
49 48 Links Use to for external URLs ULink and link-enabled components detect absolute URLs and support target when a new tab is intended to="https://example.com" target="_blank" Use href inconsistently or claim an external prop is required <UButton to="https://example.com" target="_blank"> <UButton href="https://..."> Low https://ui.nuxt.com/docs/components/link nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
50 49 Loading Use loadingAuto on buttons Automatic loading state from @click promise loadingAuto prop on UButton Manual loading state <UButton loadingAuto @click="async () => await save()"> <UButton :loading="isLoading" @click="save"> Low https://ui.nuxt.com/docs/components/button nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
51 50 Loading Use UForm loadingAuto Auto-disable form during submit loadingAuto on UForm (default true) Manual form disabled state <UForm @submit="handleSubmit"> <UForm :disabled="isSubmitting"> Low https://ui.nuxt.com/docs/components/form nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
52 51 Installation Let Nuxt UI declare module dependencies Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration Configure dependency options at their root keys Add duplicate module entries without a documented need icon: { /* opts */ } in nuxt.config modules: ['@nuxt/ui', '@nuxt/icon'] High https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
53 52 Installation Use official templates to bootstrap projects Create a Nuxt project from an official Nuxt UI template npm create nuxt@latest -- -t ui/dashboard Manually reconstruct a template npm create nuxt@latest -- -t ui/dashboard pnpm create nuxt app then copy dashboard files Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
54 53 Icons Install required icon collections locally Install Iconify JSON collections used by the app; Nuxt UI 4.10 can bundle icons from installed collections Install the Iconify JSON collections used by the app for reliable SSR and bundling pnpm i @iconify-json/lucide for lucide icons Rely on an unavailable collection at runtime pnpm i @iconify-json/lucide Use i-custom-* without installing its collection Medium https://ui.nuxt.com/docs/getting-started/icons/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
55 54 Icons Override default component icons globally Override default component icons centrally when needed Components use default icons configurable via appConfig.ui.icons appConfig.ui.icons keeps intentional icon overrides consistent Set loading close check icons in app.config.ts Set a global icon key when the product needs a different default Accept default icons for all components Repeat the same icon override on every component instance defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } }) <UModal :close-icon="'i-lucide-x'"> on every usage <UModal close-icon="i-lucide-circle-x"/> repeated everywhere Low https://ui.nuxt.com/docs/getting-started/installation/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
56 55 Forms Use UFileUpload for file input Built-in drag-drop and preview support UFileUpload with v-model and accept prop Custom input type=file <UFileUpload v-model="files" accept="image/*" multiple/> <input type="file" @change="handleFiles"> Medium https://ui.nuxt.com/docs/components/file-upload nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
57 56 Forms Use UInputDate for date selection Locale-aware date picker built on UCalendar Date input supports single dates and ranges with locale inherited from UApp UInputDate with v-model and locale prop Use range when needed and configure locale on UApp Third-party date picker libraries <UInputDate v-model="date" /> <UApp :locale="fr"><UInputDate v-model="range" range/></UApp> <DatePicker v-model="date" /> <UInputDate locale="fr"/> Medium https://ui.nuxt.com/docs/components/input-date nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
58 57 Forms Use UInputTags for tag input Multi-value tag input with keyboard support UInputTags with v-model and max prop Custom chip input implementation <UInputTags v-model="tags" :max="5" /> <UInput @keydown.enter="addTag"> Low https://ui.nuxt.com/docs/components/input-tags nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
59 58 Forms Use UColorPicker for color selection Full-featured color picker with multiple format support UColorPicker with v-model and format prop Native input type=color <UColorPicker v-model="color" format="hex" /> <input type="color" v-model="color"> Low https://ui.nuxt.com/docs/components/color-picker nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
60 59 Data Use UTree for hierarchical data Built-in tree component with expand/collapse UTree with items prop containing nested children Custom recursive component <UTree :items="treeItems" /> <TreeNode v-for="item in items" :key="item.id"> Low https://ui.nuxt.com/docs/components/tree nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
61 60 Data Use UMarquee for infinite scroll content Animated infinite scroll band for logos or testimonials UMarquee with repeat and pauseOnHover props CSS animation keyframes loop <UMarquee :repeat="3" pause-on-hover> <div class="animate-marquee"> Low https://ui.nuxt.com/docs/components/marquee nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
62 61 Overlays Use UContextMenu for right-click menus Context menu triggered by right-click on children UContextMenu wrapping target element Browser default context menu <UContextMenu :items="menuItems"><div>Right-click me</div></UContextMenu> <div @contextmenu.prevent="showMenu"> Medium https://ui.nuxt.com/docs/components/context-menu nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
63 62 Overlays Await overlay result for confirmation dialogs useOverlay returns a result Promise resolving to user action open() returns a Promise that resolves when the overlay component emits close await instance.result to get confirm/cancel Emit a close value from the overlay component and await modal.open() Emit events from overlay components Expect a result from a component that never emits close const { result } = modal.open(); if (await result) { deleteItem() } if (await modal.open()) { deleteItem() } overlay.open(Confirm, { onConfirm: deleteItem }) modal.open(); deleteItem() Medium https://ui.nuxt.com/docs/components/modal https://ui.nuxt.com/docs/composables/use-overlay nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
64 63 Navigation Use UCommandPalette with grouped items Use UCommandPalette with identified groups Command palette supports grouped search with icons and kbds Command palette accepts groups with an id, label, and items groups array with id label items Give every group a stable id and its own items Flat list without categories Pass a flat items prop that is not part of the component API <UCommandPalette :groups="[{ id: 'actions', label: 'Actions', items }]"/> <UCommandPalette :items="flatList"/> Medium https://ui.nuxt.com/docs/components/command-palette nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
65 64 Navigation Use defineShortcuts with extractShortcuts Wire keyboard shortcuts from menu item kbds automatically extractShortcuts(items) + defineShortcuts to sync keybindings Manually duplicate shortcuts from menu items defineShortcuts(extractShortcuts(items)) defineShortcuts({ meta_n: () => newFile() }) // duplicated from items Low https://ui.nuxt.com/docs/composables/define-shortcuts nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
66 65 Layout Use UHeader and UFooter for page layout Responsive header/footer with built-in mobile menu UHeader with #default slot for nav UFooter with columns Custom header/footer from scratch <UHeader><template #right><UNavigationMenu/></template></UHeader> <header class="sticky top-0"> Low https://ui.nuxt.com/docs/components/header nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
67 66 Layout Use UPageAside for sidebar content Sidebar that hides below lg breakpoint automatically UPageAside for docs and landing page sidebars Manual hidden lg: classes <UPageAside><UNavigationMenu orientation="vertical"/></UPageAside> <aside class="hidden lg:block"> Low https://ui.nuxt.com/docs/components/page-aside nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
68 67 Color Mode Wrap custom color mode toggles in ClientOnly Prevents hydration mismatch on server-rendered color mode ClientOnly with fallback placeholder Direct useColorMode in template without ClientOnly <ClientOnly><USwitch v-model="isDark"/><template #fallback><div class="size-8"/></template></ClientOnly> <USwitch v-model="isDark"/> directly in template Medium https://ui.nuxt.com/docs/getting-started/installation/nuxt https://ui.nuxt.com/docs/getting-started/integrations/color-mode/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
69 68 Theming Read generated theme file to find slot names Nuxt UI generates theme files listing all component slots and variants Generated theme files list current slots, variants, and default classes Check .nuxt/ui/<component>.ts for slot names Check .nuxt/ui in Nuxt or node_modules/.nuxt-ui/ui in Vue before overriding slots Guess slot names or use trial-and-error .nuxt/ui/button.ts for UButton slot names .nuxt/ui/button.ts or node_modules/.nuxt-ui/ui/button.ts <UButton :ui="{ base: 'rounded-full' }"/> without checking slots Medium https://ui.nuxt.com/docs/getting-started/theme/components nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
70 69 Composables Use defineShortcuts whenever keyword shortcut whenever array condition prevents shortcut firing when inactive whenever: [isFormValid] to guard shortcut execution Always-on shortcuts that fire in wrong context defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } }) defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid Low https://ui.nuxt.com/docs/composables/define-shortcuts nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
71 70 i18n Use UApp locale prop for internationalization Nuxt UI supports 50+ built-in locales via locale prop on UApp UApp locale configures component messages, formatting, and direction Import locale from @nuxt/ui/locale and pass to UApp Pass a locale object to UApp and propagate lang and dir to html Manual translation of component UI strings Translate built-in component strings instance by instance import { fr } from '@nuxt/ui/locale'; // <UApp :locale="fr"> <UModal title="Fermer"> manually for each component Low https://ui.nuxt.com/docs/composables/define-locale https://ui.nuxt.com/docs/getting-started/integrations/i18n/nuxt nuxt-ui 4.10 nuxt-ui 4.11.1 active 2026-08-13 2026-09-21
72 71 Layout Use USplitter for resizable panel layouts Splitter provides horizontal, vertical, nested, and collapsible resizable panels Define panel items with stable slots and size constraints Reimplement drag resizing and keyboard behavior <USplitter id="layout" :items="items" class="h-96"> <div @mousemove="resizePanels"> Medium https://ui.nuxt.com/docs/components/splitter nuxt-ui 4.11.1 active 2026-09-21
73 72 Layout Stabilize server-rendered splitter layouts Generated ids and mixed default sizes can cause hydration mismatches or panel jumps Set id and give defaultSize to every item or to none; use auto-save-id for persistence Mix items with and without defaultSize during SSR <USplitter id="layout" auto-save-id="layout" :items="sizedItems"> <USplitter :items="mixedDefaultSizes"> High https://ui.nuxt.com/docs/components/splitter nuxt-ui 4.11.1 active 2026-09-21
74 73 Data Use UProgressGroup for segmented totals ProgressGroup displays multiple values as segments of one total with a legend Pass labeled items and an explicit max when the total is not 100 Build a segmented progress bar from unrelated div widths <UProgressGroup :items="usage" :max="128" status/> <div v-for="item in usage" :style="{ width: item.value + '%' }"> Low https://ui.nuxt.com/docs/components/progress-group nuxt-ui 4.11.1 active 2026-09-21
75 74 Motion Retune library motion with theme easing tokens Nuxt UI 4.11 uses --ease-out for enter, exit, and movement transitions Override --ease-out in @theme to retime motion consistently Override transition timing independently on every component @theme { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } .modal { transition-timing-function: ... } repeated per component Low https://ui.nuxt.com/docs/getting-started/theme/design-system#motion nuxt-ui 4.11.1 active 2026-09-21
76 75 Performance Enable component detection in Vue and Vite The Nuxt UI Vite plugin can generate CSS only for detected components Set experimental.componentDetection in the @nuxt/ui/vite plugin and restart after adding components Expect newly detected component styles without restarting the dev server ui({ experimental: { componentDetection: true } }) ui({}) // generates theme CSS for every component Low https://ui.nuxt.com/docs/getting-started/installation/vue#experimentalcomponentdetection nuxt-ui 4.11.1 active 2026-09-21
77 76 Security Use Nuxt UI 4.11+ for CommandPalette search Nuxt UI 4.11 escapes CommandPalette search highlights to prevent XSS Upgrade @nuxt/ui to 4.11.1 or newer when rendering untrusted command labels Render untrusted CommandPalette labels with a pre-4.11 release pnpm add @nuxt/ui@^4.11.1 @nuxt/ui@4.10 with user-controlled command labels High https://ui.nuxt.com/docs/components/command-palette nuxt-ui 4.11.1 active 2026-09-21

2
src/ui-ux-pro-max/scripts/core.py
View File

@ -156,7 +156,7 @@ STACK_CURRENT_APPLICABILITY = {
"html-tailwind": "html-tailwind 4.3",
"shadcn": "shadcn cli 4",
"nuxtjs": "nuxtjs 4.5",
"nuxt-ui": "nuxt-ui 4.10",
"nuxt-ui": "nuxt-ui 4.11.1",
"react-native": "react-native 0.86.x",
"flutter": "flutter 3.44.x",
"swiftui": "swiftui current",

28
src/ui-ux-pro-max/scripts/tests/fixtures/relevance-baseline.json vendored
View File

@ -1707,21 +1707,21 @@
"Guideline": "Let Nuxt UI declare module dependencies"
},
{
"Category": "Icons",
"Guideline": "Install required icon collections locally"
"Category": "Theming",
"Guideline": "Read generated theme file to find slot names"
}
],
"diagnostics": {
"abstained": false,
"calibration_version": "2026-08-12-v1",
"margin": 3.1826026810457666,
"margin": 3.838208672372261,
"normalized_query": "install the Nuxt UI module",
"query_rewrites": [],
"reason": "matched",
"runner_up_score": 9.430568542253825,
"runner_up_score": 9.354004973008944,
"search_query": "install the Nuxt UI module",
"token_coverage": 1.0,
"top_score": 12.613171223299592
"top_score": 13.192213645381205
},
"expectedRoute": null,
"grades": [
@ -1745,25 +1745,25 @@
"Guideline": "Use semantic color props"
},
{
"Category": "Theming",
"Guideline": "Use @theme directive for custom colors"
"Category": "Performance",
"Guideline": "Enable component detection for Nuxt"
},
{
"Category": "Installation",
"Guideline": "Let Nuxt UI declare module dependencies"
"Category": "Theming",
"Guideline": "Define complete custom palettes with @theme static"
}
],
"diagnostics": {
"abstained": false,
"calibration_version": "2026-08-12-v1",
"margin": 0.48203542343964934,
"margin": 13.200313041581737,
"normalized_query": "style Nuxt UI components through meaning-based color props",
"query_rewrites": [],
"reason": "matched",
"runner_up_score": 7.263126698989611,
"runner_up_score": 9.334552712447977,
"search_query": "style Nuxt UI components through meaning-based color props",
"token_coverage": 0.7777777777777778,
"top_score": 7.74516212242926
"token_coverage": 1.0,
"top_score": 22.534865754029713
},
"expectedRoute": null,
"grades": [
@ -3277,7 +3277,7 @@
"typoRecoveryAt3": 1.0
},
"oracleFingerprint": "02e7226428c64a995ec24ae104ce4d186f5f91bf0f062556e90ef9b0fcb6d67a",
"runtimeFingerprint": "8ba69ee0070e055363e089a3a9338d0d2f79196ed4f8509c3a8a0aec379d40df",
"runtimeFingerprint": "1d18a1cac526f15cea7f4e94cef4bed39fafa250a2b6cc81d8c8007b47c6042e",
"samples": {
"cases": 90,
"designSystem": 8,

2
src/ui-ux-pro-max/scripts/tests/fixtures/relevance-thresholds.json vendored
View File

@ -2,7 +2,7 @@
"schemaVersion": 1,
"status": "provisional-baseline-regression-gate",
"baselineRevision": "97eb2a2",
"runtimeFingerprint": "8ba69ee0070e055363e089a3a9338d0d2f79196ed4f8509c3a8a0aec379d40df",
"runtimeFingerprint": "1d18a1cac526f15cea7f4e94cef4bed39fafa250a2b6cc81d8c8007b47c6042e",
"oracleFingerprint": "02e7226428c64a995ec24ae104ce4d186f5f91bf0f062556e90ef9b0fcb6d67a",
"approvingMaintainer": "repository maintainer approved Phase 1 testing checkpoint; second judgment review remains required before final-target promotion",
"units": "All metrics are ratios in [0,1]. Precision treats missing ranks as non-relevant. Negative abstention is measured across the hard-negative by domain/stack cross-product.",

2
src/ui-ux-pro-max/scripts/tests/test_web_stack_freshness.py
View File

@ -24,7 +24,7 @@ CURRENT_APPLICABILITY = {
"html-tailwind": "html-tailwind 4.3",
"shadcn": "shadcn cli 4",
"nuxtjs": "nuxtjs 4.5",
"nuxt-ui": "nuxt-ui 4.10",
"nuxt-ui": "nuxt-ui 4.11.1",
}