5
Дії
Кнопки, чипи й панель масових дій
Нове Цикл 3 · десять компонентів із продуктів
Інтерфейси, які копіюються, а не встановлюються
Бібліотека компонентів для Vue і Nuxt, зібрана з продуктових кодових баз. Файл стає вашим після копіювання, а документація пояснює, від якого бага рятує кожне рішення в ньому.
- Vue 3.5 · Nuxt 4
- Tailwind v3 і v4
- Світла й темна теми
- Клавіатура й скрінрідери
- компонентів
- 74
- сторінок документації
- 73
- runtime-залежностей крім редактора на TipTap
- 0
- контраст у двох темах перевіряється при кожній збірці
- AA
Приклади використання
Реальні екрани, зібрані лише з бібліотеки
Не скріншоти: фільтруйте, редагуйте, відкривайте оверлеї, перемикайте тему. Кожен екран — звичайний Vue-файл із тих самих компонентів, що описані в документації.
Дашборд продажів
Метрики з трендом, план місяця й стрічка подій. Числа узгоджені між собою, як у справжньому звіті, а не в макеті.
Спробуйте
- Перемкніть період — оновляться цифри й спарклайни
- Натисніть «Експорт»: кнопка тримає ширину, тост має дію
Каталог
73 сторінки компонентів, згрупованих за роллю
Кожна сторінка — живий приклад, таблиця API з коду, «коли використовувати» і «коли ні», а також список файлів, які треба скопіювати разом. Крапкою позначено нове в третьому циклі.
18
Форми
Поля, вибір, дати, оцінка
8
Оверлеї
Вікна, панелі, меню, тости, галерея
13
Дані
Таблиці, дерева, метрики, стрічки
13
Структура
Навігація, вкладки, панелі, розкладка
7
Стани
Завантаження, порожнеча, прогрес
7
Дрібниці
Клавіші, лічильники, копіювання, команди
2
Контент
Типографіка й редактор
Чому саме так
Кожне правило закриває баг, який уже траплявся
Бібліотека виросла з продуктів, де ті самі компоненти писали незалежно по кілька разів. Правила нижче — не стиль, а наслідки.
Копіюй, не встановлюй
Компонент стає частиною проєкту: правка під екран — це правка файлу, а не форк пакета. Сторінка кожного компонента перелічує, що скопіювати разом із ним.
app/
components/ui/UiRating.vue← компонент
utils/uiFieldStyles.ts← dependsOn
assets/css/tokens.css← раз на проєкт
0
залежностей у runtime
Позиціонування, пастка фокуса, блокування прокрутки, дати — власні. Єдиний свідомий виняток — редактор на TipTap.
Токени замість кольорів
bg-card, а не bg-white dark:bg-…. Та сама розмітка тримає обидві теми.
- card
- subtle
- accent-solid
- success
- warning
- danger
- rating
- line-strong
Доступність — контракт
Ролі, клавіатура й видимий фокус перевіряються тестами разом із поведінкою. На телефоні — поля з 16px тексту й цілі дотику 44px.
Tab фокус ↑↓ вибір ↵ дія Esc лише верхній шар
Один стек оверлеїв
Modal, Drawer, Lightbox і Confirm ділять шари, лок прокрутки й пастку фокуса — вкладені вікна закриваються по одному.
Як це працюєДокументація не розходиться з кодом
Таблиці API генеруються з самих компонентів, а десять перевірок валять збірку, щойно сторінка й код розійшлися.
$ bun run check:docs
✓ кожен Ui*.vue має сторінку, і навпаки
✓ кожен props має опис у JSDoc
✓ події звірені з defineEmits в обидва боки
✓ лише зареєстровані токени, жодного dark:
✓ accent і danger тримають AA в обох темах
Як почати