Maz UI

Lightweight and efficient library for Vue & Nuxt

_{Example of a dashboard built with Maz UI components}

• 🎯 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

Check the Documentation for more information.

npm install maz-ui

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, }, }, })

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

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'], })

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>

• 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

• Themes - Easy to customize with CSS variables
• Translations - Internationalization
• Icons - Beautiful icons ready-to-use for Vue applications
• Nuxt - Nuxt module for easy integration of Maz UI
• Utils - Useful utilities for common tasks
• Node - Useful utilities for node
• MCP - AI assistant for documentation
• EslintConfig - ESLint configuration of Maz UI (built on top of @antfu/eslint-config)

Check out Relizy for an auto-release manager for your packages or apps.

• Documentation
• GitHub

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

MIT