/maz-ui

name: maz-ui
description: Maz-UI v4 - Modern Vue & Nuxt component library with 50+ standalone components, composables, directives, theming, i18n, and SSR support. Use when building Vue/Nuxt applications with forms, dialogs, tables, animations, or need responsive design system with dark mode.
license: MIT

Maz-UI v4 - Vue & Nuxt Component Library

Maz-UI is a comprehensive, standalone component library for Vue 3 and Nuxt 3 applications, offering 50+ production-ready components, powerful theming, internationalization, and exceptional developer experience.

**Latest Version**: 4.9.3 (as of 2026-08-03) **Package**: `maz-ui` | `@maz-ui/nuxt` | `@maz-ui/themes` | `@maz-ui/translations` | `@maz-ui/icons`

Quick Start

Vue 3 Installation

# Install core packages
pnpm add maz-ui @maz-ui/themes

# Or with npm
npm install maz-ui @maz-ui/themes

**Setup** in `main.ts`:

import { createApp } from 'vue'
import { MazUi } from 'maz-ui/plugins/maz-ui'
import { mazUi } from '@maz-ui/themes'
import { en } from '@maz-ui/translations'
import 'maz-ui/styles'
import App from './App.vue'

const app = createApp(App)

app.use(MazUi, {
  theme: { preset: mazUi },
  translations: { messages: { en } }
})

app.mount('#app')

**Use Components**:

<script setup>
import MazBtn from 'maz-ui/components/MazBtn'
import MazInput from 'maz-ui/components/MazInput'
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <MazInput v-model="inputValue" label="Name" />
  <MazBtn color="primary">Submit</MazBtn>
</template>

Nuxt 3 Installation

# Install Nuxt module
pnpm add @maz-ui/nuxt

**Setup** in `nuxt.config.ts`:

export default defineNuxtConfig({
  modules: ['@maz-ui/nuxt']
  // That's it! Auto-imports enabled 🎉
})

**Use Components** (no imports needed):

<script setup>
// Auto-imported composables
const theme = useTheme()
const toast = useToast()
const inputValue = ref('')
</script>

<template>
  <!-- Auto-imported components -->
  <MazInput v-model="inputValue" label="Name" />
  <MazBtn color="primary" @click="toast.success('Submitted!')">
    Submit
  </MazBtn>
</template>

Core Capabilities

🎨 Components (50+)

**Forms & Inputs**:

• `MazInput` - Text input with validation states
• `MazSelect` - Dropdown select
• `MazTextarea` - Multi-line text input
• `MazCheckbox` - Checkbox with label
• `MazRadio` - Radio buttons
• `MazSwitch` - Toggle switch
• `MazSlider` - Range slider
• `MazInputPhoneNumber` - International phone input with validation
• `MazInputCode` - Code/PIN input
• `MazInputPrice` - Currency input with formatting
• `MazInputTags` - Tag/chip input
• `MazDatePicker` - Date picker
• `MazChecklist` - Searchable checklist

**UI Elements**:

• `MazBtn` - Button with variants
• `MazCard` - Container card
• `MazBadge` - Label badge
• `MazAvatar` - User avatar
• `MazIcon` - Icon display
• `MazSpinner` - Loading spinner
• `MazTable` - Data table with sorting/pagination
• `MazTabs` - Tab navigation
• `MazStepper` - Step indicator
• `MazPagination` - Pagination controls

**Overlays & Modals**:

• `MazDialog` - Modal dialog
• `MazDialogConfirm` - Confirmation dialog
• `MazDrawer` - Slide-out drawer
• `MazBottomSheet` - Mobile bottom sheet
• `MazBackdrop` - Overlay backdrop
• `MazPopover` - Floating popover
• `MazDropdown` - Dropdown menu

**Feedback & Animation**:

• `MazFullscreenLoader` - Loading overlay
• `MazLoadingBar` - Progress bar
• `MazCircularProgressBar` - Circular progress
• `MazReadingProgressBar` - Reading progress indicator
• `MazAnimatedText` - Text animations
• `MazAnimatedElement` - Element animations
• `MazAnimatedCounter` - Number counter animation
• `MazCardSpotlight` - Card with spotlight effect

**Layout & Display**:

• `MazCarousel` - Image carousel
• `MazGallery` - Image gallery
• `MazAccordion` - Collapsible panels
• `MazExpandAnimation` - Expand/collapse animation
• `MazLazyImg` - Lazy-loaded image
• `MazPullToRefresh` - Pull-to-refresh gesture
• `MazChart` - Chart.js integration

🔧 Composables (14+)

**Theming**:

• `useTheme()` - Theme and dark mode management

**Translations**:

• `useTranslations()` - i18n management

**UI Interactions**:

• `useToast()` - Toast notifications
• `useDialog()` - Programmatic dialogs
• `useWait()` - Loading states

**Utilities**:

• `useBreakpoints()` - Responsive breakpoints
• `useWindowSize()` - Window dimensions
• `useTimer()` - Timer/countdown
• `useFormValidator()` - Form validation (Valibot)
• `useIdleTimeout()` - Idle detection
• `useUserVisibility()` - Page visibility
• `useSwipe()` - Swipe gestures
• `useReadingTime()` - Reading time calculation
• `useStringMatching()` - String utilities
• `useDisplayNames()` - Localized display names

📌 Directives (5)

• `v-tooltip` - Tooltips
• `v-click-outside` - Outside click detection
• `v-lazy-img` - Lazy loading
• `v-zoom-img` - Image zoom
• `v-fullscreen-img` - Fullscreen image viewer

🔌 Plugins (4)

• **AOS** - Animations on scroll
• **Dialog** - Template-free dialogs
• **Toast** - Notifications
• **Wait** - Global loading states

Key Features

✅ **Standalone Components** - Import only what you need, zero bloat ✅ **SSR/SSG Ready** - Full Nuxt 3 support with auto-imports ✅ **TypeScript-First** - Complete type safety out of the box ✅ **Dark Mode** - Built-in dark/light theme switching ✅ **Tree-Shakable** - Optimized bundle sizes ✅ **Responsive** - Mobile-first design ✅ **Accessible** - ARIA-compliant components ✅ **Themeable** - 4 built-in presets + custom themes ✅ **i18n** - Multi-language support with @maz-ui/translations ✅ **840+ Icons** - Optimized SVG icon library (@maz-ui/icons)

Template Structure

Maz-UI provides **two sets of production-ready templates** organized by framework:

Vue 3 + Vite Templates (`templates/vue/`)

• ✅ Pure Vue 3 with Vite
• ✅ Uses standard `fetch()` API
• ✅ Explicit imports for all dependencies
• ✅ No framework-specific dependencies