# shadcn-nuxt

> Add shadcn-vue module to Nuxt

Latest version **2.8.2** (published 2026-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install shadcn-nuxt
pnpm add shadcn-nuxt
yarn add shadcn-nuxt
bun add shadcn-nuxt
```

## Health

**Score 70/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.8.2 |
| Published | 2026-08-08 |
| First published | 2023-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 10588 |
| Maintainers | zernonia |

## Links

- npm: https://www.npmjs.com/package/shadcn-nuxt
- Repository: https://github.com/unovue/shadcn-vue
- Homepage: https://github.com/unovue/shadcn-vue#readme
- Issues: https://github.com/unovue/shadcn-vue/issues
- npm.io page: https://npm.io/package/shadcn-nuxt

## Dependencies (2)

- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^3.17.4
- [oxc-parser](https://npm.io/package/oxc-parser.md) ^0.102.0

## Recent versions

- 2.8.2 (latest) — 2026-08-08
- 1.0.0 (next) — 2025-02-20
- 0.11.4 (radix) — 2025-02-20
- 2.8.1 — 2026-07-29
- 2.8.0 — 2026-07-15
- 2.7.4 — 2026-06-03
- 2.7.3 — 2026-05-14
- 2.7.2 — 2026-05-12
- 2.7.1 — 2026-05-12
- 2.7.0 — 2026-05-11
- 2.6.2 — 2026-04-12
- 2.6.1 — 2026-04-12
- 2.6.0 — 2026-04-11
- 2.5.3 — 2026-04-07
- 2.5.2 — 2026-04-06
- … 28 more at https://npm.io/package/shadcn-nuxt/versions

## README

<!--
Get your module up and running quickly.

Find and replace all on all files (CMD+SHIFT+F):
- Name: Shadcn Nuxt
- Package name: shadcn-nuxt
- Description: My new Nuxt module
-->

# Shadcn Nuxt

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Shadcn Vue module for Nuxt.

- [✨ &nbsp;Release Notes](/CHANGELOG.md)
<!-- - [🏀 Online playground](https://stackblitz.com/github/unovue/shadcn-vue?file=playground%2Fapp.vue) -->
- [📖 &nbsp;Documentation](https://www.shadcn-vue.com/docs/installation/nuxt.html)

## Features

<!-- Highlight some of the features your module provide here -->
- ⛰ Auto-import correct and relevant components
- more to come...

## Quick Setup

1. Add `shadcn-nuxt` dependency to your project

```bash
# Using pnpm
pnpm add -D shadcn-nuxt

# Using yarn
yarn add --dev shadcn-nuxt

# Using npm
npm install --save-dev shadcn-nuxt
```

2. Add `shadcn-nuxt` to the `modules` section of `nuxt.config.ts`

```js
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'
  }
})
```

That's it! You can now use Shadcn Nuxt in your Nuxt app ✨

### Multiple component directories

Projects that split their base UI components from custom extensions can configure multiple directories, each with its own optional prefix:

```ts
export default defineNuxtConfig({
  modules: ['shadcn-nuxt'],
  shadcn: {
    prefix: 'Ui',
    componentDir: [
      '@/components/ui',
      {
        path: '@/components/ai',
        prefix: 'Ai',
      },
    ],
  },
})
```

Each directory is ignored by Nuxt's default auto-import scanning and re-registered through the module, ensuring clean separation without console warnings. See [issue #1593](https://github.com/unovue/shadcn-vue/issues/1593) for the background.

## Development

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release
```

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/shadcn-nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/shadcn-nuxt

[npm-downloads-src]: https://img.shields.io/npm/dm/shadcn-nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/shadcn-nuxt

[license-src]: https://img.shields.io/npm/l/shadcn-nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/shadcn-nuxt

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com

---
_Source: https://npm.io/package/shadcn-nuxt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._