# Дизайн-система daisyUI

## Предварительный просмотр интерфейса дизайн-системы daisyUI

Переключайте темы Emerald, Lo-fi и Night, изменяйте карточку мастер-класса и просматривайте локальный черновик.

## Справочник по дизайн-системе daisyUI

daisyUI 5.7.47, сборка с Tailwind CSS 4.3.3. Указанные значения цвета и геометрии относятся к включённой в пакет теме Emerald; в темах Lo-fi и Night намеренно заданы другие значения. Типографика и интервалы страницы — исходные решения на основе размеров, совместимых с Tailwind.

### Семантические цвета Emerald

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --color-base-100 | oklch(100% 0 0) | Основная поверхность компонента. |
| --color-base-200 | oklch(93% 0 0) | Поверхность страницы в этом примере. |
| --color-base-300 | oklch(86% 0 0) | Граница поверхности. |
| --color-base-content | oklch(35.519% 0.032 262.988) | Текст на базовых поверхностях. |
| --color-primary | oklch(76.662% 0.135 153.45) | Основное действие и фон приглашения. |
| --color-primary-content | oklch(33.387% 0.04 162.24) | Текст, сочетающийся с основным цветом. |
| --color-secondary | oklch(61.302% 0.202 261.294) | Вторичная роль. |
| --color-secondary-content | oklch(100% 0 0) | Текст для роли secondary. |
| --color-accent | oklch(72.772% 0.149 33.2) | Роль акцента. |
| --color-accent-content | oklch(0% 0 0) | Текст для роли accent. |
| --color-neutral | oklch(35.519% 0.032 262.988) | Выделение нейтрального элемента. |
| --color-neutral-content | oklch(98.462% 0.001 247.838) | Текст для роли neutral. |
| --color-info | oklch(72.06% 0.191 231.6) | Информационная роль. |
| --color-success | oklch(64.8% 0.15 160) | Роль успешного состояния. |
| --color-warning | oklch(84.71% 0.199 83.87) | Роль предупреждения. |
| --color-error | oklch(71.76% 0.221 22.18) | Роль ошибки. |
### Геометрия компонентов Emerald

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --radius-selector | 1rem | Скругление флажков, переключателей и подобных селекторов. |
| --radius-field | 0.5rem | Скругление полей и кнопок. |
| --radius-box | 1rem | Скругление карточек и модальных окон. |
| --size-selector | 0.25rem | Базовый размер селектора, используемый при вычислении размеров компонентов. |
| --size-field | 0.25rem | Базовый размер поля, используемый при вычислении размеров компонентов. |
| --border | 1px | Толщина границы компонента. |
| --depth | 0 | В теме Emerald эффекты глубины отключены. |
| --noise | 0 | В теме Emerald эффекты шума отключены. |
### Исходный масштаб компоновки приглашения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Page spacing | 32px desktop / 24px 16px mobile | Исходная композиция, а не отдельная система токенов интервалов daisyUI. |
| Main heading | 36px / 1.1; 30px below 700px | Исходная иерархия поверх стандартных значений компонентов. |
| Invitation title | 34px / 1.15; 30px on mobile | Исходный крупный шрифт с переносом длинных слов. |
| Supporting copy | 14px / 1.6 | Исходный удобочитаемый пояснительный текст. |
| Layout breakpoint | 700px | Исходная точка перехода от двухколоночной компоновки к одной колонке, а не токен контрольной точки daisyUI. |
## Полное руководство по дизайн-системе daisyUI

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

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Семантические классы компонентов дизайн-системы daisyUI поверх Tailwind CSS

### Семантические классы компонентов поверх Tailwind CSS

> daisyUI предоставляет классы компонентов через плагин Tailwind. В версии 5 настройка находится в CSS: импортируйте tailwindcss, затем объявите плагин daisyui и включите нужные темы. В примере используются btn, card, fieldset, range, checkbox, join и modal, а не специально созданные селекторы для имитации внешнего вида этих компонентов.

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

Прочитать вспомогательную спецификацию

