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
```ts
// main.ts
import { mazUi } from '@maz-ui/themes/presets'
import { fr } from '@maz-ui/translations'
import { MazUi } from 'maz-ui/plugins/maz-ui'
import 'maz-ui/styles'
const app = createApp(App)
app.use(MazUi, {
theme: {
preset: mazUi,
},
translations: {
messages: {
fr,
},
},
})
```
#### ๐ก 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
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 @maz-ui/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/themes) 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
## Icons
Maz UI provides a comprehensive set of beautiful icons (300+) ready-to-use for Vue applications, based on the amazing [Heroicons](https://heroicons.com/) set. All icons are optimized as Vue components with full TypeScript support.
### Documentation
Please refer to [](https://maz-ui.com/guide/icons)
### Installation
```bash
npm install @maz-ui/icons
```
### Usage
Import the icons you need from the package:
```vue
```
> **Note:** Icons are asynchronous Vue components optimized for tree-shaking. Only imported icons will be included in your final bundle.
## ๐ค Contributing
We're always looking for contributors! Check out our [contribution guide](./CONTRIBUTING.md) to get started.
## ๐ License
[MIT](./LICENSE)
