---
title: Installation
description: Get started with Nuxt UI Pro documentation template.
navigation:
  icon: lucide-download
---


::ProseImg{src="https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png"}
::

::stack
  ::div{class="p-6 text-3xl font-bold"}
  ✨ shadcn-docs-nuxt
  ::

  ```mdc
  ---
  title: Installation
  description: How to install shadcn-docs-nuxt in your app.
  icon: lucide:play
  ---

  ## Using the starter template
  ```


  :read-more{title="Installation" to="/getting-started/installation"}

  ::card
  ---
  title: Components
  icon: lucide:box
  ---
  See MDC components provided by **shadcn-docs-nuxt**.
  ::
::

::field-group
  ::field{name="withDefault" type="boolean" defaultValue="true"}
  A field with a default value.
  ::
  ::field{name="requiredField" type="boolean" required}
  A required field.
  ::
  ::field{name="clear (path?: string)" type="void"}
  Clears form errors associated with a specific path. If no path is provided, clears all form errors.
  ::
  ::field{name="getErrors (path?: string)" type="FormError[]"}
  Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
  ::
  ::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
  Sets form errors for a given path. If no path is provided, overrides all errors.
  ::
  ::field{name="errors" type="Ref<FormError[]>"}
  A reference to the array containing validation errors. Use this to access or manipulate the error information.
  ::
::
::code-tree{defaultValue="nuxt.config.ts"}

```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
});
```

```vue [app/app.vue]
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```json [package.json]
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui-pro": "3.0.0-alpha.10",
    "nuxt": "^3.15.1"
  },
  "devDependencies": {
    "typescript": "^5.7.2",
    "vue-tsc": "^2.2.0"
  }
}
```

```json [tsconfig.json]
{
  "extends": "./.nuxt/tsconfig.json"
}
```

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],

  future: {
    compatibilityVersion: 4
  },

  css: ['~/assets/main.css']
});
```

````md [README.md]
# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````

::


::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}
Use this template on Nuxt Studio and start your documentation in seconds.
::

## Quick Start

You can start a fresh new project with:

```bash [Terminal]
npx nuxi init -t github:nuxt-ui-pro/docs
```

or create a new repository from GitHub:

1. Open <https://github.com/nuxt-ui-pro/docs>
2. Click on `Use this template` button
3. Enter repository name and click on `Create repository from template` button
4. Clone your new repository
5. Install dependencies with your favorite package manager
6. Start development server

That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