daisyUI: красивые компоненты из коробки

daisyUI — библиотека готовых UI-компонентов и плагин для Tailwind CSS. Она добавляет семантические классы вроде btn, card и modal, которые можно сочетать с обычными утилитами Tailwind.

Оглавление

1. Что даёт daisyUI
2. Установка с Tailwind CSS 4
3. Как проверить установку
4. Темы и семантические цвета
5. Компоненты и примеры
6. Полезные сценарии
7. Ограничения
8. Blueprint MCP
9. Полезные ссылки

Что даёт 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>

Классы компонентов не запрещают использовать утилиты Tailwind. Например, к кнопке можно добавить отступ и тень:

<button class="btn btn-primary mt-4 shadow-lg">Кнопка</button>

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

Установка с Tailwind CSS 4

Предварительно должны быть установлены Node.js и Tailwind CSS.

Шаг 1. Установите пакет:

npm i -D daisyui@latest

Шаг 2. Подключите Tailwind CSS и daisyUI в app.css:

@import "tailwindcss";
@plugin "daisyui";

Конфигурация daisyUI 5 размещается в CSS-файле. Для базового подключения отдельная запись плагина в tailwind.config.js не нужна.

Как проверить установку

Добавьте на страницу минимальный элемент:

<button class="btn btn-primary">Проверка daisyUI</button>

Запустите обычную для проекта сборку или сервер разработки и откройте страницу в браузере. Установка прошла успешно, если кнопка получила оформление daisyUI, включая фон, рамку, размеры и состояние при наведении.

Если элемент остался без оформления, проверьте:

• импортируется ли файл app.css в приложение;
• расположен ли @import "tailwindcss"; перед @plugin "daisyui";;
• установился ли пакет daisyui в текущем проекте;
• попадает ли файл с HTML-разметкой в сборку Tailwind CSS.

Темы и семантические цвета

Подключение встроенных тем

По умолчанию включены light и dark. Дополнительные темы перечисляются в настройке плагина:

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, nord, cyberpunk;
}

Флаг --default задаёт основную тему, а --prefersdark связывает тему с системным предпочтением тёмного оформления.

Чтобы включить все 35 встроенных тем:

@plugin "daisyui" {
  themes: all;
}

Переключение темы

Тема задаётся атрибутом data-theme:

<html data-theme="nord">

Темы можно вкладывать без ограничения по глубине:

<html data-theme="light">
  <section data-theme="dark">
    <!-- Эта секция использует тёмную тему -->
  </section>
</html>

Сам по себе атрибут выбирает тему, но не создаёт интерфейс переключателя и не сохраняет выбор. Для интерактивного переключателя можно использовать компонент Theme Controller с классом theme-controller; сохранение выбора потребует собственной логики или отдельного решения.

Пользовательская тема

Новая тема создаётся через плагин daisyui/theme:

@import "tailwindcss";

@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* основная тема */
  prefersdark: false; /* не использовать как тему для системного тёмного режима */
  color-scheme: light; /* цвет встроенных элементов браузера */

  /* базовые цвета */
  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  /* радиусы */
  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;

  /* базовые размеры */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /* размер границы */
  --border: 1px;

  /* эффекты */
  --depth: 1;
  --noise: 0;
}

В daisyUI 5 допустимы разные форматы цвета. Встроенные темы используют OKLCH, а официальная документация рекомендует этот формат и для пользовательских тем.

Компоненты и примеры

Официальный каталог на дату проверки содержит 68 компонентов. Они сгруппированы по назначению:

Перечень меняется между выпусками, поэтому для полного набора и актуального синтаксиса используйте официальный каталог компонентов.

Кнопки

<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>

Уведомление

<div class="alert alert-warning">
  <span>Внимание! Проверьте настройки.</span>
</div>

Полезные сценарии

Быстрый прототип интерфейса

Задача: собрать демонстрационную страницу без ручной разработки каждого элемента.

Подключите daisyUI, выберите тему и составьте страницу из готовых классов navbar, card, btn, modal и footer. Результат можно проверить в браузере: компоненты должны иметь единое оформление и реагировать на выбранную тему.

Ограничение: daisyUI предоставляет внешний вид и CSS-паттерны. Бизнес-логику, управление состоянием и сложное поведение нужно реализовать средствами проекта.

Статический сайт на Astro

Задача: оформить навигацию, карточки материалов, формы и футер без обязательного клиентского фреймворка.

Добавьте плагин в CSS, используйте классы компонентов в шаблонах Astro и дополняйте их утилитами Tailwind. Наблюдаемый результат — готовая страница со стилизованными компонентами без необходимости подключать React только ради интерфейса.

Ограничение: отдельным компонентам может потребоваться нативная HTML-механика или прикладной JavaScript. Например, переключатель темы должен где-то сохранять и применять выбор пользователя.

Единая тема для внутреннего инструмента

Задача: быстро привести формы, таблицы и статусы административной панели к общей визуальной системе.

Настройте семантические цвета темы, затем используйте btn-primary, alert-error, badge-success и другие смысловые модификаторы. После смены значений темы связанные компоненты должны обновить оформление без замены классов в разметке.

Ограничение: готовая тема не отменяет проверку контраста, клавиатурной навигации и поведения компонентов в конкретном приложении.

Ограничения

• daisyUI отвечает прежде всего за стили и структуру компонентов, но не заменяет прикладную логику интерфейса.
• Компонент Calendar содержит стили для поддерживаемых календарных библиотек; сам выбор библиотеки и её подключение остаются задачей проекта.
• При миграции с daisyUI 4 учитывайте несовместимые изменения в именах классов, конфигурации и переменных тем.
• Точный состав компонентов и синтаксис могут меняться в последующих выпусках 5.x.
• Для производственного интерфейса отдельно проверяйте доступность, адаптивность и работу интерактивных состояний.

Blueprint MCP

Blueprint — официальный платный MCP-сервер daisyUI для работы с интерфейсами через ИИ-агентов. Он предоставляет сведения о настройке проекта, правилах дизайн-системы, архитектурах страниц, синтаксисе компонентов и проверке результата.

Заявленные на официальной странице сценарии включают:

• генерацию интерфейсов на daisyUI;
• преобразование Figma-макетов в daisyUI;
• перенос интерфейсов с Tailwind CSS или Bootstrap;
• восстановление интерфейса по изображению;
• создание темы по цветовой палитре изображения;
• финальную проверку исходного кода.

На 10 сентября 2026 года указаны лицензии за $22 в месяц, $45 за три месяца и $600 бессрочно. Тарифы могут измениться, поэтому перед покупкой проверьте официальную страницу Blueprint.

Для обычной ручной разработки Blueprint не обязателен: основная библиотека daisyUI распространяется отдельно.

Полезные ссылки

• Официальный сайт
• Установка
• Темы
• Компоненты
• Описание daisyUI 5
• Blueprint MCP
• Генератор тем
• GitHub
• Playground

Следующий шаг

Для проекта на Tailwind CSS следующий практический шаг — разобраться с базовой стилизацией и затем подключить daisyUI: Tailwind CSS: стилизация без боли

Выбор библиотеки имеет смысл обсуждать вместе с требованиями к темизации, интерактивным состояниям и стеку проекта.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov