Qui Max
Neumorphic design system for Web.
🔩 30+ Vue 3 components
Very functional and easly configurable, written with style guide for Vue-specific code, as well as plugins, helpers & hooks.
🔥 Composition API
A new way of creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code.
🔑 Typescript
Written on TypeScript. Furthermore types included, so you can import it in your projects from our lib.
📦 Icons pack
100+ unique icons made by our illustrator. Built in the font, being used by css classes.
🥷 Neumorphism styles
Neumorphism is a new take on skeuomorphic design. It's all about subtle contrast and solid colors.
📚 Storybook sandbox
Play with isolated components, try different states on live.
Note
This documentation is under development!
Quick setup
# install in your project
yarn add @qvant/qui-max
1
2
2
# install in your project
npm install @qvant/qui-max -S
1
2
2
In main.js:
import { createApp } from 'vue';
import Qui from '@qvant/qui-max';
import '@qvant/qui-max/styles';
const app = createApp(App);
// Setup all components
app.use(Qui);
// that's it! All components will be imported with styles
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
in YourComponent.vue
<template>
<q-input v-model="value" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref('');
return { value };
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13