Quick Start

Install HareUI:

npm i @hareui/vue

pnpm add @hareui/vue

yarn add @hareui/vue

bun add @hareui/vue

Import Styles

Add to your main CSS file:

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

Import order matters. Always import tailwindcss first.

Register Plugin (Optional)

HareUI components work without any setup. Install the plugin only if you want to override themes globally with createHareUI:

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

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

Use Components

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

<template>
  <Button>My Button</Button>
</template>

What's Next?

Design Principles - Understand HareUI's naming and API conventions
Browse Components - See available components
Learn Styling - Customize with Tailwind CSS
Explore Composition - Master slots and the as prop

Requirements

Quick Install

Import Styles

Register Plugin (Optional)

Use Components

What's Next?

On this page