Example of a dashboard built with Maz UI components
## โจ Features
- ๐ฏ **Cherry-pick components** - Use only what you need
- ๐ **Dark mode** - Built-in dark mode support
- ๐จ **Themeable** - Easy to customize with CSS variables
- ๐ฑ **Responsive** - Mobile-first design approach
- ๐ง **TypeScript** - Full type support included
- โก๏ธ **Lightweight** - Tree-shakeable, no bloat
- ๐ **SSR** - Server-side rendering ready
## ๐ Quick Start
```bash
npm install maz-ui
```
### Vue 3
```ts
// main.ts
import 'maz-ui/styles'
```
#### ๐ก Usage
Then, import and use only the components, composables, and more you need:
```vue
Click me!
```
Use provided resolvers to enjoy auto-imports and TypeScript support: [Resolvers documentation](https://maz-ui.com/guide/getting-started#recommendations)
### Nuxt 3
The Nuxt module automatically:
- Imports all components, plugins, composables and directives on-demand (auto-imports)
- Includes required styles
- Provides TypeScript support out of the box
[See options and more in the documentation](https://maz-ui.com/guide/nuxt)
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['maz-ui/nuxt'],
})
```
#### ๐ก Usage
No need to import components, plugins, composables or directives, they are all auto-imported.
```vue
Click me!
```
## ๐จ Theming Made Easy
Customize Maz UI to match your brand with our dedicated CLI tool:
```bash
# Install the CLI
npm install -g @mazui/cli
# Generate your theme
maz generate-css-vars
```
The CLI will automatically:
- Generate all color variations
- Create dark mode variables
- Output a ready-to-use CSS file
To know how configure the CLI, check [theming options](https://maz-ui.com/guide/theme) in our documentation.
## ๐งฐ What's included?
- ๐งฉ [Components](https://maz-ui.com/components/maz-btn) - Beautiful, accessible UI components
- ๐ [Plugins](https://maz-ui.com/plugins/dialog) - Powerful plugins for common use cases
- ๐ฃ [Composables](https://maz-ui.com/composables/use-form-validator) - Reusable composition functions
- ๐ [Directives](https://maz-ui.com/directives/fullscreen-img) - Useful Vue directives
- ๐ ๏ธ [Helpers](https://maz-ui.com/helpers/currency) - Useful utilities for common tasks
## ๐ค Contributing
We're always looking for contributors! Check out our [contribution guide](./CONTRIBUTING.md) to get started.
## ๐ License
[MIT](./LICENSE)
