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: 21 days 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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-21T10:13:41.000Z (about 1 year ago)
- Last Synced: 2025-05-15T23:08:11.493Z (11 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: 113 MB
- Stars: 508
- Watchers: 4
- Forks: 70
- Open Issues: 28
-
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
README
Maz UI
Lightweight and efficient library for Vue & Nuxt
Documentation
·
Getting Started
·
Theming
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
## 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
import MazBtn from 'maz-ui/components/MazBtn'
Click me!
```
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
const toast = useToast()
Click me!
```
## 🧰 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://louismazel.github.io/relizy/)
- [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)