Усі молекули бібліотеки
Складеніші за атоми, але ще загального призначення. Картки, форми, оверлеї, навігація, бари. Тёмна L1-підкладка під рядами щоб flat читалося правильно.
Layout
Контейнери, обгортки, розкладки.
Універсальна картка для контенту.
selected={true} — синя обводка.
Будь-яка кольорова сімʼя.
Navigation
Перемикачі, поетапні провідники, хлібні крихти.
Forms · advanced
Композитні форм-молекули — підкладка та логіка взаємодії над paper-hole атомами.
Ми не показуємо адресу публічно.
Має бути 8 цифр.
Overlays
Modal / Drawer / Popover / DropdownMenu — focus trap + portal-safe. Тут показані тригери, клік відкриває реальний оверлей.
Bars
Тонка горизонтальна смуга над списком: пошук, фільтри, кнопки створення.
States
Empty / no-data / error екрани.
Поки що ніхто не зареєстрований у системі. Додайте першого, щоб почати.
Data
Таблиця — основа для будь-якого реєстру. Has Tr.isSelected → синій градієнт перевизначає per-cell tone.
| Дата | Контрагент | Сума | Статус |
|---|---|---|---|
| 2026-04-21 | ТОВ «КСМ-ГРУП» | 12 480,00 ₴ | Сплачено |
| 2026-04-22 | ФОП Антоненко | 1 280,50 ₴ | Очікує |
| 2026-04-23 | ТОВ «5 Елемент» | 4 099,99 ₴ | Прострочено |