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

Frontend

daisyUI — библиотека готовых UI-компонентов, которая работает как плагин для Tailwind CSS. Даёт семантические CSS-классы (btn, card, modal) вместо длинных цепочек утилит. Код становится чище и читабельнее, а дизайн — профессиональнее. Я использую daisyUI в связке с Astro и Tailwind — это позволяет собирать интерфейсы быстро, без JS-зависимостей и с поддержкой тем из коробки.

Версия: daisyUI 5.x (совместима с Tailwind CSS 4). Документация — daisyui.com/docs

Зачем нужна 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.

Система тем

Включение

По умолчанию активны light и dark. Чтобы добавить другие:

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

Переключение

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

<html data-theme="nord">

Темы вложимы — можно применить к отдельной секции:

<html data-theme="light">
  <div data-theme="dark">
    <!-- Этот блок всегда в тёмной теме -->
  </div>
</html>

Кастомная тема

@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;
}

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

Категория	Компоненты
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

Примеры

Кнопки:

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

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, встроенная поддержка тем.

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

← Назад в Базу знаний