Maz UI

Lightweight and efficient library for Vue 3 & Nuxt 3

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 'maz-ui/styles'
`

#### 💡 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

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 in our documentation.

🧰 What's included?

- 🧩 Components - Beautiful, accessible UI components
- 🔌 Plugins - Powerful plugins for common use cases
- 🎣 Composables - Reusable composition functions
- 📏 Directives - Useful Vue directives
- 🛠️ Helpers - Useful utilities for common tasks

🤝 Contributing

We're always looking for contributors! Check out our contribution guide to get started.

📄 License

MIT