Installation

Global installation, on-demand installation, configuration

Global Installation

Allows you to use all components under the nextui-vue namespace.

npm

npm install nextui-vue

pnpm

pnpm install nextui-vue

yarn

yarn install nextui-vue

bun

bun install nextui-vue

On-Demand Installation

Install only the components you need. Please refer to each component's documentation to learn how to install them.

TIP

Make sure you have completed the Theme Configuration before using on-demand installation.

Theme Configuration

Install the HeroUI theme.

npm

npm install @heroui/theme

pnpm

pnpm install @heroui/theme

yarn

yarn install @heroui/theme

bun

bun install @heroui/theme

Since HeroUI is based on TailwindCSS, you also need to install it. Refer to TailwindCSS installation steps.

WARNING

Only TailwindCSS V3 and below are supported, V4 is not supported, related issue.

Then add the following code to your tailwind.config.js file:

// tailwind.config.js
const { heroui } = require('@heroui/theme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  darkMode: 'class',
  plugins: [heroui()]
}