## Сочетайте каждую цветную поверхность с соответствующей ей ролью содержимого в дизайн-системе daisyUI

### Сочетайте каждую цветную поверхность с соответствующей ей ролью содержимого

Для карточки приглашения вместе используются bg-primary и text-primary-content. В полосе ролей тот же принцип применён к secondary, accent и neutral. Это согласованные семантические роли, а не единая неизменная палитра, которую нужно копировать в каждый компонент. При выборе другой включённой темы меняются базовые переменные, а разметка карточки остаётся прежней.

В теме Emerald роль primary задана светло-зелёным цветом, а primary-content — тёмно-зелёным. Автоматически использовать белый текст на любом фоне primary означало бы игнорировать предусмотренную темой роль содержимого. В таблице спецификации приведены фактические значения OKLCH из установленной темы Emerald; они не преобразованы в предположительные шестнадцатеричные цвета бренда.

Прочитать вспомогательную спецификацию

## Скомпилируйте темы, которые собираетесь предлагать, в дизайн-системе daisyUI

### Скомпилируйте темы, которые собираетесь предлагать

В конфигурации плагина CSS тема Emerald включена как основная, наряду с Lo-fi и Night. Элемент выбора меняет data-theme у элемента документа. В меню предлагаются только скомпилированные темы; выбор имени темы, которая не была собрана, не создаст соответствующую тему CSS.

В темах также заданы переменные радиусов, размеров полей, границ и эффектов. Поэтому при переключении с Emerald на Lo-fi меняется не только образец цвета. Чтобы применить тему к встроенной области, атрибут data-theme можно назначить этой области вместо html. В этом автономном примере тема намеренно применяется ко всему документу.

1. Скомпилируйте нужные темы в блоке плагина daisyUI.

2. Используйте в разметке компонентов семантические классы фона и содержимого.

3. Измените data-theme и вместе проверьте элементы управления, поверхности и текст.

Прочитать вспомогательную спецификацию

## Радиусы селекторов, полей и контейнеров различаются в дизайн-системе daisyUI

### Радиусы селекторов, полей и контейнеров различаются

В теме Emerald значение radius-selector равно одному rem, radius-field — половине rem, а radius-box — одному rem. Базовые единицы size-selector и size-field равны четверти rem и используются при вычислении размеров компонентов. Эти значения не взаимозаменяемы с интервалами между разделами страницы. В спецификации геометрия компонентов отделена от исходной компоновки рабочей области.

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

Прочитать вспомогательную спецификацию

## Дизайн-система daisyUI · A Join Groups · настоящие радиокнопки

### Группа объединяет настоящие переключатели radio

Варианты формата представлены радиокнопками с общим атрибутом name и классами join-item и btn. Выбор «Занятие в студии» или «Онлайн-круг» меняет нативное состояние checked и текст предпросмотра. Ряд стилизованных кнопок без сохраняемого состояния выбора не так наглядно передавал бы взаимоисключающий характер этого выбора.

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

Прочитать вспомогательную спецификацию

## Проверка дизайн-системы daisyUI учитывает ограничения браузера CSS

### Проверка CSS учитывает ограничения браузера

Для поля названия заданы обязательное заполнение, а также минимальная и максимальная длина. Классы validator и validator-hint отображают недопустимое состояние, а нативные ограничения проверяет браузер. Форма не обходит проверку корректности с помощью универсального обработчика нажатия на кнопку предварительного просмотра.

После прохождения обычной проверки обработчик отправки удаляет пробелы по краям названия и проверяет длину содержимого. Это позволяет выявить строку из пробелов, которая может удовлетворять minlength без предварительного удаления пробелов. При следующем вводе пользовательское сообщение об ошибке сбрасывается, чтобы исправленное название можно было отправить. Пользовательский текст выводится через textContent и никогда не вставляется как HTML.

Прочитать вспомогательную спецификацию

## Дизайн-система daisyUI · В настоящем диалоговом окне сохраняется снимок данных для проверки

### В настоящем диалоговом окне сохраняется снимок данных для проверки

