01Maz-UI

Rendered with the Folio preset Fraunces · rounded-md 0.625rem

primaryoklch(0.54 0.25 264)oklch(0.7 0.19 264)
secondaryoklch(0.56 0.24 345)oklch(0.72 0.2 345)
accentoklch(0.53 0.12 210)oklch(0.8 0.13 200)

BeautifulVueandNuxtapps,in your brand

61 ready-made components, plus forms, dialogs, toasts and icons. Pick only what you need, give it your colors in minutes.

Get started GitHub

Install Maz-UI

$ pnpm add maz-ui

bash

components: 61
modules in total: 86
icons: 861
contributors: 11

02Theming, perfected

Rendered with the Pristine preset System UI · rounded-md 0.625rem

primaryoklch(0.22 0.005 286)oklch(0.97 0 0)
secondaryoklch(0.555 0.205 305)oklch(0.58 0.18 305)
accentoklch(0.562 0.179 254)oklch(0.563 0.191 256)

Maz-UI v5

Theming, perfected

Pick a preset, change a single color, and every component follows, in light and dark mode. This chapter uses the Pristine preset: same components, a different look.

Migrate to v5 Read the announcement

primary

secondary

accent

info

destructive

One color in, eleven shades out: every component gets its tints for free.

01
OKLCH color system
Each color role is one OKLCH value. Its 50 to 950 scale is derived in CSS with relative color syntax, so ramps stay even across hues and one value rebrands every component.
02
RTL-correct components
Props, slots and styles use logical edges (start-icon, end-icon). Set dir="rtl" and the components mirror.
03
A lighter chart
MazChart talks to chart.js directly, lazy-loads it on mount and only registers the modules of the chart type.
04
A simpler icon API
One icon prop takes a Vue component, a URL or a raw SVG string, with a fallback and an RTL flip.
05
A migration CLI
@maz-ui/upgrade rewrites the imports, props, CSS, config and dependencies that v5 renamed. Preview the diff with a dry run first.
Upgrade to v5
$ npx @maz-ui/upgrade ./ --dry-run
bash

03Live theming

Rendered with the Nova preset Geist · rounded-md 0.5rem

primaryoklch(0.585 0.23 290)oklch(0.72 0.2 290)
secondaryoklch(0.59 0.22 15)oklch(0.74 0.2 15)
accentoklch(0.75 0.16 200)oklch(0.82 0.15 200)

Theme it live

Same components, any identity

Every card on the right is a real Maz-UI component: type in it, toggle it, slide it. Then pick a preset, a color and a radius, and watch them follow.

AL

Ada Lovelace

Lead engineer

Online

Weekly downloads

128400 +24%

Work email

Release notes

Sprint progress

Vue 3 Nuxt TypeScript

theme.ts

await definePreset({
  base: 'nova',
  overrides: {
    colors: {
      light: { primary: 'oklch(0.585 0.23 290)' },
      dark: { primary: 'oklch(0.72 0.2 290)' },
    },
    scales: { rounded: { md: '0.5rem' } },
  },
})

ts

04Foundations

Rendered with the Obsidian preset Inter · rounded-md 0.5rem

primaryoklch(0.55 0.205 275)oklch(0.69 0.175 275)
secondaryoklch(0.59 0.235 0)oklch(0.59 0.21 0)
accentoklch(0.77 0.155 78)oklch(0.815 0.155 78)

Why it holds up in production

Six promises, each with its proof

01

Standalone

Import a single component, composable or directive: nothing else ships with it.

Read the guide

main.ts

import MazBtn from 'maz-ui/components/MazBtn'
import { useToast } from 'maz-ui/composables/useToast'
import { vTooltip } from 'maz-ui/directives/vTooltip'

ts

02
SSR and Nuxt
Components render on the server. The Nuxt module auto-imports them and applies the theme without a flash.
Read the guide about SSR and Nuxt
nuxt.config.ts
export default defineNuxtConfig({ modules: ['@maz-ui/nuxt'], mazUi: { theme: { preset: 'ocean' } }, })
ts
03
TypeScript
Written in TypeScript: props, events, slots and options are typed in your editor.
Read the guide about TypeScript
types.ts
import type { MazBtnProps } from 'maz-ui/components/MazBtn' const color: MazBtnProps['color'] = 'primary'
ts

