Три UI-фреймворки: порівняння та несподіваний фаворит

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Останнім часом я попрацював із трьома популярними UI-фреймворками, і ось мої висновки. Спойлер: один із них мене справді вразив:

* shadcn (76.8 тис. зірок на GitHub, 94,7 тис. щотижневих завантажень)
* chakraui (38.2 тис. зірок на GitHub, 607.4 тис. щотижневих завантажень)
* daisyui (34.5 тис. зірок на GitHub, 316.8 тис. щотижневих завантажень)

💡 Що сподобалося у shadcn:

* Строгий підхід до структури проєкту: ліба вирішує за тебе, де зберігати UI-компоненти, утиліти, і пропонує стандарти для роботи з Tailwind. Це робить проєкти уніфікованими.
* Крута документація: навіть є стаття, як вирішувати проблему з «—legacy-peer-deps» на останній версії Next.js.

⚠️ Що не сподобалося:

* Бідні або відсутні анімації (натискання кнопок, фокус інпутів тощо).
* Палітра кольорів задається у CSS-файлі, що ускладнює її повторне використання у JS-коді.
* Необхідність конвертувати палітру в специфічний формат 280 25% 10%; (і без ком!). Інакше все ламається.

💡 Що сподобалося у chakraui:

* Назва chakraui звучить потужно.

⚠️ Що не сподобалося:

* «CSS in JS» уповільнює рендеринг у порівнянні з нативним CSS.
* Надлишок кастомних компонентів і заплутана організація стилів ускладнюють підтримку великих проєктів.
* Складний підхід до responsive-дизайну.
* Інтеграція з Framer Motion створює конфлікти: Chakra пріоритизує свої пропси, що обмежує можливості анімацій.

💡 Чому DaisyUI досі мене вражає:

* Багаті анімації компонентів, гнучка темізація й можливість визначати палітру кольорів у JavaScript.
* Нативний та семантичний HTML, що не перевантажує проєкт.
* Лаконічний набір компонентів і простота кастомізації. Наприклад, щоб створити стилізовану кнопку, достатньо додати клас btn. Ніяких кастомних компонентів типу Button для простих задач створювати не потрібно.

Якщо ви використовували ці фреймворки, діліться своїми думками в коментарях. Цікаво дізнатися, чи погоджуєтесь із моїми висновками!