nuxt-ui

Use UForm with a Standard Schema library like Zod or Valibot, binding a reactive state object and wrapping inputs in UFormField with a matching name prop. Validation runs automatically on submit, and errors display under each field.

Call useToast() and invoke toast.add() with title, description, color, and timeout options. Your app must be wrapped in the UApp component, which provides the global overlay context required for toasts to render.

Yes, @nuxt/ui v4 is built on Tailwind CSS v4 and Tailwind Variants. You import both in your main CSS file with @import 'tailwindcss' and @import '@nuxt/ui', then register the module in nuxt.config.ts.

Reka UI provides unstyled headless primitives handling accessibility and behavior, while @nuxt/ui wraps those primitives with Tailwind-based styling, theming, and Nuxt integration. Use Reka UI directly when you need full control over markup.

Overlays require the UApp wrapper component at the root of your app, typically in app.vue around NuxtPage. Without it, useToast, useOverlay, Modal, and Tooltip have no mounting context and will fail silently.

Define semantic colors like primary and neutral in app.config.ts under the ui key, and map them to CSS variables in your main stylesheet. Tailwind Variants slots let you override per-component styles via the ui prop.