Morya UI

A Vue 3 component library with design tokens, light/dark themes, and interactive docs.

English | 中文

Documentation · Components · Issues · Changelog

Introduction

Morya UI (morya-ui) is an open-source Vue 3 component library for building modern web applications. It ships 90+ components, a token-based theme system, built-in i18n, and a documentation site with live previews.

Whether you are starting a new admin dashboard, SaaS product, or internal tool, you get consistent forms, overlays, data display, and feedback primitives out of the box.

Features

Complete

90+ components covering basics, forms, navigation, data display, layout, and feedback — all tree-shakeable via ESM subpath imports.

Theme-ready

Light and dark modes powered by --m-* CSS variables. Switch themes with useTheme, tune density and motion with useDensity / useMotion, and override per subtree via MConfigProvider.

TypeScript-first

Written in Vue 3 Composition API + TypeScript. Props, emits, and locale messages are fully typed.

Flexible consumption

Use full registration, named imports, on-demand subpaths, or MoryaUIResolver with unplugin-vue-components — pick one style per app.

Docs as preview

Every component includes Markdown docs with interactive vue preview blocks. Browse them online or run the docs site locally.

SSR & meta-frameworks

Works with Nuxt 3, Astro + Vue, Vite SSR, and similar setups. Includes the @morya-ui/nuxt module — see the SSR guide.

Documentation

https://morya-space.github.io/morya-ui/

Install

Requires Vue 3 (3.5+ recommended) and a bundler that resolves package exports (Vite, webpack 5+, etc.).

pnpm add morya-ui
# npm i morya-ui
# yarn add morya-ui

Or scaffold a new project with everything configured:

npx @morya-ui/setup --create my-app

Quick start

Register all components and import the full stylesheet:

import MoryaUI from 'morya-ui'
import { createApp } from 'vue'
import App from './App.vue'
import 'morya-ui/styles.css'

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

On-demand import (styles included automatically):

import { MButton } from 'morya-ui/button'
import { MInput } from 'morya-ui/input'

For global defaults (locale, size, overlay mount point):

import { createMoryaUI, enUS } from 'morya-ui'

createApp(App).use(createMoryaUI({ locale: enUS })).mount('#app')

See the Quick start guide for full import modes, Vite resolver setup, and theme APIs.

Ecosystem

Contributing

We welcome issues and pull requests. Please read CONTRIBUTING.md before submitting changes.

For maintainers: Development guide · Release scripts

Local development

pnpm install
pnpm dev              # docs site → http://localhost:5182
pnpm build            # library → dist/
pnpm build:docs:pages # GitHub Pages build
pnpm test
pnpm typecheck

License

MIT © Morya UI contributors