daisyUI: 50+ компонентов Tailwind без JS и с 35 темами

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 без конфликтов.

Как устроено

Основные возможности

Установка

Шаг 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).

Компоненты по категориям

Blueprint MCP — AI-генерация кода

Blueprint — официальный MCP-сервер от daisyUI, который даёт AI-моделям точный контекст для генерации правильного daisyUI-кода. Устраняет проблему устаревшего синтаксиса и галлюцинаций.

Что умеет:

• Сниппеты компонентов и лейаутов по запросу
• Дизайн-спецификации каждого компонента
• Конвертация Figma в daisyUI-код
• Генерация темы из скриншота
• Screenshot в daisyUI-код

Цена: подписка или lifetime — $600. Для большинства задач достаточно бесплатного ядра daisyUI.

Когда использовать

• Контентные сайты — навбар, карточки статей, футер собираются за минуты
• Прототипы — быстрая сборка интерфейса для демо
• Внутренние инструменты — дашборды, админки, формы
• Переключение тем — встроенная поддержка light/dark и кастомных тем

Сравнение с альтернативами

Для статических сайтов на 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>