Nuxt UI

Nuxt UI ships 125+ accessible, production-ready components built on Reka UI primitives, Tailwind CSS and Tailwind Variants. Maintained by the Nuxt core team, and Nuxt itself is optional: it works in a plain Vue project too.

At a glance

Install	npx nuxi module add ui or npm install @nuxt/ui
Components	125+
Primitives	Reka UI
Styling	Tailwind CSS with Tailwind Variants
Icons	Iconify, any icon by name
MCP server	yes
License	MIT

Install

In a Nuxt app:

npx nuxi module add ui

In a plain Vue app:

npm install @nuxt/ui

What the code looks like

Icons resolve by name through Iconify, so you never install an icon package or import an SVG.

<template>
  <UButton icon="i-lucide-rocket" color="primary" size="md">
    Deploy
  </UButton>

  <UModal v-model:open="open" title="Invite a teammate">
    <template #body>
      <UInput v-model="email" placeholder="name@company.com" />
    </template>
  </UModal>
</template>

The Pro tier is now free

After NuxtLabs joined Vercel, the paid Nuxt UI Pro features were merged into the free open-source offering. The page templates, application layouts and dashboard components that used to sit behind a licence now ship with the package. If you priced this project before that change, price it again.

Choose it if

• You are building with Nuxt. Nothing else integrates this cleanly with its conventions.
• You want Reka UI's accessibility without designing anything yourself.
• You want one dependency covering components, icons, forms and layouts.

Look elsewhere if

• You want full visual control from scratch. Reka UI on its own is the lower layer.
• You are not on Tailwind and do not intend to be.