Перейти до вмісту
tatetUI
Канонічна бібліотека для проєктів tatet

UI-компоненти, які копіюються, а не встановлюються

Зібрано з кількох продуктових кодових баз, де ті самі компоненти писали незалежно по кілька разів. Нижче — не скріншоти, а робочі сценарії на компонентах бібліотеки.

Тема змінюється тут і в документації одночасно — T не потрібен

Налаштування простору

live
Тема: Світла тема
Заповнення сховища72%
UI-файлів
60
публічних сторінок
59
мінімальний контраст
AA
TipTap-виняток
1

Чому саме так

Кожне правило закриває клас помилок, який уже траплявся у продуктових інтерфейсах.

Копіюй, не встановлюй

Компонент стає частиною проєкту після копіювання. 49 із 50 UI-файлів не мають runtime-залежностей.

Токени замість кольорів

bg-card замість сирих кольорів. Та сама розмітка працює у світлій і темній темах.

Доступність — контракт

ARIA, клавіатура, видимий фокус і 44px touch targets перевіряються разом із поведінкою.

Оверлеї працюють разом

Modal, Drawer, ConfirmDialog, dropdown і toast поділяють передбачувані focus та layer правила.

Робочий сценарій з даними

Фільтри, серверне сортування, pagination, drawer-форма, confirm і toast працюють як один потік.

Сторінка
Головна
Перегляди
22 910
Статус
опубліковано
Сторінка
Каталог
Перегляди
1 284
Статус
опубліковано
Сторінка
Партнерам
Перегляди
718
Статус
опубліковано
Сторінка
Про нас
Перегляди
431
Статус
чернетка
1–4 з 7

Рядок відкриває редагування. Деталі keyboard-взаємодії пояснює

Ще більше живих прикладів

Форми, async-дані, upload, command palette та складені стани можна перевірити прямо на сторінці.

Форма акаунта

Async-пошук міста

Обрано: —

File upload із прогресом

Перетягніть файли сюди

або натисніть, щоб обрати

Зображення або PDF; upload тут симулюється локально.

Файл: —

Command palette та modal

або Ctrl/Cmd + K

Остання команда: —

Навігаційні контроли

Вигляд: list, крок: 1.

Tabs і feedback

Усе синхронізовано

Поточна вкладка монтується ліниво, сусідні панелі не створюються.

Skeleton

Copy feedback

bun run typecheck

Toast tones

Почни з одного компонента

Відкрий API, скопіюй компонент разом із його локальними залежностями та адаптуй під свій проєкт.