https://github.com/LouisMazel/maz-ui
Vue & Nuxt library of standalone components & tools to build interfaces
https://github.com/LouisMazel/maz-ui
component css javascript library maz-ui nuxt standalone tailwindcss typescript ui vue vue-components
Last synced: 4 months ago
JSON representation
Vue & Nuxt library of standalone components & tools to build interfaces
- Host: GitHub
- URL: https://github.com/LouisMazel/maz-ui
- Owner: LouisMazel
- License: mit
- Created: 2019-12-25T19:37:27.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-07-09T19:23:06.000Z (5 months ago)
- Last Synced: 2025-07-09T19:58:38.725Z (5 months ago)
- Topics: component, css, javascript, library, maz-ui, nuxt, standalone, tailwindcss, typescript, ui, vue, vue-components
- Language: Vue
- Homepage: https://maz-ui.com
- Size: 114 MB
- Stars: 519
- Watchers: 4
- Forks: 72
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - Maz-UI - Lightweight and efficient library for Vue 3 & Nuxt 3 & 4 with 50+ components, theming, i18n and useful plugins and composables. (Components & Libraries / Frameworks)
README
Maz UI
Lightweight and efficient library for Vue 3 & Nuxt 3
Documentation
·
Getting Started
·
Showcase
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
## 🚀 Quick Start
```bash
npm install maz-ui
```
### Vue 3
```ts
// main.ts
import 'maz-ui/styles'
```
#### 💡 Usage
Then, import and use only the components, composables, and more you need:
```vue
Click me!
import MazBtn from 'maz-ui/components/MazBtn'
```
Use provided resolvers to enjoy auto-imports and TypeScript support: [Resolvers documentation](https://maz-ui.com/guide/getting-started#recommendations)
### Nuxt 3
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
Click me!
const toast = useToast()
```
## 🎨 Theming Made Easy
Customize Maz UI to match your brand with our dedicated CLI tool:
```bash
# Install the CLI
npm install -g @mazui/cli
# Generate your theme
maz generate-css-vars
```
The CLI will automatically:
- Generate all color variations
- Create dark mode variables
- Output a ready-to-use CSS file
To know how configure the CLI, check [theming options](https://maz-ui.com/guide/theme) in our documentation.
## 🧰 What's included?
- 🧩 [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
## 🤝 Contributing
We're always looking for contributors! Check out our [contribution guide](./CONTRIBUTING.md) to get started.
## 📄 License
[MIT](./LICENSE)