MtyUI - Material You in Vue3

A Material You UI and components library for Vue3.

Demo

https://mty-ui.mszook.art/

Documentation

Documentation

Work in progress

Component	Status	Last update
Badges	WIP
Bottom app bar	WIP
Bottom sheets	WIP
Common buttons	Done	2023.04.16
FAB	Done	2023.04.15
Extend FAB	Done	2023.04.15
Icon buttons	Done	2023.04.19
Segmented buttons	Done	2023.04.16
Cards	WIP
Carousel	WIP
Checkbox	Done	2023.04.17
Chips	WIP	2023.04.22
Date pickers	WIP
Dialogs	WIP
Divider	Done	2023.04.24
Lists	WIP
Menus	WIP
Navigation bar	WIP
Navigation drawer	WIP
Navigation rail	Done	2023.04.24
Progress indicators	WIP
Radio button	WIP
Search	WIP
Side sheets	WIP
Snackbar	WIP
Switch	WIP
Tabs	WIP
Text fields	Done	2023.04.18
Time pickers	WIP
Tooltips	WIP
Top app bar	WIP

How to use

As a node module

npm i witchelaina-mty-ui

Then in your Vue app

import mtyUi from 'witchelaina-mty-ui';

app.use(mtyUi);

By a CDN

TODO

Directly import

First, you need to clone this repo.

git clone https://github.com/WitchElaina/mty-ui.git

Then add the components directory to your project.

cp ./src/components ./your-project/src/components/MtyUIKits

Finally, import the components you need.

import { CommonButton } from './your-project/src/components/MtyUIKits';

// do this in main.js if you use in vue3
app.component('CommonButton', CommonButton);

or you can import all components.

import * as MtyUI from './your-project/src/components/MtyUIKits';

// do this in main.js if you use in vue3
app.use(MtyUI);