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 v3
development branch, check out the v2 branch for Nuxt UI v2.
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
- Add the Nuxt UI module in your
nuxt.config.ts
:
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
- Import Tailwind CSS and Nuxt UI in your CSS:
@import "tailwindcss";
@import "@nuxt/ui";
Learn more in the installation guide.
- Add the Nuxt UI Vite plugin in your
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()
]
})
- Use the Nuxt UI Vue plugin in your
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 Tailwind CSS and Nuxt UI in your CSS:
@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:
- Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the contribution guide to share your suggestions.
Follow the docs to set up your local development environment and contribute.
- nuxt/nuxt
- nuxt/icon
- nuxt/fonts
- nuxt-modules/color-mode
- unovue/reka-ui
- tailwindlabs/tailwindcss
- vueuse/vueuse
Licensed under the MIT license.