#Getting Started

BreezeUI is a modern Vue 3 component library built on Radix Vue and Tailwind CSS.

#Why BreezeUI?

#Lightweight & Efficient

• Small core bundle size with on-demand imports
• Automatic Tree-shaking for minimal bundle size

#Highly Customizable

• Built on Tailwind CSS with full style control
• Customizable theme variables with dark mode out of the box
• Flexible styling through component props

#Accessibility First

• Built on Radix Vue following WAI-ARIA guidelines
• Built-in keyboard navigation and focus management

#Native TypeScript

• Written entirely in TypeScript
• Complete type hints with IDE autocompletion

#Rich Components

70+ carefully crafted components covering everything from basic forms to complex interactions.

#Quick Example

<script setup lang="ts">
import { ref } from 'vue'
import { BrButton, BrInput, BrCard, BrCardHeader, BrCardContent } from '@breezeui/vue'

const value = ref('')
</script>

<template>
  <BrCard class="w-80">
    <BrCardHeader>
      <h3>Welcome to BreezeUI</h3>
    </BrCardHeader>
    <BrCardContent>
      <BrInput v-model="value" placeholder="Type something..." class="mb-3" />
      <BrButton class="w-full">Get Started</BrButton>
    </BrCardContent>
  </BrCard>
</template>

#Tech Stack

#Next Steps

• Installation - Add BreezeUI to your project
• Theming - Customize themes and dark mode
• Button - Start exploring from basic components
• All Components - Browse available components