{"id":18658048,"url":"https://github.com/altai-ui/qui-max","last_synced_at":"2025-04-05T21:10:37.994Z","repository":{"id":37097161,"uuid":"347016295","full_name":"altai-ui/qui-max","owner":"altai-ui","description":"A Vue 3.x Neumorphic design system for Web. Written in TypeScript with Composition API 🔥","archived":false,"fork":false,"pushed_at":"2024-07-19T16:00:05.000Z","size":6161,"stargazers_count":277,"open_issues_count":20,"forks_count":31,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-29T20:06:35.168Z","etag":null,"topics":["composition-api","design-system","neumorphic-ui","neumorphism","typescript","ui","ui-components","uikit","vue","vue-components","vue3"],"latest_commit_sha":null,"homepage":"https://quimax.dev","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/altai-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-12T09:47:46.000Z","updated_at":"2025-03-11T10:01:35.000Z","dependencies_parsed_at":"2022-07-14T10:31:19.080Z","dependency_job_id":"1c97e840-e76c-4e76-aa0f-2e8e73340cca","html_url":"https://github.com/altai-ui/qui-max","commit_stats":{"total_commits":354,"total_committers":21,"mean_commits":"16.857142857142858","dds":0.6836158192090396,"last_synced_commit":"c1f71b3ac7f5bbdc35e0c1d85312e56d928770a7"},"previous_names":["qvant-lab/qui-max"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altai-ui%2Fqui-max","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altai-ui%2Fqui-max/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altai-ui%2Fqui-max/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altai-ui%2Fqui-max/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/altai-ui","download_url":"https://codeload.github.com/altai-ui/qui-max/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399885,"owners_count":20932880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","design-system","neumorphic-ui","neumorphism","typescript","ui","ui-components","uikit","vue","vue-components","vue3"],"created_at":"2024-11-07T07:31:15.759Z","updated_at":"2025-04-05T21:10:37.975Z","avatar_url":"https://github.com/altai-ui.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/.readme-assets/qui-logo.svg?raw=true\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" class=\"unchanged rich-diff-level-one\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/vue-3.x-brightgreen\"\u003e\n  \u003cimg alt=\"npm type definitions\" src=\"https://img.shields.io/npm/types/@qvant/qui-max\"\u003e\n  \u003ca href=\"https://github.com/storybooks/storybook\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/@qvant/qui-max?color=brightgreen\"\u003e\n  \u003cspan class=\"badge-npmversion\"\u003e\u003ca href=\"https://npmjs.org/package/@qvant/qui-max\" title=\"View this project on NPM\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@qvant/qui-max.svg\" alt=\"NPM version\" /\u003e\u003c/a\u003e\u003c/span\u003e\n  \u003cspan class=\"badge-npmdownloads\"\u003e\u003ca href=\"https://npmjs.org/package/@qvant/qui-max\" title=\"View this project on NPM\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@qvant/qui-max.svg\" alt=\"NPM downloads\" /\u003e\u003c/a\u003e\u003c/span\u003e\n  \u003cspan\u003e\u003ca href=\"https://app.netlify.com/sites/qui-max/deploys\"\u003e\u003cimg src=\"https://api.netlify.com/api/v1/badges/e2694a79-f584-4e05-9e5f-5a87d3d7c52b/deploy-status\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" class=\"unchanged rich-diff-level-one\"\u003e\n\n# Qui is Neumorphic design system for Web\n\nWritten in TypeScript with Composition API 🔥\n\nA component's library helping us build great products for our customers.\nThis library for Vue 3.x\n\n🏓 [Storybook (live demo)](https://qui-max.netlify.app/?path=/story/intro--page)\n\n📚 [Documentation (New!)](https://qui-docs.netlify.app/)\n\nQui for Vue 2.x is [here](https://github.com/Qvant-lab/qui)!\n\nWhat is it?\n\n- 🔩 30+ Vue 3 components\n- 🔥 Fully written with Composition API\n- 🔑 Typescript\n- 📦 icons pack\n- 🏳️‍🌈 colors \u0026 grid\n- 🥷 neumorphism styles\n- 📚 storybook sandbox\n\nSome examples below:\n\n![buttons](/.readme-assets/buttons.jpg?raw=true)\n![inputs](/.readme-assets/inputs.gif?raw=true)\n![icons](/.readme-assets/icons.gif?raw=true)\n![tables](/.readme-assets/tables.jpg?raw=true)\n![other](/.readme-assets/other.jpg?raw=true)\n\n## Install\n\n```bash\nnpm install @qvant/qui-max -S\nyarn add @qvant/qui-max\n```\n\nYou can import Qui entirely, or just import what you need. Let's start with fully import.\n\n## Quick setup\n\nIn main.js:\n\n```js\nimport { createApp } from 'vue';\nimport Qui from '@qvant/qui-max';\nimport '@qvant/qui-max/styles';\n\nconst app = createApp(App);\n// Setup all components\napp.use(Qui);\n// that's it! All components will be imported with styles\n```\n\nin YourComponent.vue: (Example)\n\n```vue\n\u003ctemplate\u003e\n  \u003cq-input v-model=\"value\" /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('');\n    return { value };\n  }\n};\n\u003c/script\u003e\n```\n\n## Configure setup:\n\n- import styles separately to avoid unused css\n- set `localization.messages` to support any language for components\n- change zIndex of appeared components (e.g Dialogs, Notifications, Dropdowns etc.)\n- control setup of components\n\nIn main.js:\n\n```js\nimport { createApp } from 'vue';\nimport {\n  createQui,\n  QButton,\n  QProgressIndicatior,\n  // import default messages for different locales\n  localeRu\n} from '@qvant/qui-max';\n\n// import required styles\nimport '@qvant/qui-max/css/main';\nimport '@qvant/qui-max/fonts';\nimport '@qvant/qui-max/icons';\n\n// import the only styles of component you gonna use\nimport '@qvant/qui-max/css/q-button';\nimport '@qvant/qui-max/css/q-progress-indicatior';\n\nconst Qui = createQui({\n  localization: {\n    // English language by default, but we have two more locales out-of-the-box: 'ru' | 'zh'\n    // set 'ru' - for Russian, set 'zh' - for Chinese\n    locale: 'ru',\n    messages: {\n      ru: {\n        // import and merge default messages for different locale\n        ...localeRu,\n        // rewrite default texts, see the source: src/qComponents/constants/locales or set your custom messages\n        QDatepicker: {\n          placeholder: 'Выберите дату рождения'\n        }\n      }\n    },\n    // zIndexCounter is being used by some components (e.g QPopover, QSelect, QDialog ...etc)\n    // 2000 by default\n    zIndexCounter: 3000\n  }\n});\n\napp.use(Qui);\napp.use(QButton);\napp.use(QProgressIndicatior, {\n  trickle: true,\n  trickleSpeed: 200,\n  stackable: true\n});\n```\n\nNow you have implemented Vue and Qui Max to your project, and it's time to write your code.\nPlease refer to each component's [Stories](https://qvant-lab.github.io/qui-max/) to learn how to use them.\n\n## Supported languages\n\n- Russian ✅\n- English ✅\n- Also you can use any language by setting texts for components via `localization.messages` property in the Qui instance. See the example above.\n\n## Using with Nuxt 3\n\nCreate a file in your plugins folder:\n\n```ts\n// plugins/qui.ts\nimport { defineNuxtPlugin } from '#imports';\nimport Qui from '@qvant/qui-max';\n\nexport default defineNuxtPlugin(nuxtApp =\u003e {\n  nuxtApp.vueApp.use(Qui);\n});\n```\n\nAdd configuration to your `nuxt.config.ts` file:\n\n```ts\nimport { defineNuxtConfig } from 'nuxt3';\n\nexport default defineNuxtConfig({\n  css: ['@qvant/qui-max/styles'],\n  build: {\n    transpile: ['@qvant/qui-max']\n  }\n});\n```\n\n## Browser Support\n\nModern browsers are recomended:\n\n- safari: \u003e11\n- chrome: \u003e=61\n- firefox: \u003e=58\n- opera: \u003e=62\n- edge: \u003e=16\n- yandex: \u003e=18\n\n## Development\n\nClone repository and run storybook\n\n```bash\nyarn storybook\nnpm run storybook\n```\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltai-ui%2Fqui-max","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faltai-ui%2Fqui-max","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltai-ui%2Fqui-max/lists"}