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
## Documentation
Check the [Documentation](https://maz-ui.com) for more information.
## ๐ Quick Start
```bash
npm install maz-ui
```
### Vue
```ts
import { mazUi } from '@maz-ui/themes/presets'
import { fr } from '@maz-ui/translations'
import { MazUi } from 'maz-ui/plugins/maz-ui'
// main.ts
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!
```
## ๐งฐ What's included?
### Modules
- [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
### Packages
- [Themes](https://maz-ui.com/guide/themes) - Easy to customize with CSS variables
- [Translations](https://maz-ui.com/guide/translations) - Internationalization
- [Icons](https://maz-ui.com/guide/icons) - Beautiful icons ready-to-use for Vue applications
- [Nuxt](https://maz-ui.com/guide/nuxt) - Nuxt module for easy integration of Maz UI
- [Utils](https://maz-ui.com/helpers/capitalize) - Useful utilities for common tasks
- [Node](https://www.npmjs.com/package/@maz-ui/node) - Useful utilities for node
- [MCP](https://maz-ui.com/guide/mcp) - AI assistant for documentation
- [EslintConfig](./packages/eslint-config/README.md) - ESLint configuration of Maz UI (built on top of [@antfu/eslint-config](https://www.npmjs.com/package/@antfu/eslint-config))
## Are you looking for a package or release manager?
Check out [Relizy](https://github.com/LouisMazel/relizy) for an auto-release manager for your packages or apps.
- [Documentation](https://relizy.dev)
- [GitHub](https://github.com/LouisMazel/relizy)
## ๐ค Contributing
We're always looking for contributors! Check out our [contribution guide](./CONTRIBUTING.md) to get started.
## ๐ License
[MIT](./LICENSE)