При нажатии «Проверить приглашение» текущие название, формат, число мест и параметры материалов копируются в снимок, после чего вызывается dialog.showModal. Класс modal задаёт стилизацию daisyUI, а поведение нативного диалогового окна обеспечивает браузер. Заголовок связывается с окном через aria-labelledby; клавиша Escape закрывает окно без сохранения.

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

Прочитать вспомогательную спецификацию

## Дизайн-система daisyUI · Сброс и редактирование заметно меняют результат

### Сброс и редактирование заметно меняют результат

Изменение поля сразу обновляет карточку и скрывает предыдущее уведомление о сохранении. Это не позволяет устаревшему сообщению об успехе выглядеть как подтверждение нового, ещё не сохранённого приглашения. После восстановления браузером исходных значений сброс заново формирует предпросмотр на основе этих значений. Ранее выбранная тема при этом сохраняется.

Заливка декоративной композиции из трёх фигур определяется через primary-content, поэтому при смене темы она меняется вместе с типографикой. Элемент помечен aria-hidden, так как не содержит сведений о числе мест или формате. Смысловую информацию передают видимые название и нижняя часть приглашения.

- Недопустимый ввод блокирует проверку и указывает на поле названия.

- Клавиша Escape закрывает окно проверки, не создавая сохранённый результат.

- Редактирование после сохранения удаляет прежний результат, сохраняя текущую тему.

Прочитать вспомогательную спецификацию

## Дизайн-система daisyUI: небольшая сборка CSS с явным поиском исходных файлов

### Небольшая сборка CSS с явным поиском исходных файлов

В предоставленной настройке используются CLI Tailwind, локальный файл input.css и три исходных файла, показанных выше. Директива source(none) отключает широкое автоматическое сканирование, а явная директива source указывает на HTML с компонентом и классами утилит. Благодаря этому сгенерированный в примере CSS зависит от фактической разметки.

Результат сборки объединяется с исходной таблицей стилей макета; для взаимодействия используется обычный JavaScript. В автономном предпросмотре результат встроен, внешние зависимости отсутствуют. В проектах на Vite, Astro или React можно использовать стандартную интеграцию Tailwind, но следует сохранить список включённых тем и убедиться, что исходные файлы с классами добавлены в сборку.

Прочитать вспомогательную спецификацию

## Дизайн-система daisyUI · Примеры компонентов

### Семантическая композиция компонентов HTML

Группы полей, объединение радиокнопок, нативный ползунок, флажок, карточка и диалоговое окно.

