daisyUI — библиотека готовых UI-компонентов, которая работает как плагин для Tailwind CSS. Вместо длинных цепочек утилит вроде flex items-center justify-center rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 — один семантический класс: btn btn-primary. Код короче в 5 раз, результат тот же.
Плагин добавляет 50+ компонентов: кнопки, карточки, модальные окна, навбары, таблицы, аккордеоны, тосты, календари. Все они построены на чистом CSS, без JavaScript-зависимостей. Это значит, что daisyUI работает с любым фреймворком — Astro, React, Vue, Svelte, plain HTML.
35 встроенных тем переключаются одним атрибутом data-theme. Можно использовать готовые темы вроде light, dark, nord, cyberpunk, dracula — или создать свою через CSS-переменные в формате oklch. Темы вкладываются: одна тема на весь сайт, другая на отдельную секцию.
Версия daisyUI 5.x совместима с Tailwind CSS 4. Лицензия MIT, исходный код на GitHub. Плагин не мешает использовать обычные утилиты Tailwind — можно комбинировать btn btn-primary с mt-4 shadow-lg без конфликтов.
Что это
daisyUI — это CSS-плагин для Tailwind CSS. Устанавливается через npm и подключается одной строкой @plugin “daisyui” в CSS-файле. После этого классы вроде btn, card, modal, alert становятся доступны в HTML.
Ключевая идея: семантические классы вместо утилитарных. Tailwind даёт низкоуровневые инструменты (padding, color, radius), daisyUI — готовые компоненты с разумными дефолтами. Кнопка — это btn, а не десять утилит. Карточка — card, а не стек из восьми классов.
Плагин не заменяет Tailwind, а расширяет. Утилиты Tailwind остаются доступны, daisyUI-классы работают поверх. Если нужно переопределить отступ или цвет — добавляете утилиту рядом.
Зачем нужно
Обычная кнопка на чистом Tailwind выглядит так:
<button class="flex items-center justify-center rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">Кнопка</button>Та же кнопка с daisyUI:
<button class="btn btn-primary">Кнопка</button>Результат идентичный, но код в 5 раз короче. При этом daisyUI не мешает использовать обычные утилиты Tailwind — можно комбинировать btn btn-primary с mt-4 shadow-lg без конфликтов.
Как устроено
Основные возможности
| Возможность | Что даёт |
|---|---|
| 50+ компонентов | Button, Card, Modal, Drawer, Navbar, Table, Accordion, Toast, Calendar и др. |
| 35 встроенных тем | light, dark, cupcake, cyberpunk, retro, nord, dracula — переключаются одним атрибутом |
| Семантические цвета | primary, secondary, accent, success, warning, error — адаптируются под тему |
| Кастомные темы | Создаёте свою тему через CSS-переменные — цвета, радиусы, размеры |
| Без JS-зависимостей | Чистый CSS — работает с Astro, React, Vue, Svelte, plain HTML |
Установка
Шаг 1. Установите пакет:
npm i -D daisyui@latestШаг 2. Подключите в app.css:
@import "tailwindcss";
@plugin "daisyui";Готово. Все классы daisyUI доступны в HTML.
Система тем
Тема в daisyUI — это набор CSS-переменных, который определяет цвета интерфейса: фон, текст, primary, secondary, accent, а также радиусы и размеры. Тема применяется через атрибут data-theme на любом элементе.
Включение тем
По умолчанию активны light и dark. Чтобы добавить другие темы, укажите их в конфигурации плагина:
@plugin "daisyui" {
themes: light --default, dark --prefersdark, nord, cyberpunk;
}Флаг —default делает тему_default по умолчанию. Флаг —prefersdark — темой для тёмного режима (prefers-color-scheme: dark). Можно включить все 35 тем сразу: themes: all. Можно отключить все темы: themes: false.
Переключение тем
Тема задаётся атрибутом data-theme на любом элементе:
<html data-theme="nord">Темы вложимы — можно применить к отдельной секции:
<html data-theme="light">
<div data-theme="dark">
<!-- Этот блок всегда в тёмной теме -->
</div>
</html>Кастомная тема
Своя тема создаётся через @plugin “daisyui/theme” с CSS-переменными в формате oklch:
@plugin "daisyui/theme" {
name: "mytheme";
default: true;
color-scheme: light;
--color-base-100: oklch(98% 0.02 240);
--color-primary: oklch(55% 0.3 240);
--color-secondary: oklch(70% 0.25 200);
--radius-selector: 1rem;
--radius-field: 0.25rem;
--border: 1px;
}Доступные переменные: цвета (base-100, base-200, base-300, base-content, primary, primary-content, secondary, secondary-content, accent, accent-content, neutral, neutral-content, info, info-content, success, success-content, warning, warning-content, error, error-content), радиусы (radius-selector, radius-field, radius-box), размеры (size-selector, size-field), толщина бордера (border), эффекты (depth, noise).
Компоненты по категориям
| Категория | Компоненты |
|---|---|
| Actions | Button, Dropdown, FAB, Modal, Swap, Theme Controller |
| Data display | Accordion, Avatar, Badge, Card, Carousel, Chat bubble, Countdown, Table, Timeline |
| Navigation | Breadcrumbs, Dock, Link, Menu, Navbar, Pagination, Steps, Tab |
| Feedback | Alert, Loading, Progress, Skeleton, Toast, Tooltip |
| Data input | Calendar, Checkbox, File Input, Radio, Range, Rating, Select, Input, Toggle |
| Layout | Divider, Drawer, Footer, Hero, Indicator, Join, Mask, Stack |
Blueprint MCP — AI-генерация кода
Blueprint — официальный MCP-сервер от daisyUI, который даёт AI-моделям точный контекст для генерации правильного daisyUI-кода. Устраняет проблему устаревшего синтаксиса и галлюцинаций.
Что умеет:
- Сниппеты компонентов и лейаутов по запросу
- Дизайн-спецификации каждого компонента
- Конвертация Figma в daisyUI-код
- Генерация темы из скриншота
- Screenshot в daisyUI-код
Цена: подписка или lifetime — $600. Для большинства задач достаточно бесплатного ядра daisyUI.
Когда использовать
- Контентные сайты — навбар, карточки статей, футер собираются за минуты
- Прототипы — быстрая сборка интерфейса для демо
- Внутренние инструменты — дашборды, админки, формы
- Переключение тем — встроенная поддержка light/dark и кастомных тем
Сравнение с альтернативами
| Критерий | daisyUI | Tailwind UI | shadcn/ui |
|---|---|---|---|
| Тип | CSS-плагин для Tailwind | Коллекция шаблонов | Копируемые React-компоненты |
| Цена | Бесплатно (MIT) | $299+ | Бесплатно |
| JS-зависимости | Нет | Минимальные | React, Radix UI |
| Фреймворк | Любой | Любой | Только React |
| Темизация | 35 тем + кастомные | Нет встроенной | CSS-переменные |
| Компоненты | 50+ | 500+ вариаций | 40+ |
Для статических сайтов на Astro daisyUI — оптимальный выбор: нет JS-зависимостей, работает с любым фреймворком, быстрая интеграция с Tailwind, встроенная поддержка тем.
Пример
Кнопки
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-sm">Small</button>
<button class="btn btn-outline btn-error">Outline Error</button>Карточка
<div class="card w-96 bg-base-100 card-border">
<div class="card-body">
<h2 class="card-title">Заголовок</h2>
<p>Текст карточки</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Действие</button>
</div>
</div>
</div>Alert
<div class="alert alert-warning">
<span>Внимание! Проверьте настройки.</span>
</div>Ограничения
Ограничения
Только Tailwind CSS
— daisyUI работает как плагин Tailwind CSS 4 — без Tailwind подключить нельзя
Дизайн по умолчанию
— 35 тем дают быстрый старт, но для уникального дизайна придётся кастомизировать через CSS-переменные
Blueprint MCP
— платный — AI-генерация кода через Blueprint стоит $600 за lifetime-лицензию, бесплатное ядро daisyUI не включает MCP
Нет JS-интерактивности
— компоненты — чистый CSS, для интерактивных модалей и dropdown нужен собственный JavaScript или фреймворк
Антипаттерны
Антипаттерны
Не использовать без Tailwind
— daisyUI — плагин, а не отдельная библиотека; без Tailwind CSS классы не работают
Не смешивать классы двух библиотек
— если используете daisyUI, не добавляйте Material UI или Bootstrap — конфликтуют стили и семантика
Не переопределять через !important
— для кастомизации используйте CSS-переменные темы, а не !important в утилитах
Не использовать все 35 тем сразу
— каждая тема увеличивает размер CSS-бандла; включайте только нужные через themes в @plugin
Чеклист
Чеклист
Tailwind CSS установлен
— проверьте, что @import “tailwindcss” уже в CSS-файле
daisyUI подключена
— npm i -D daisyui@latest и @plugin “daisyui” в CSS
Темы выбраны
— указать нужные темы в @plugin config, не оставлять дефолтные light+dark если нужны другие
data-theme установлен
— атрибут data-theme на html или контейнере задаёт активную тему
Классы проверены — btn, card, alert, modal и др.
доступны в HTML после подключения плагина
Ссылки
Ссылки
- Сайт: daisyui.com
- Документация: daisyui.com/docs
- Компоненты: daisyui.com/components
- Генератор тем: daisyui.com/theme-generator
- GitHub: github.com/saadeghi/daisyui
- Playground: daisyui.com/tailwindplay