Бесплатные UI-компоненты на Tailwind CSS: интерактивная библиотека David UI

В какой-то момент в каждом vibe-проекте мы доходим до стадии, когда всё выглядит… почти идеально! Но не совсем. У вас есть структура, есть секции, но вы понимаете, что вам нужен модал, дропдаун, несколько табов для переключения контента и так далее. Результат работы вашего агента прекрасен на бумаге, но ощущается странно. Отступы не те, анимация открытия какая-то кривая, и ваш сайт выглядит недоделанным.

David UI — это бесплатная библиотека интерактивных компонентов на Tailwind CSS с открытым исходным кодом, созданная Creative Tim. Она включает более 35 компонентов для типичных UI-задач: Modals, Dropdowns, Accordions, Tooltips, Tabs, Popovers, Steppers, Forms, Gallery, Timelines и так далее. Все они написаны с использованием Tailwind CSS и поставляются с готовым JS, так что вам не придётся возиться с подключением событий.

Тут есть компоненты на любой случай: от базовых, таких как Badges, Avatars, Buttons, Breadcrumbs, до сложных, таких как многошаговые формы (Steppers), таблицы данных, вложенные дропдауны, модальные окна с управлением фокусом и так далее. Более того, у большинства компонентов уже из коробки добавлены атрибуты доступности — то, о чём я всегда забывал, когда делал такие вещи сам.

1Как добавить интерактивные Tailwind CSS компоненты с David UI

<script
  src="https://cdn.jsdelivr.net/gh/creativetimofficial/[email protected]/packages/dist/david-ai.min.js"
  defer
></script>

После добавления этой одной строчки кода в ваш HTML все компоненты david-ui начинают работать автоматически. Никаких NPM-пакетов, никаких сборочных систем, никакой настройки не требуется. Взаимодействия (открытие/закрытие, переключатели, удержание фокуса в модальных окнах) просто будут работать. Это идеально подходит для vibe-кодеров, потому что нам не нужно заморачиваться деталями реализации — мы просто выбираем то, что хотим, добавляем в проект, а дальше агент сам адаптирует содержимое под наши нужды.