Maz UI

Lightweight and efficient library for Vue & Nuxt

Documentation · Getting Started · Theming

Maz UI Demo Dashboard
_{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 for more information.

🚀 Quick Start

npm install maz-ui

Vue

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:

<script setup lang="ts">
import MazBtn from 'maz-ui/components/MazBtn'
</script>

<template>
  <MazBtn>Click me!</MazBtn>
</template>

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

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

// 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.

<script setup lang="ts">
const toast = useToast()
</script>

<template>
  <MazBtn @click="toast.success('Hello Maz UI!')">
    Click me!
  </MazBtn>
</template>