Note: The following guide is for Tailwind v4. If you are using Tailwind v3, use [email protected].

Create project

Start by creating a new Nuxt project using create-nuxt-app:

pnpm create nuxt@latest 

If you encounter the error ERROR: Cannot read properties of undefined (reading 'sys') (x4), please proceed to install TypeScript as a dependency, as advised in this issue

pnpm add -D typescript 

Add Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite 

or install @nuxtjs/[email protected] or newer

pnpm add tailwindcss @nuxtjs/[email protected] 

For Nuxt v4: app/assets/css/tailwind.css
For Nuxt v3: assets/css/tailwind.css

Replace everything in tailwind.css with the following:

@import "tailwindcss";

Update nuxt.config.ts with the following:

import tailwindcss from '@tailwindcss/vite'  export default defineNuxtConfig({  // ...  css: ['~/assets/css/tailwind.css'],  vite: {  plugins: [  tailwindcss(),  ],  }, })

Add Nuxt module

Skipping this step triggers numerous console warnings due to Nuxt's auto-import feature.

Install the package below.

pnpm dlx nuxi@latest module add shadcn-nuxt 

Add a Nuxt Plugin for providing ssrWidth

Some components require a ssrWidth to be set through VueUse to avoid Hydration errors on mobile.

Add the following plugin to your Nuxt application:
For Nuxt v4: app/plugins/ssr-width.ts
For Nuxt v3: plugins/ssr-width.ts

Read more about useSSRWidth

import { provideSSRWidth } from '@vueuse/core'  export default defineNuxtPlugin((nuxtApp) => {  provideSSRWidth(1024, nuxtApp.vueApp) })

Configure nuxt.config.ts

export default defineNuxtConfig({  // ...  modules: ['shadcn-nuxt'],  shadcn: {  /**  * Prefix for all the imported component  */  prefix: '',  /**  * Directory that the component lives in.  * @default "./components/ui"  */  componentDir: './components/ui'  }, })

Run Nuxt Prepare

If you are initiating a new project, you need to run the command so that Nuxt generates the necessary .nuxt folder:

pnpm dlx nuxi prepare 

Run the CLI

Run the shadcn-vue init command to setup your project:

pnpm dlx shadcn-vue@latest init 

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

Add Components

You can now start adding components to your project.

pnpm dlx shadcn-vue@latest add button 

The command above will add the Button component to your project. Nuxt autoImport will handle importing the components, you can just use it as such:

<template>  <div>  <Button>Click me</Button>  </div> </template>