English · 简体中文

Component Site · GitHub · npm

MG Design

MG Design is an independent Vue 3 design system for enterprise applications. It combines stable components, unified design tokens, accessible interaction primitives, icons, and utilities in a modular package family.

Explore components, design guidelines, and usage examples at design.meta-gravity.com.

Features

• 60+ Vue 3 components with TypeScript declarations
• Independent implementation without Element runtime dependencies
• Unified theme tokens and component styles
• Accessibility-oriented overlays, focus management, and form primitives
• Full imports, individual imports, and an unplugin resolver
• Tested package boundaries and publishable ESM/CJS builds

Installation

pnpm add vue @metagravity_cn/mg-design @metagravity_cn/theme

If your package manager uses a mirror that has not synchronized the latest release yet, install directly from the official npm registry:

pnpm add vue @metagravity_cn/mg-design @metagravity_cn/theme --registry=https://registry.npmjs.org/

Quick start

import { createApp } from 'vue'
import App from './App.vue'
import MgDesign from '@metagravity_cn/mg-design'
import '@metagravity_cn/theme'
import '@metagravity_cn/mg-design/style.css'

createApp(App).use(MgDesign).mount('#app')

Components and directives can also be imported individually:

import { MgButton, MgInput, vLoading } from '@metagravity_cn/mg-design'

Packages

Package	Purpose
@metagravity_cn/mg-design	Vue components, directives, and resolver
@metagravity_cn/theme	Design tokens and shared theme styles
@metagravity_cn/icons	Vue icon components
@metagravity_cn/primitives	Accessible interaction primitives
@metagravity_cn/utils	Shared TypeScript utilities

Development

Requirements: Node.js 18+ and pnpm 11.

pnpm install
pnpm test
pnpm build:all
pnpm check:element-boundary

The documentation site and playground are maintained locally and are not included in the published npm packages.

License

MIT © MetaGravityCN