Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/altai-ui/qui-max

A Vue 3.x Neumorphic design system for Web. Written in TypeScript with Composition API 🔥
https://github.com/altai-ui/qui-max

composition-api design-system neumorphic-ui neumorphism typescript ui ui-components uikit vue vue-components vue3

Last synced: about 1 month ago
JSON representation

A Vue 3.x Neumorphic design system for Web. Written in TypeScript with Composition API 🔥

Host: GitHub
URL: https://github.com/altai-ui/qui-max
Owner: altai-ui
License: mit
Created: 2021-03-12T09:47:46.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2023-11-30T20:18:47.000Z (6 months ago)
Last Synced: 2024-01-20T05:27:16.453Z (4 months ago)
Topics: composition-api, design-system, neumorphic-ui, neumorphism, typescript, ui, ui-components, uikit, vue, vue-components, vue3
Language: Vue
Homepage: https://quimax.dev
Size: 5.87 MB
Stars: 263
Watchers: 10
Forks: 31
Open Issues: 19
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Lists

awesome-storybook - Qui - Vue 2/3 Design system
awesome-vue - Qui-max - A Vue 3.x Design System for Web (Components & Libraries / Frameworks)

README

        


  





  

  

  

  

  

  

  





# Qui is Neumorphic design system for Web

Written in TypeScript with Composition API 🔥

A component's library helping us build great products for our customers.

This library for Vue 3.x

🏓 [Storybook (live demo)](https://qui-max.netlify.app/?path=/story/intro--page)

📚 [Documentation (New!)](https://qui-docs.netlify.app/)

Qui for Vue 2.x is [here](https://github.com/Qvant-lab/qui)!

What is it?

- 🔩 30+ Vue 3 components

- 🔥 Fully written with Composition API

- 🔑 Typescript

- 📦 icons pack

- 🏳️‍🌈 colors & grid

- 🥷 neumorphism styles

- 📚 storybook sandbox

Some examples below:

![buttons](/.readme-assets/buttons.jpg?raw=true)

![inputs](/.readme-assets/inputs.gif?raw=true)

![icons](/.readme-assets/icons.gif?raw=true)

![tables](/.readme-assets/tables.jpg?raw=true)

![other](/.readme-assets/other.jpg?raw=true)

## Install

```bash

npm install @qvant/qui-max -S

yarn add @qvant/qui-max

```

You can import Qui entirely, or just import what you need. Let's start with fully import.

## Quick setup

In main.js:

```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

```

in YourComponent.vue: (Example)

```vue

  

import { ref } from 'vue';

export default {

  setup() {

    const value = ref('');

    return { value };

  }

};

```

## Configure setup:

- import styles separately to avoid unused css

- set `localization.messages` to support any language for components

- change zIndex of appeared components (e.g Dialogs, Notifications, Dropdowns etc.)

- control setup of components

In main.js:

```js

import { createApp } from 'vue';

import {

  createQui,

  QButton,

  QProgressIndicatior,

  // import default messages for different locales

  localeRu

} from '@qvant/qui-max';

// import required styles

import '@qvant/qui-max/css/main';

import '@qvant/qui-max/fonts';

import '@qvant/qui-max/icons';

// import the only styles of component you gonna use

import '@qvant/qui-max/css/q-button';

import '@qvant/qui-max/css/q-progress-indicatior';

const Qui = createQui({

  localization: {

    // English language by default, but we have two more locales out-of-the-box: 'ru' | 'zh'

    // set 'ru' - for Russian, set 'zh' - for Chinese

    locale: 'ru',

    messages: {

      ru: {

        // import and merge default messages for different locale

        ...localeRu,

        // rewrite default texts, see the source: src/qComponents/constants/locales or set your custom messages

        QDatepicker: {

          placeholder: 'Выберите дату рождения'

        }

      }

    },

    // zIndexCounter is being used by some components (e.g QPopover, QSelect, QDialog ...etc)

    // 2000 by default

    zIndexCounter: 3000

  }

});

app.use(Qui);

app.use(QButton);

app.use(QProgressIndicatior, {

  trickle: true,

  trickleSpeed: 200,

  stackable: true

});

```

Now you have implemented Vue and Qui Max to your project, and it's time to write your code.

Please refer to each component's [Stories](https://qvant-lab.github.io/qui-max/) to learn how to use them.

## Supported languages

- Russian ✅

- English ✅

- Also you can use any language by setting texts for components via `localization.messages` property in the Qui instance. See the example above.

## Using with Nuxt 3

Create a file in your plugins folder:

```ts

// plugins/qui.ts

import { defineNuxtPlugin } from '#imports';

import Qui from '@qvant/qui-max';

export default defineNuxtPlugin(nuxtApp => {

  nuxtApp.vueApp.use(Qui);

});

```

Add configuration to your `nuxt.config.ts` file:

```ts

import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({

  css: ['@qvant/qui-max/styles'],

  build: {

    transpile: ['@qvant/qui-max']

  }

});

```

## Browser Support

Modern browsers are recomended:

- safari: >11

- chrome: >=61

- firefox: >=58

- opera: >=62

- edge: >=16

- yandex: >=18

## Development

Clone repository and run storybook

```bash

yarn storybook

npm run storybook

```

## LICENSE

MIT