How to Install Nuxtlabs UI in NuxtJS

In this tutorial, I will show you how to install Nuxtlabs UI in Nuxt 3.

Create Nuxtjs Project

Run below command in terminal to install nuxt 3 project.

# using npx
npx nuxi@latest init <project-name>
# using pnpm
pnpm dlx nuxi@latest init <project-name>

Move to project.

cd <project-name>

Install the dependencies:

# using npm
npm install
# using pnpm
pnpm install
# using yarn
yarn install

Install Nuxtlabs UI in Nuxt 3

Run below command to install Nuxtlabs UI in Nuxt 3.

# using npm 
npm install -D @nuxthq/ui
# using yarn
yarn add -D @nuxthq/ui
# using pnpm
pnpm i -D @nuxthq/ui

Add @nuxthq/ui modules in your nuxt.config section.

export default defineNuxtConfig({
 modules: ['@nuxthq/ui']


  <div class="space-x-4">
    <UButton color="violet" variant="solid">Button</UButton>
    <UButton color="cyan" variant="outline">Button</UButton>
nuxtlabs ui in nuxt 3 button
Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,

Share link