ui-ux-pro-max-skill/cli/assets/data/stacks/nuxt-ui.csv

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 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
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.11.1	active	2026-09-21
4	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
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.11.1	active	2026-09-21
6	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
7	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
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.11.1	active	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.11.1	active	2026-09-21
10	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
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.11.1	active	2026-09-21
12	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
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.11.1	active	2026-09-21
14	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
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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	2026-09-21
19	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
20	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
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
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.11.1	active	2026-09-21
23	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
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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	2026-09-21
29	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
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.11.1	active	2026-09-21
31	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
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.11.1	active	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="i-lucide-loader-circle" class="animate-spin"/>	Low	https://ui.nuxt.com/docs/components/skeleton	nuxt-ui 4.11.1	active	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.11.1	active	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.11.1	active	2026-09-21
36	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
37	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
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.11.1	active	2026-09-21
39	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
40	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
41	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
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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	2026-09-21
54	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
55	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
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.11.1	active	2026-09-21
57	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
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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	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.11.1	active	2026-09-21
63	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
64	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
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.11.1	active	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.11.1	active	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.11.1	active	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/integrations/color-mode/nuxt	nuxt-ui 4.11.1	active	2026-09-21
69	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
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.11.1	active	2026-09-21
71	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
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