KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #dsh #dsh-plugin #ai-agent #codex #ai-agents #deepseek-harness #claude-code #cli #react #mcp

maz-ui

★ 564 Open GitHub ↗

Vue & Nuxt library of standalone components & tools to build interfaces

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1>Maz UI</h1>
  <p>
    <strong>
      Lightweight and efficient library for Vue & Nuxt
    </strong>
  </p>
</div>

<h3 align="center">
  <a href="https://maz-ui.com">Documentation</a>
  <span> · </span>
  <a href="https://maz-ui.com/guide/getting-started">Getting Started</a>
  <span> · </span>
  <a href="https://maz-ui.com/guide/themes">Theming</a>
</h3>

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./resources/dashboard-dark.png">
    <img src="./resources/dashboard-light.png" alt="Maz UI Demo Dashboard" width="100%" style="border-radius: 1rem;">
  </picture>
  <br>
  <sub><i>Example of a dashboard built with Maz UI components</i></sub>
</p>

## ✨ 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](https://maz-ui.com) for more information.

## 🚀 Quick Start

```bash
npm install maz-ui
```

### Vue

```ts
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:

```vue
<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](https://maz-ui.com/guide/getting-started#recommendations)

### 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](https://maz-ui.com/guide/nuxt)

```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
<script setup lang="ts">
const toast = useToast()
</script>

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

## 🧰 What's included?

### Modules

- [Components](https://maz-ui.com/components/maz-btn) - Beautiful, accessible UI components
- [Plugins](https://maz-ui.com/plugins/dialog) - Powerful plugins for common use cases
- [Composables](https://maz-ui.com/composables/use-form-validator) - Reusable composition functions
- [Directives](https://maz-ui.com/directives/fullscreen-img) - Useful Vue directives
- [Helpers](https://maz-ui.com/helpers/currency) - Useful utilities for common tasks

### Packages

- [Themes](https://maz-ui.com/guide/themes) - Easy to customize with CSS variables
- [Translations](https://maz-ui.com/guide/translations) - Internationalization
- [Icons](https://maz-ui.com/guide/icons) - Beautiful icons ready-to-use for Vue applications
- [Nuxt](https://maz-ui.com/guide/nuxt) - Nuxt module for easy integration of Maz UI
- [Utils](https://maz-ui.com/helpers/capitalize) - Useful utilities for common tasks
- [Node](https://www.npmjs.com/package/@maz-ui/node) - Useful utilities for node
- [MCP](https://maz-ui.com/guide/mcp) - AI assistant for documentation
- [EslintConfig](./packages/eslint-config/README.md) - ESLint configuration of Maz UI (built on top of [@antfu/eslint-config](https://www.npmjs.com/package/@antfu/eslint-config))

## Are you looking for a package or release manager?

Check out [Relizy](https://github.com/LouisMazel/relizy) for an auto-release manager for your packages or apps.

- [Documentation](https://relizy.dev)
- [GitHub](https://github.com/LouisMazel/relizy)

## 🤝 Contributing

We're always looking for contributors! Check out our [contribution guide](./CONTRIBUTING.md) to get started.

## 📄 License

[MIT](./LICENSE)

<div align="center">
  <sub>Built with ❤️ by <a href="https://github.com/LouisMazel">Louis Mazel</a></sub>
</div>

maz-ui

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README