04

Theming and tokens

Colors, radius, fonts and motion live in a theme preset. Override one token and every component follows.

Read the guide

theme.ts

import { definePreset } from '@maz-ui/themes'
import { mazUi } from '@maz-ui/themes/presets/mazUi'

export const brand = definePreset({
  base: mazUi,
  overrides: {
    colors: { light: { primary: 'oklch(0.55 0.2 150)' } },
    scales: { rounded: { md: '1rem' } },
  },
})

ts

05
Dark and light
Each preset ships both color modes. useTheme switches them and follows the system preference by default.
Read the guide about Dark and light
theme-toggle.ts
const { isDark, toggleDarkMode } = useTheme()
ts
06
Toolbox
Plugins, composables, directives and the helpers of @maz-ui/utils (formatters, debounce, cookies...).
Read the guide about Toolbox
save.ts
const toast = useToast() toast.success('Saved') formatCurrency(1234.5, 'en-US', { currency: 'EUR' })
ts

05Ecosystem

Rendered with the Ocean preset Poppins · rounded-md 1rem

primaryoklch(0.55 0.1 220)oklch(0.73 0.12 198)
secondaryoklch(0.42 0.13 252)oklch(0.56 0.16 252)
accentoklch(0.76 0.13 50)oklch(0.78 0.12 55)

The Maz-UI ecosystem

One library, a whole ecosystem around it

Maz-UI is not only components. Nuxt integration, themes, icons, translations, AI tooling and upgrade codemods: six packages built for it, all released together on v5.4.0. Upgrade them at once, they always match.

@maz-ui/nuxt
Nuxt module: auto-imports, SSR theming, translations and the setup of AI agents.
@maz-ui/themes
Theme presets, definePreset and useTheme: the OKLCH theme engine that styles this page.
@maz-ui/icons
SVG icons (interface icons, brand logos, country flags) as tree-shakable components, lazy components or raw strings. 861 icons.
@maz-ui/translations
Built-in locales, custom messages and lazy loading for the texts of the components.
@maz-ui/mcp
MCP server and CLI that give AI coding agents the knowledge of the maz-ui version you installed.
@maz-ui/mcp
$ npx @maz-ui/mcp init
bash
@maz-ui/upgrade
Codemods that run the mechanical part of a major upgrade, with a dry run first.
@maz-ui/upgrade
$ npx @maz-ui/upgrade ./ --dry-run
bash

06Community

Rendered with the Folio preset Fraunces · rounded-md 0.625rem

primaryoklch(0.54 0.25 264)oklch(0.7 0.19 264)
secondaryoklch(0.56 0.24 345)oklch(0.72 0.2 345)
accentoklch(0.53 0.12 210)oklch(0.8 0.13 200)

Our constellation

11 contributors light up Maz-UI

Every star is a person who fixed a bug, wrote a component or improved the docs. The brighter the star, the more they contributed.

contributors: 11
contributions: 3177
GitHub stars: 563
forks: 76

Join the constellation Open issues

How Maz-UI ships

Every release is launched with Relizy

Relizy is the release tool behind Maz-UI, by the same author. It reads your Conventional Commits and does the rest, for a single package or a whole monorepo.

Discover Relizy GitHub

Commit

feat(lib): add MazTimeline

Version

Minor bump computed from the commits

Changelog

Written for the users of the package

Publish

Git tag and npm, every package at once

Release

GitHub release and social posts

npx relizy init

bash

07Inventory

Rendered with the Maz-UI preset Manrope · rounded-md 0.7rem

primaryoklch(0.5645 0.1773 253.63)oklch(0.5645 0.1773 253.63)
secondaryoklch(0.555 0.288 299.35)oklch(0.555 0.288 299.35)
accentoklch(0.5445 0.1092 168.15)oklch(0.5445 0.1092 168.15)

Everything in the box

86 building blocks, ready to use

Components for the interface, composables and directives for the behavior, plugins for app-wide features like toasts and dialogs. Each line opens its section of the docs.