```
<main class="workshop"><header class="page-heading"><div><p class="eyebrow">DAISYUI · SEMANTIC THEMES</p><h1>A small gathering,<br>a considered invitation.</h1><p class="muted">Compose a local workshop card and watch the theme roles follow.</p></div><label class="fieldset">Theme<select id="theme" class="select"><option value="emerald">Emerald</option><option value="lofi">Lo-fi</option><option value="night">Night</option></select></label></header><div class="workbench"><form id="invitation" class="card bg-base-100 border border-base-300"><div class="card-body"><h2 class="card-title">Workshop details</h2><fieldset class="fieldset"><legend class="fieldset-legend">Workshop title</legend><input id="title" class="input validator w-full" required minlength="5" maxlength="52" value="Making room for ideas" aria-describedby="title-help"><p id="title-help" class="validator-hint">Use 5–52 characters.</p></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Format</legend><div class="join"><input class="join-item btn" type="radio" name="format" value="Studio session" aria-label="Studio session" checked><input class="join-item btn" type="radio" name="format" value="Online circle" aria-label="Online circle"></div></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Seats <output id="seat-count" for="seats">12</output></legend><input id="seats" class="range range-primary w-full" type="range" min="4" max="24" step="2" value="12" aria-label="Number of seats"><div class="range-labels"><span>4 · intimate</span><span>24 · open room</span></div></fieldset><label class="extras"><input id="materials" class="checkbox checkbox-primary" type="checkbox" checked><span>Include a materials pack<small>Paper, pencils and a small printed prompt.</small></span></label><div class="card-actions"><button class="btn btn-primary" type="submit">Review invitation</button><button class="btn btn-ghost" type="reset">Reset</button></div></div></form><section class="specimen" aria-label="Invitation preview"><div class="invitation-card card bg-primary text-primary-content"><div class="card-body"><div class="card-top"><span class="badge badge-outline">OPEN STUDIO</span><span>LOCAL DRAFT</span></div><div class="shape-art" aria-hidden="true"><i></i><i></i><i></i></div><p class="preview-kicker">A WORKSHOP FOR CURIOUS PEOPLE</p><h2 id="preview-title">Making room for ideas</h2><p id="preview-format">Studio session</p><div class="invite-footer"><strong id="preview-seats">12 seats</strong><span id="preview-materials">Materials included</span></div></div></div><div class="role-strip" aria-label="Theme color roles"><span class="bg-primary text-primary-content">Primary</span><span class="bg-secondary text-secondary-content">Secondary</span><span class="bg-accent text-accent-content">Accent</span><span class="bg-neutral text-neutral-content">Neutral</span></div><p class="muted specimen-note">The same semantic classes use each theme’s background and matching content colors.</p></section></div><div id="result" class="alert alert-success" role="status" hidden></div><dialog id="review" class="modal" aria-labelledby="review-title"><div class="modal-box"><h2 id="review-title">Review your local invitation</h2><p id="review-copy"></p><p class="muted">This prepares a local draft. No invitations are sent.</p><div class="modal-action"><button id="back" class="btn">Keep editing</button><button id="approve" class="btn btn-primary">Save local draft</button></div></div></dialog></main>
```

Справочник по коду

- Для фона primary всегда используется текст primary-content.

- Ползунок остаётся нативным элементом ввода с параметрами min, max и step.

- Диалоговое окно открывается через showModal, а не с помощью одного лишь визуального класса open.

### Локальный черновик

Предпросмотр в реальном времени, неизменяемый снимок для проверки, выбор темы и нативная проверка корректности.

```
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
```

Справочник по коду

- Среда выполнения JavaScript daisyUI не импортируется.

- Все пользовательские строки назначаются через textContent.

- При сохранении создаётся только локальный результат в памяти.

### Исходная таблица стилей макета

Адаптивная компоновка и декоративная геометрия вокруг нативных компонентов CSS.

```
body{margin:0;background:var(--color-base-200);color:var(--color-base-content);font-family:ui-sans-serif,system-ui,sans-serif}.workshop{max-width:1100px;margin:auto;padding:32px}.page-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}.eyebrow,.preview-kicker{font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:36px;line-height:1.1;margin:14px 0}h2{font-size:20px;font-weight:650}.muted{opacity:.7;font-size:14px;line-height:1.6}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:28px}.fieldset{margin:8px 0;min-width:0}.card-body{gap:12px}.fieldset-legend{gap:8px}.range-labels{display:flex;justify-content:space-between;font-size:11px;opacity:.7}.extras{display:flex;gap:12px;font-size:14px;margin:16px 0}.extras small{display:block;opacity:.65;margin-top:4px}.card-actions{margin-top:12px}.card-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.1em}.shape-art{height:135px;position:relative;display:flex;justify-content:center;align-items:center;margin:16px 0}.shape-art i{width:95px;height:95px;background:var(--color-primary-content);opacity:.8;border-radius:50%;margin-right:-20px}.shape-art i:nth-child(2){border-radius:0;transform:rotate(45deg);opacity:.3}.shape-art i:nth-child(3){border-radius:50% 50% 0 0;opacity:.55}.invitation-card h2{font-size:34px;line-height:1.15;margin:4px 0;overflow-wrap:anywhere}.invite-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid currentColor;padding-top:20px;margin-top:20px;font-size:12px}.role-strip{display:flex;gap:8px;margin-top:16px}.role-strip span{padding:8px;font-size:10px;border-radius:4px;flex:1;text-align:center}.specimen-note{margin-top:12px}.alert{margin-top:24px}.alert[hidden]{display:none}.modal-box p{margin:16px 0}.join{display:flex}.join .btn{flex:1;font-size:12px;padding-inline:12px}@media(max-width:700px){.workshop{padding:24px 16px}.page-heading{flex-direction:column;gap:8px}.page-heading .fieldset{width:100%}h1{font-size:30px}.workbench{grid-template-columns:1fr}.card-body{padding:20px}.invitation-card h2{font-size:30px}}
```

