Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
[!NOTE] You are on the
v3development branch, check out the v2 branch for Nuxt UI v2.
[!TIP] Looking for more components ? Check out Nuxt UI Pro, a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
Visit https://ui.nuxt.com to explore the documentation.
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
nuxt.config.ts:export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
@import "tailwindcss";
@import "@nuxt/ui";
Learn more in the installation guide.
vite.config.ts:import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui()
]
})
main.ts:import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
app.use(router)
app.use(ui)
app.mount('#app')
@import "tailwindcss";
@import "@nuxt/ui";
Learn more in the installation guide.
Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
Follow the docs to set up your local development environment and contribute.
Licensed under the MIT license.
3.3.0 (2025-07-24)
footer slot (#4457) (63730d6)nested prop (e2695ee), closes #4320default-value prop (#4404) (fb9e7bb)remove-tag event (#4511) (6ca7c8b)max-length prop (b96a1cc), closes #4405color prop & soft variant (#4549) (f336600)theme.defaultVariants option (#4400) (35f90b9)reference prop (b00e07f)footer support to display column summary (#4194) (c355cac)style to table and column meta (#4513) (1db21d1)hover event (f903ec3), closes #2435colspan and rowspan (#4460) (7ef1933)reference prop (69a7b95), closes #4430active-class / inactive-class with app config (#4446) (9debce7)active styles to behave like hover on mobile (df8f202), closes #991aria-current attribute to active dot (#4447) (1ba8a55)rtl:space-x-reverse from label (#4576) (4682ded)shift (#4456) (772631c)error type with boolean (a4d0ca7), closes #4496valueKey (4d4234d), closes #4528scope attribute to headers (#4417) (347694b)text and kbds (#4570) (63476e5)en (df1abf1), closes #4579patch when passing props to open (#4497) (5ad7dab)@nuxt/ui (57a5037)clearError (d8160ba)FAQs
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
The npm package @nuxt/ui receives a total of 84,382 weekly downloads. As such, @nuxt/ui popularity was classified as popular.
We found that @nuxt/ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.