Quick Start

This guide will help you get started with HeroUI Vue components.

Basic Usage

Import and use components in your Vue files:

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

<template>
  <Button variant="primary">
    Click me
  </Button>
</template>

Component Variants

Most components support multiple variants for different use cases:

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

<template>
  <div class="flex gap-3">
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="ghost">Ghost</Button>
  </div>
</template>

Sizes

Components typically support multiple sizes:

<template>
  <div class="flex items-center gap-3">
    <Button size="sm">Small</Button>
    <Button size="md">Medium</Button>
    <Button size="lg">Large</Button>
  </div>
</template>

Dark Mode

HeroUI Vue includes built-in dark mode support. Add the dark class to your root element to enable dark mode:

<html class="dark">
  <!-- Your app -->
</html>

TypeScript Support

All components include full TypeScript definitions:

<script setup lang="ts">
import { Button } from '@rysinal/heroui-vue'
import type { ButtonVariants } from '@rysinal/heroui-vue'

const variant: ButtonVariants['variant'] = 'primary'
</script>

Next Steps

Explore the Components section to see all available components and their APIs.