Maz UI

Lightweight and efficient library for Vue & Nuxt

Documentation
·
Getting Started
·
Showcase

_{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
`

$3

`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



`

Use provided resolvers to enjoy auto-imports and TypeScript support: Resolvers documentation

$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

`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



`

🎨 Theming Made Easy

Customize Maz UI to match your brand with our dedicated CLI tool:

`bash


Install the CLI

`bash
npm install @maz-ui/icons
`

$3

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 to get started.

📄 License

MIT