mms-component-lib

A Vue 3 component library that provides the shared user interface for MMS applications. It gives every app the same buttons, form fields, tables and dialogs, with consistent styling, validation behaviour and accessibility, so teams can build screens witho
6,040
vue typescript vue3 ui components storybook tailwindcss component-library
Install
npm install mms-component-lib
Latest Version:2.1.0
Vue:3
License:MIT
Last Updated:Oct 20, 2026
Links: npm
Maintainer: anzalladd

MMS Component Library

A Vue 3 component library that provides the shared user interface for MMS applications. It gives every app the same buttons, form fields, tables and dialogs, with consistent styling, validation behaviour and accessibility, so teams can build screens without re-implementing common UI.

The library is built on reka-ui for accessible behaviour and Tailwind CSS v3 for styling, and follows shadcn-vue conventions. It is written in TypeScript and published to npm as mms-component-lib.

Versions

Version Status Branch
2.x Current, actively developed develop / main
1.x Maintenance (bug fixes only) 1.x

Version 2 is a rebuild of the library and is not backwards compatible with 1.x. Several v1 components (Alert, Avatar, Badge, Card, Drawer, Sidebar, Tooltip and others) have not been rebuilt yet; apps that depend on them should stay on 1.x for now. See CHANGELOG.md for the full list of breaking changes.

Components

Forms

Component Purpose
Form system (useForm, Form) Form state, schema validation (zod, valibot and similar), submission handling
TextField, TextareaField Single-line and multi-line text, with optional input masks
SelectField Choosing from a short list
ComboboxField Searching a long list or a remote API
CheckboxField, CheckboxGroupField Single yes/no choices and multiple selections
RadioGroupField Choosing one of a few visible options
DatePickerField, DateRangePickerField Single dates and date ranges
FileUploadField, ImageUploadField File and image uploads with progress, retry and validation
FieldArray Repeating groups of fields that can be added and removed
FormSection, FormGrid Grouping and laying out fields, with section progress and error summaries
Stepper, useFormWizard Multi-step forms with per-step validation
Field Connecting a custom control to the form system

Data display

Component Purpose
DataTable Tables with sorting, pagination, row selection and server-side data (TanStack)
Table primitives Building custom table layouts
Pagination Page navigation, usable on its own or inside DataTable
Tabs Switching between related views

Dialogs

Component Purpose
Modal General-purpose dialog with title, content and footer actions
AlertDialog Confirmation, success, error, warning and information popups
useDialog Opening those popups from code, including asynchronous confirm actions

Basic elements

Button, Spinner, and the low-level primitives used by the form fields: Input, Textarea, Select, Checkbox, RadioGroup and Label. The primitives are available for layouts the ready-made fields do not cover.

Getting started

Install the package:

npm install mms-component-lib

The library requires Vue 3.5 or later. Styling is set up in one of two ways:

  • Apps using Tailwind CSS v3 add the library's Tailwind preset to their Tailwind configuration and import mms-component-lib/tokens.css. The app then shares the same design tokens (colours, radius, font) as the components.
  • Apps without Tailwind import mms-component-lib/style.css. It contains only what the components need and does not reset or restyle the rest of the app.

Components can be imported individually from the package. Usage examples, props and live demos for every component are in the Storybook documentation (see Development below).

Theming

Colours, radius and typography are defined as design tokens in tokens/tokens.json and exposed as CSS variables prefixed with --mms-. Apps can override these variables to adjust the theme. The token file uses the W3C Design Tokens format and can be imported into Figma with Tokens Studio, so design and code share one palette. Dark mode is enabled by adding the dark class to the <html> element.

Development

Command Description
npm install Install dependencies and git hooks
npm run storybook Start the component documentation at http://localhost:6006
npm run check Run token, type, lint, format and unit test checks
npm run test:stories Run Storybook interaction tests in a browser
npm run build Build the library into dist/

Node.js 20.19 or later is required for development. See CONTRIBUTING.md for the branching model, the checklist for adding components, and the release process.

License

MIT

Related Packages

@mtn-ui/components

MTN UI Components

9,461
component-library tailwindcss ui vue vue3
li-daisy

基于 DaisyUI 和 Tailwind CSS 的 Vue 3 组件库

8,783 3
component-library tailwindcss ui vue vue3 daisyui
@rd-element/ui

RD Element UI - Vue 3 component library based on Element Plus (rd- prefix)

4,818
component-library tailwindcss ui vue vue3 lucide
iryx-ui

A Vue 3 component library built on Reka UI and Tailwind CSS v4.

5,551 3
component-library components tailwindcss ui vue nuxt reka-ui
@hina-ui/vue

The design system behind Hikarinagi: Vue 3 components built on Tailwind CSS v4.

4,608 10
component-library tailwindcss ui vue vue3 accessibility design-system

Version History

Version Released Vue License
2.1.0 ^3.5.0 MIT
2.0.0 ^3.5.0 MIT
1.2.4 ^3.5.22 MIT
1.2.3 ^3.5.22 MIT
1.2.2 ^3.5.22 MIT
Pre-releases (16)
Version Released Vue License
2.0.0-beta.2 ^3.5.0 MIT
2.0.0-beta.1 ^3.5.0 MIT
2.0.0-beta.0 ^3.5.0 MIT
0.12.0-beta.1 ^3.5.22 MIT
0.12.0-beta.0 ^3.5.22 MIT