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

# install in your project
npm install @qvant/qui-max -S

1
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

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