Пишите продукт, а не UI. @qor/ui уже всё решил.
40+ типизированных компонентов, единые дизайн-токены, тёмная тема из коробки. Подключите один Nuxt-модуль — и сосредоточьтесь на бизнес-логике, а не на пикселях.
40+
Компонентов в библиотеке
3
Приложения используют
100%
TypeScript покрытие
0
Конфигурации для старта
Разработка без компромиссов
@qor/ui берёт на себя весь дизайн — вы сосредоточены на продукте
- Единый дизайн-токенЦвета, типографика, отступы, радиусы — одно место для всех приложений экосистемы. Измените токен один раз, обновление распространится мгновенно.
- Nuxt UI Pro интеграцияПолная совместимость с Nuxt UI Pro. UPageHero, UCard, UButton — работают вместе с @qor/ui компонентами без конфликтов и лишних настроек.
- Тёмная тема из коробкиАвтоматическое переключение светлой и тёмной темы. Все компоненты адаптированы — без единой строки кода с вашей стороны.
- Storybook документацияКаждый компонент задокументирован с живыми примерами, controls для props и accessibility-аудитом. Открыл Storybook — всё понятно.
- TypeScript firstПолные типы для всех компонентов и composables. Автодополнение props, строгая типизация событий и слотов — IDE подскажет всё сама.
- Готовые ServiceCard / OrderCardСоставные компоненты для каталога услуг, карточек заказов и профилей исполнителей. ServiceCard, OrderCard, SpecialistCard — подключайте и используйте.
Компоненты в действии
Интерактивный Playground
Кнопки
Карточки
Формы
Таблицы
Графики
Карты
Playground — In Development
Быстрый старт
Две минуты — и дизайн-система работает в вашем проекте
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/ui-pro',
'@qor/ui' // <-- одна строка, и всё работает
]
})
pages/services.vue
<template>
<QorServiceCard
:service="serviceData"
:provider="providerData"
:show-rating="true"
@order="handleOrder"
/>
<!-- Типы подхватятся автоматически -->
<!-- handleOrder получит QorServiceOrder -->
</template>
Дизайн-подход QOR
Философия, которая стоит за каждым компонентом
Консистентность через токены
Все приложения экосистемы разделяют одну систему дизайн-токенов. Цвет кнопки в QOR Business идентичен цвету в QOR Consultant — без ручной синхронизации.
Адаптивность по умолчанию
Каждый компонент отзывчивый из коробки. Mobile-first подход: от экрана телефона до диспетчерского монитора — без media-query хаков.
Accessibility встроен
ARIA-атрибуты, клавиатурная навигация, контрастные цвета — accessibility не добавляется в конце, он заложен в архитектуру каждого компонента.
Начните с дизайн-системы QOR
Один модуль — единый стиль для всех приложений экосистемы. Подключите @qor/ui и забудьте о дизайн-рутине навсегда.