Справочник по коду

- Макет страницы и масштаб заголовков определяются приложением.

### Полный документ index.html

Используйте вместе со сборкой таблицы стилей и полным исходным кодом взаимодействия, приведёнными выше.

```
<!doctype html>
<html lang="en" data-theme="emerald"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>daisyUI specimen</title><link rel="stylesheet" href="output.css"><link rel="stylesheet" href="style.css"></head><body>
<main class="workshop"><header class="page-heading"><div><p class="eyebrow">DAISYUI · SEMANTIC THEMES</p><h1>A small gathering,<br>a considered invitation.</h1><p class="muted">Compose a local workshop card and watch the theme roles follow.</p></div><label class="fieldset">Theme<select id="theme" class="select"><option value="emerald">Emerald</option><option value="lofi">Lo-fi</option><option value="night">Night</option></select></label></header><div class="workbench"><form id="invitation" class="card bg-base-100 border border-base-300"><div class="card-body"><h2 class="card-title">Workshop details</h2><fieldset class="fieldset"><legend class="fieldset-legend">Workshop title</legend><input id="title" class="input validator w-full" required minlength="5" maxlength="52" value="Making room for ideas" aria-describedby="title-help"><p id="title-help" class="validator-hint">Use 5–52 characters.</p></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Format</legend><div class="join"><input class="join-item btn" type="radio" name="format" value="Studio session" aria-label="Studio session" checked><input class="join-item btn" type="radio" name="format" value="Online circle" aria-label="Online circle"></div></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Seats <output id="seat-count" for="seats">12</output></legend><input id="seats" class="range range-primary w-full" type="range" min="4" max="24" step="2" value="12" aria-label="Number of seats"><div class="range-labels"><span>4 · intimate</span><span>24 · open room</span></div></fieldset><label class="extras"><input id="materials" class="checkbox checkbox-primary" type="checkbox" checked><span>Include a materials pack<small>Paper, pencils and a small printed prompt.</small></span></label><div class="card-actions"><button class="btn btn-primary" type="submit">Review invitation</button><button class="btn btn-ghost" type="reset">Reset</button></div></div></form><section class="specimen" aria-label="Invitation preview"><div class="invitation-card card bg-primary text-primary-content"><div class="card-body"><div class="card-top"><span class="badge badge-outline">OPEN STUDIO</span><span>LOCAL DRAFT</span></div><div class="shape-art" aria-hidden="true"><i></i><i></i><i></i></div><p class="preview-kicker">A WORKSHOP FOR CURIOUS PEOPLE</p><h2 id="preview-title">Making room for ideas</h2><p id="preview-format">Studio session</p><div class="invite-footer"><strong id="preview-seats">12 seats</strong><span id="preview-materials">Materials included</span></div></div></div><div class="role-strip" aria-label="Theme color roles"><span class="bg-primary text-primary-content">Primary</span><span class="bg-secondary text-secondary-content">Secondary</span><span class="bg-accent text-accent-content">Accent</span><span class="bg-neutral text-neutral-content">Neutral</span></div><p class="muted specimen-note">The same semantic classes use each theme’s background and matching content colors.</p></section></div><div id="result" class="alert alert-success" role="status" hidden></div><dialog id="review" class="modal" aria-labelledby="review-title"><div class="modal-box"><h2 id="review-title">Review your local invitation</h2><p id="review-copy"></p><p class="muted">This prepares a local draft. No invitations are sent.</p><div class="modal-action"><button id="back" class="btn">Keep editing</button><button id="approve" class="btn btn-primary">Save local draft</button></div></div></dialog></main>

<script src="app.js" defer></script></body></html>
```

