Frameworks

Vite + Vue

1. Install Tailwind CSS v4 and HareUI

npm i @hareui/vue tailwindcss @tailwindcss/vite

pnpm add @hareui/vue tailwindcss @tailwindcss/vite

yarn add @hareui/vue tailwindcss @tailwindcss/vite

bun add @hareui/vue tailwindcss @tailwindcss/vite

2. Configure Vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
})

3. Import styles

@import "tailwindcss";
@import "@hareui/vue";

4. Mount the app

import { createApp } from 'vue'
import { createHareUI } from '@hareui/vue'
import App from './App.vue'
import './main.css'

createApp(App)
  .use(createHareUI())
  .mount('#app')

5. Use your first component

<script setup lang="ts">
import { Button } from '@hareui/vue'
</script>

<template>
  <main class="flex min-h-screen items-center justify-center">
    <Button variant="tertiary">Hello HareUI</Button>
  </main>
</template>

Nuxt

HareUI has no Nuxt module. Register it as a plain Vue plugin and load the CSS through Nuxt's config.

1. Install dependencies

npm i @hareui/vue tailwindcss @tailwindcss/vite

pnpm add @hareui/vue tailwindcss @tailwindcss/vite

yarn add @hareui/vue tailwindcss @tailwindcss/vite

bun add @hareui/vue tailwindcss @tailwindcss/vite

2. Import styles

@import "tailwindcss";
@import "@hareui/vue";

3. Register the plugin

import { createHareUI } from '@hareui/vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createHareUI())
})

4. Wire up Nuxt config

import tailwindcss from '@tailwindcss/vite'

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

The plugin step is optional, same as in Vite. Skip it unless you need createHareUI({ ui }) for app-wide theme overrides — see Theming.

Unlike HeroUI, which ships a framework-agnostic @heroui/styles package usable from Vue, Svelte, Angular, or plain HTML, HareUI components are Vue single-file components with Reka UI as a hard dependency. There is no standalone BEM-class stylesheet to drop into a non-Vue project — HareUI requires Vue 3.5+.

Next Steps

Quick Start - The fastest setup path
Theming - Customize colors and tokens
Composition - Slots, scoped slot props, and the as prop
Components - Explore all available components