npm package: @lschanaka/u-vue-ui
Description: A modern Vue 3 UI component library with Tailwind CSS and Material design patterns
Author: Your Name
Latest version: 0.2.0

# U Vue UI Components

A modern Vue 3 UI component library built with TypeScript, Tailwind CSS, and Vuetify-inspired design patterns.

## ✨ Features

- 🎨 **Beautiful Components** - Vuetify-inspired design with modern aesthetics
- 🚀 **Vue 3 & TypeScript** - Built with the latest Vue 3 Composition API and full TypeScript support
- 🎯 **Tailwind CSS** - Utility-first CSS framework for rapid UI development
- 📱 **Responsive** - Mobile-first design approach
- ♿ **Accessible** - WCAG compliant components
- 🧪 **Well Tested** - Comprehensive test coverage with Vitest
- 📚 **Storybook** - Interactive component documentation
- 🔧 **Developer Experience** - ESLint, Prettier, and modern tooling

## 📦 Installation

```bash
# npm
npm install u-vue-ui-components

# yarn
yarn add u-vue-ui-components

# pnpm
pnpm add u-vue-ui-components
```

## 🚀 Quick Start

### Global Installation

```typescript
// main.ts
import { createApp } from 'vue'
import UVueUI from 'u-vue-ui-components'
import 'u-vue-ui-components/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(UVueUI)
app.mount('#app')
```

### Individual Component Import

```vue
<template>
  <div>
    <UButton color="primary" @click="handleClick">
      Click me!
    </UButton>
    <UCard elevated>
      <template #header>
        <h3>Card Title</h3>
      </template>
      <p>Card content goes here...</p>
    </UCard>
  </div>
</template>

<script setup lang="ts">
import { UButton, UCard } from 'u-vue-ui-components'
import 'u-vue-ui-components/dist/style.css'

const handleClick = () => {
  console.log('Button clicked!')
}
</script>
```

## 🧩 Components

### UButton

A versatile button component with multiple variants, sizes, and states.

```vue
<template>
  <!-- Basic usage -->
  <UButton>Default Button</UButton>
  
  <!-- With props -->
  <UButton 
    color="success"
    variant="outline"
    size="lg"
    :loading="isLoading"
    @click="handleClick"
  >
    Success Button
  </UButton>
  
  <!-- Icon button -->
  <UButton icon square>
    <PlusIcon />
  </UButton>
</template>
```

**Props:**
- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default: `'md'`)
- `color`: `'primary' | 'success' | 'warning' | 'error' | 'gray'` (default: `'primary'`)
- `variant`: `'solid' | 'outline' | 'ghost' | 'soft'` (default: `'solid'`)
- `disabled`: `boolean` (default: `false`)
- `loading`: `boolean` (default: `false`)
- `block`: `boolean` (default: `false`)
- `pill`: `boolean` (default: `false`)
- `square`: `boolean` (default: `false`)
- `icon`: `boolean` (default: `false`)

### UCard

A flexible card container with optional header and footer sections.

```vue
<template>
  <!-- Basic card -->
  <UCard>
    <p>Basic card content</p>
  </UCard>
  
  <!-- Card with header and footer -->
  <UCard elevated>
    <template #header>
      <h3>Card Title</h3>
    </template>
    <p>Card content with elevated shadow</p>
    <template #footer>
      <UButton size="sm">Action</UButton>
    </template>
  </UCard>
</template>
```

**Props:**
- `elevated`: `boolean` (default: `false`) - Adds elevation shadow
- `outlined`: `boolean` (default: `false`) - Adds border
- `flat`: `boolean` (default: `false`) - Removes all shadows and borders

### UInput

A comprehensive input component with icons, validation, and various states.

```vue
<template>
  <!-- Basic input -->
  <UInput 
    v-model="value"
    placeholder="Enter text..."
  />
  
  <!-- Input with validation -->
  <UInput 
    v-model="email"
    type="email"
    icon="@"
    :error="emailError"
    clearable
  />
</template>
```

**Props:**
- `modelValue`: `string | number`
- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default: `'md'`)
- `type`: `string` (default: `'text'`)
- `placeholder`: `string`
- `disabled`: `boolean` (default: `false`)
- `readonly`: `boolean` (default: `false`)
- `clearable`: `boolean` (default: `false`)
- `icon`: `string` - Left side icon
- `iconRight`: `string` - Right side icon
- `error`: `string` - Error message
- `hint`: `string` - Helper text

### UBadge

Small status indicators and labels.

```vue
<template>
  <!-- Basic badges -->
  <UBadge>Default</UBadge>
  <UBadge color="success">Success</UBadge>
  
  <!-- Pill badge -->
  <UBadge pill color="warning">Warning</UBadge>
  
  <!-- Dot indicator -->
  <UBadge dot color="error" />
</template>
```

**Props:**
- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default: `'sm'`)
- `color`: `'primary' | 'success' | 'warning' | 'error' | 'gray'` (default: `'primary'`)
- `variant`: `'solid' | 'outline' | 'ghost' | 'soft'` (default: `'solid'`)
- `pill`: `boolean` (default: `false`)
- `dot`: `boolean` (default: `false`)

### UAvatar

User avatars with image, text, or icon fallbacks.

```vue
<template>
  <!-- Image avatar -->
  <UAvatar 
    src="/path/to/image.jpg"
    alt="User name"
    size="lg"
  />
  
  <!-- Text avatar -->
  <UAvatar 
    text="John Doe"
    size="md"
  />
  
  <!-- Square avatar -->
  <UAvatar 
    text="JS"
    square
    size="sm"
  />
</template>
```

**Props:**
- `src`: `string` - Image URL
- `alt`: `string` - Image alt text
- `text`: `string` - Text to display (shows initials)
- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default: `'md'`)
- `square`: `boolean` (default: `false`)

## 🎨 Theming

The library uses Tailwind CSS for styling. You can customize the theme by extending your Tailwind configuration:

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          // Your custom primary colors
          500: '#your-color',
          600: '#your-darker-color',
          // ...
        }
      }
    }
  }
}
```

## 🧪 Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Run Storybook
npm run storybook

# Run tests
npm run test

# Build library
npm run build-lib

# Lint code
npm run lint

# Type check
npm run type-check
```

## 🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

## 📄 License

MIT License - see the [LICENSE](LICENSE) file for details.

## 🔗 Links

- [Documentation](https://your-docs-site.com)
- [Storybook](https://your-storybook.com)
- [GitHub](https://github.com/your-username/u-vue-ui-components)
- [npm](https://www.npmjs.com/package/u-vue-ui-components)