Справочник по коду

- Сохраните приведённый код взаимодействия в файле app.js.

- Настройка области просмотра и нативная загрузка ресурсов включены.

## Настройка агента дизайн-системы daisyUI

### Отправная точка для реализации

Проверено с daisyUI 5.7.47 и Tailwind CSS 4.3.3. Иллюстрация карточки и макет страницы разработаны специально для примера; компонентные CSS и значения темы Emerald — нативные.

```
/* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 daisyui@5.7.47 */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
  themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */
```

### Запрос для вашего проекта

```
Используйте daisyUI 5.7.47 с предоставленной сборкой Tailwind 4 и темами Emerald, Lo-fi и Night, чтобы воссоздать студию приглашений. Сочетайте семантические цвета фона с соответствующими ролями текста. Сохраните объединённые нативные радиокнопки, ползунок числа мест с чётным шагом, флажок материалов и проверку названия. При проверке текущее приглашение помещается в нативное диалоговое окно; команда «Сохранить локальный черновик» подтверждает этот снимок, а последующее редактирование удаляет сообщение. Сбрасывайте форму независимо от выбранной темы и не заявляйте, что приглашения отправлены.
```

## Дизайн-система daisyUI · Источники и область применения

daisyUI 5.7.47 и Tailwind CSS 4.3.3. Значения Emerald зависят от темы. Локальный черновик не сохраняет данные и не отправляет приглашения.

- Установка Настройка плагина CSS.

- Темы Настройка тем и семантические переменные.

- Цвета Сочетание ролей фона и текста.

- Ползунок Классы нативного компонента ползунка.

- Валидатор Стилизация с учётом проверки браузером.

- Модальное окно Композиция с нативным диалоговым окном.

- Макет и типографика Границы ответственности приложения за макет и типографику.

## Дизайн-система daisyUI · Связанные ресурсы

### Element Plus

Используйте настоящую модель Transfer в Element Plus, фильтры и отключённые параметры, чтобы создать рабочую область выбора модулей с проверенными цветами, размерами шрифта и габаритами элементов управления.

### Flowbite

Композиция с нативными аккордеоном и боковой панелью Flowbite 4, проверенными семантическими псевдонимами темы, постоянным списком вещей для поездки и доступным локальным сценарием заметок о материалах.

### Fomantic UI

Нативная полка для чтения Fomantic UI с проверенными скомпилированными значениями темы, модулями выпадающего списка и рейтинга jQuery, явной поддержкой клавиатуры и постоянно сохраняемым локальным списком избранного.


- [Справочник по реализации](https://daisyui.com/docs/themes/)
- [Источник](https://daisyui.com/docs/themes/)
- [Источник](https://daisyui.com/docs/layout-and-typography/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/docs/install/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/docs/colors/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/docs/themes/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/docs/layout-and-typography/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/components/join/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/components/validator/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/components/modal/)
- [Прочитать вспомогательную спецификацию](https://daisyui.com/components/card/)
- [Справочник по коду](https://daisyui.com/components/fieldset/)
- [Справочник по коду](https://daisyui.com/components/modal/)
- [Справочник по коду](https://daisyui.com/docs/layout-and-typography/)
- [Справочник по коду](https://daisyui.com/)
- [Установка Настройка плагина CSS.](https://daisyui.com/docs/install/)
- [Темы Настройка тем и семантические переменные.](https://daisyui.com/docs/themes/)
- [Цвета Сочетание ролей фона и текста.](https://daisyui.com/docs/colors/)
- [Ползунок Классы нативного компонента ползунка.](https://daisyui.com/components/range/)
- [Валидатор Стилизация с учётом проверки браузером.](https://daisyui.com/components/validator/)
- [Модальное окно Композиция с нативным диалоговым окном.](https://daisyui.com/components/modal/)
- [Макет и типографика Границы ответственности приложения за макет и типографику.](https://daisyui.com/docs/layout-and-typography/)