← Все новости·2026-07-28·4 мин чтения

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

David UI — бесплатная open-source библиотека из 35+ интерактивных компонентов на Tailwind CSS: модалки, дропдауны, вкладки, аккордеоны, тултипы. Один CDN-скрипт — и копируй HTML с creative-tim.com/david-ui. Ничего устанавливать не нужно.

uivibetailwindcomponentsweb

В каждом вайб-проекте наступает момент, когда всё выглядит почти правильно — но не совсем. Структура есть, секции на месте. Но потом нужно модальное окно, или выпадающее меню, или вкладки чтобы переключаться между контентом. И то что генерирует агент работает, формально — но выглядит как-то не так. Неправильные отступы. Странное поведение при открытии. Из-за этого весь сайт выглядит незаконченным.

David UI — бесплатная open-source библиотека интерактивных компонентов на Tailwind CSS от Creative Tim. В ней 35+ компонентов именно для такого UI: модальные окна, выпадающие меню, аккордеоны, подсказки, вкладки, поповеры, степперы, элементы форм, галереи, таймлайны. Всё построено на Tailwind CSS, и JavaScript уже встроен — не нужно самому прописывать ни одного обработчика событий.

Исходники

creativetimofficial/david-ai

★ 6 085HTML

Открыть на GitHub →

Каталог охватывает и простое — бейджи, аватары, кнопки, хлебные крошки — и то что обычно занимает много времени чтобы сделать нормально: многоэтапные формы со степпером, таблицы данных, вложенные выпадающие меню, модальные окна с правильным управлением фокусом. В большинстве компонентов атрибуты доступности уже расставлены что очень радует — я обычно об этом забывал и добавлял в самом конце, когда всё уже сделанно.

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

1Открой creative-tim.com/david-ui в браузере — регистрация не нужна
2Просмотри библиотеку компонентов и выбери нужное (модалка, дропдаун, вкладки, аккордеон и т.д.)
3Нажми на HTML-вкладку в превью компонента — скопируй весь фрагмент разметки
4Добавь CDN-скрипт в раздел head твоего HTML-файла (смотри ниже)
5Вставь HTML компонента туда, где он нужен — агент подстроит цвета, текст и размеры

Добавь в <head> HTML-файла

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

Как только этот скрипт добавлен на страницу — все компоненты david-ui начинают работать автоматически. Никакого npm, никаких инструментов сборки, ничего настраивать не нужно. Взаимодействия — открытие и закрытие, переключение состояний, блокировка фокуса внутри модальных окон — всё работает само. Для вайб-кодера это идеальный расклад: реализация уже готова, выбираешь компонент, вставляешь его — агент сам подгоняет содержимое под проект.

✓Что в итоге

35+ бесплатных готовых интерактивных UI-компонентов — модалки, дропдауны, вкладки, аккордеоны, тултипы, степперы, формы и многое другое. Полная библиотека на creative-tim.com/david-ui: копируй HTML, добавь один CDN-скрипт. Никакой установки, никакого npm, никакой конфигурации. Агент знает Tailwind — David UI даёт ему готовую интерактивную структуру для работы.

Источник: github.com

Бесплатный курс

Хватит читать про ИИ — начни строить с ним

Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.

Начать →

▌ Гайды по теме

▸Нарисуй и построй: навык /design в Claude Code ▸Claude Code в браузере: как открыть без VPN

ЕА