Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More โ†’
Socket
Sign inDemoInstall
Socket

maz-ui

Package Overview
Dependencies
Maintainers
0
Versions
623
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

maz-ui

A standalone components library for Vue.Js 3 & Nuxt.Js 3

  • 3.50.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.8K
decreased by-0.76%
Maintainers
0
Weekly downloads
ย 
Created
Source
Maz UI Logo

Maz UI

Lightweight and efficient library for Vue 3 & Nuxt 3

vue 3 nuxt 3 npm types Downloads

maintainability test coverage github actions test unit

Documentation ยท Getting Started ยท Showcase

Maz UI Demo Dashboard
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

npm install maz-ui

Vue 3

// main.ts
import 'maz-ui/styles'
๐Ÿ’ก Usage

Then, import and use only the components, composables, and more you need:

<template>
  <MazBtn>Click me!</MazBtn>
</template>

<script setup lang="ts">
  import MazBtn from 'maz-ui/components/MazBtn'
</script>

Use provided resolvers to enjoy auto-imports and TypeScript support: Resolvers documentation

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

// 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.

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

<script setup lang="ts">
  const toast = useToast()
</script>

๐ŸŽจ Theming Made Easy

Customize Maz UI to match your brand with our dedicated CLI tool:

# 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 in our documentation.

๐Ÿงฐ What's included?

  • ๐Ÿงฉ Components - Beautiful, accessible UI components
  • ๐Ÿ”Œ Plugins - Powerful plugins for common use cases
  • ๐ŸŽฃ Composables - Reusable composition functions
  • ๐Ÿ“ Directives - Useful Vue directives
  • ๐Ÿ› ๏ธ Helpers - Useful utilities for common tasks

๐Ÿค Contributing

We're always looking for contributors! Check out our contribution guide to get started.

๐Ÿ“„ License

MIT

Built with โค๏ธ by Louis Mazel

Keywords

FAQs

Package last updated on 09 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc