vue-amazing-ui

<p align="center">
  <a href="https://themusecatcher.github.io/vue-amazing-ui/">
    <img width="200" src="https://themusecatcher.github.io/vue-amazing-ui/amazing-logo.svg">
  </a>
</p>

<h1 align="center">Vue Amazing UI</h1>
<p align="center">A Vue 3 Component Library</p>
<p align="center"><b>Theme Customizable, Light and Dark Themes, Written in TypeScript and SFC, Tree Shaking</b></p>
<p align="center">Kinda Interesting</p>
<p align="center">
  <a href="https://www.npmjs.com/package/vue-amazing-ui"><img src="https://img.shields.io/npm/v/vue-amazing-ui" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/vue-amazing-ui"><img src="https://img.shields.io/npm/dm/vue-amazing-ui" alt="npm downloads"></a>
  <a href="https://github.com/themusecatcher/vue-amazing-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vue-amazing-ui" alt="license"></a>
</p>
<p align="center">English | <a href="README.zh-CN.md">中文</a></p>

## Documentation

[Vue Amazing UI](https://themusecatcher.github.io/vue-amazing-ui/)

## Features

- Currently, it includes `73` basic UI components and `16` utility functions, with continuous exploration and updates ongoing...
- Theme Customizable, all you need is to provide a theme color, then all the stuffs will be done by me.
- Supports light and dark themes; switch them manually, or let them follow the system theme automatically.
- By the way, they are all tree-shakable.
- All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly.
- All components are single file components (`SFC`), so the source code can be used directly.
- SSR-ready.
- Ready to use out of the box, no fuss.

## Installation

```sh
pnpm add vue-amazing-ui
# or
npm install vue-amazing-ui
# or
yarn add vue-amazing-ui
# or
bun add vue-amazing-ui
```

## Use Components

**Global Registration All Components (Not Recommended)**

_No tree-shaking. Bundle will have redundant codes._

```ts
import { createApp } from 'vue'
import App from './App.vue'
import VueAmazingUI from 'vue-amazing-ui'
import 'vue-amazing-ui/css'

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

**Global Partial Registration**

_In this form, only the imported components will be bundled._

```ts
import { createApp } from 'vue'
import App from './App.vue'
import { Button, Tag } from 'vue-amazing-ui'
// One style entry per component (recommended form): global default styles + the component's own styles + its dependency components' styles
import 'vue-amazing-ui/es/button/style'
import 'vue-amazing-ui/es/tag/style'

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

**Local Registration**

_In this form, only the imported components will be bundled as well._

```vue
<script setup lang="ts">
import { Button, Tag } from 'vue-amazing-ui'
// One style entry per component (recommended form): global default styles + the component's own styles + its dependency components' styles
import 'vue-amazing