# Sistema de design daisyUI

## Prévia da interface do sistema de design daisyUI

Alterne entre Emerald, Lo-fi e Night, edite um cartão de oficina e revise um rascunho local.

## Referência de design do sistema de design daisyUI

daisyUI 5.7.47, criado com Tailwind CSS 4.3.3. Os valores de cor e geometria listados pertencem ao tema Emerald incluído no pacote; Lo-fi e Night definem valores diferentes intencionalmente. A tipografia e o espaçamento da página são escolhas originais que usam dimensões compatíveis com Tailwind.

### Cores semânticas de Emerald

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --color-base-100 | oklch(100% 0 0) | Superfície principal do componente. |
| --color-base-200 | oklch(93% 0 0) | Superfície da página neste exemplo. |
| --color-base-300 | oklch(86% 0 0) | Limite da superfície. |
| --color-base-content | oklch(35.519% 0.032 262.988) | Texto sobre superfícies básicas. |
| --color-primary | oklch(76.662% 0.135 153.45) | Ação principal e plano de fundo do convite. |
| --color-primary-content | oklch(33.387% 0.04 162.24) | Texto combinado com a cor primária. |
| --color-secondary | oklch(61.302% 0.202 261.294) | Função secundária. |
| --color-secondary-content | oklch(100% 0 0) | Texto associado à cor secundária. |
| --color-accent | oklch(72.772% 0.149 33.2) | Papel de destaque. |
| --color-accent-content | oklch(0% 0 0) | Texto associado à cor de destaque. |
| --color-neutral | oklch(35.519% 0.032 262.988) | Ênfase neutra. |
| --color-neutral-content | oklch(98.462% 0.001 247.838) | Texto associado à cor neutra. |
| --color-info | oklch(72.06% 0.191 231.6) | Função informativa. |
| --color-success | oklch(64.8% 0.15 160) | Função de sucesso. |
| --color-warning | oklch(84.71% 0.199 83.87) | Função de aviso. |
| --color-error | oklch(71.76% 0.221 22.18) | Função de erro. |
### Geometria dos componentes de Emerald

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --radius-selector | 1rem | Arredondamento de caixas de seleção, alternadores e seletores semelhantes. |
| --radius-field | 0.5rem | Arredondamento de campos e botões. |
| --radius-box | 1rem | Arredondamento de cartões e modais. |
| --size-selector | 0.25rem | Tamanho base do seletor usado nos cálculos dos componentes. |
| --size-field | 0.25rem | Tamanho base do campo usado nos cálculos dos componentes. |
| --border | 1px | Largura da borda do componente. |
| --depth | 0 | Emerald desativa os efeitos de profundidade. |
| --noise | 0 | Emerald desativa os efeitos de ruído. |
### Escala original do layout do convite

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Page spacing | 32px desktop / 24px 16px mobile | Composição original, não um sistema separado de tokens de espaçamento de daisyUI. |
| Main heading | 36px / 1.1; 30px below 700px | Hierarquia original acima dos padrões dos componentes. |
| Invitation title | 34px / 1.15; 30px on mobile | Tipografia grande original, com quebra de palavras longas. |
| Supporting copy | 14px / 1.6 | Texto explicativo original, fácil de ler. |
| Layout breakpoint | 700px | Ponto de quebra original entre layout dividido e empilhado, não um token de ponto de quebra de daisyUI. |
## Guia completo do sistema de design daisyUI

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Classes semânticas de componentes do sistema de design daisyUI para Tailwind CSS

### Classes semânticas de componentes do CSS para Tailwind

> daisyUI fornece classes de componentes por meio de um plugin do Tailwind. Na versão cinco, a configuração fica em CSS: importe tailwindcss e, em seguida, declare o plugin daisyui e os temas habilitados. O exemplo usa btn, card, fieldset, range, checkbox, join e modal, em vez de recriar a aparência desses componentes com seletores personalizados.

O plugin não fornece o gerenciamento de estado da aplicação. As entradas nativas, a validação do navegador, os métodos de diálogo e o pequeno módulo de JavaScript tornam este estúdio de convites interativo. Essa distinção é importante na escolha da biblioteca: ela pode funcionar com várias estruturas porque sua camada de componentes é CSS, mas um nome de classe, por si só, não implementa uma operação no servidor.

Consulte a especificação de apoio

## No sistema de design daisyUI, associe cada superfície colorida ao papel de conteúdo correspondente

### Associe cada superfície colorida ao papel de conteúdo correspondente

O cartão de convite usa bg-primary e text-primary-content em conjunto. A faixa de papéis repete essa associação para secondary, accent e neutral. Esses são papéis semânticos coordenados, não uma única paleta fixa que precisa ser copiada em todos os componentes. A seleção de outro tema habilitado altera as variáveis subjacentes sem modificar a marcação do cartão.

A cor primária do Emerald é verde-clara, e primary-content é verde-escura. Usar automaticamente texto branco em todo fundo primário ignoraria a função de conteúdo prevista pelo tema. A tabela de especificações preserva os valores OKLCH reais do tema Emerald instalado; não os converte em cores de marca hexadecimais presumidas.

Consulte a especificação de apoio

## Sistema de design daisyUI Compile os temas que pretende oferecer

### Compile os temas que pretende oferecer

A configuração do plugin CSS habilita Emerald como padrão, além de Lo-fi e Night. Um controle de seleção altera data-theme no elemento do documento. O menu oferece apenas os temas compilados; selecionar um nome que nunca foi compilado não fará o CSS correspondente aparecer por mágica.

Os temas também incluem variáveis de raio, tamanho dos campos, borda e efeitos. Portanto, mudar de Emerald para Lo-fi altera mais do que uma amostra de cor. Para limitar um tema a uma região incorporada, data-theme pode ser aplicado a essa região em vez de a html. Este exemplo independente aplica o tema deliberadamente ao documento inteiro.

1. Compile os temas desejados no bloco do plugin daisyUI.

2. Use classes semânticas de fundo e conteúdo na marcação dos componentes.

3. Altere data-theme e inspecione controles, superfícies e texto em conjunto.

Consulte a especificação de apoio

## Sistema de design daisyUI Os raios de seletor, campo e caixa são distintos

### Os raios dos seletores, campos e caixas são independentes

Emerald define radius-selector como um rem, radius-field como meio rem e radius-box como um rem. Seus valores size-selector e size-field são unidades-base de um quarto de rem usadas nos cálculos dos componentes. Esses valores não são intercambiáveis com o espaçamento entre seções da página. A especificação separa a geometria dos componentes do layout original da área de trabalho.

A página ao redor usa uma pilha de fontes sem serifa do sistema, um título editorial grande e uma composição em duas colunas. daisyUI não exige essa hierarquia de títulos. No ponto de interrupção original de 700px, a página empilha o editor acima do convite; preserva todas as entradas e ações, em vez de ocultar configurações para caber em uma captura de tela.

Consulte a especificação de apoio

## Sistema de design daisyUI Um grupo de opções usa entradas de rádio reais

### Um grupo join reúne entradas de rádio reais

As opções de formato são entradas de rádio com um nome compartilhado e as classes join-item e btn. Selecionar Sessão em estúdio ou Encontro on-line altera o estado nativo de seleção e o texto da prévia. Uma linha de botões estilizados sem um estado de seleção persistente não representaria essa escolha mutuamente exclusiva com a mesma clareza.

O controle de lugares usa uma entrada nativa do tipo range, de quatro a vinte e quatro, em incrementos de dois. Um elemento output exibe o número atual, enquanto os rótulos nas extremidades indicam o tamanho pretendido do encontro. O controle de materiais é uma caixa de seleção real. Seu estado altera o rodapé do convite, em vez de apenas mudar a cor da caixa.

Consulte a especificação de apoio

## Sistema de design daisyUI A validação CSS respeita as restrições do navegador

### CSS A validação respeita as restrições do navegador

O campo de título é obrigatório e tem limites mínimo e máximo de caracteres. As classes validator e validator-hint apresentam o estado inválido; ainda cabe ao navegador impor a restrição nativa. O formulário não contorna a validação com um manipulador de clique genérico no botão de revisão.

Depois que a validação padrão é aprovada, o manipulador de envio remove os espaços em branco do início e do fim do título e verifica seu comprimento significativo. Assim, detecta uma sequência de espaços que poderia satisfazer um minlength sem remoção de espaços. Uma mensagem de validade personalizada é apagada no próximo evento de entrada, permitindo o envio de um título corrigido. O conteúdo do usuário é exibido por meio de textContent, nunca inserido como HTML.

Consulte a especificação de apoio

## Sistema de design daisyUI Um diálogo real mantém uma cópia dos dados para revisão

### Um diálogo real mantém uma cópia dos dados para revisão

A revisão do convite copia o título, o formato, o número de lugares e os materiais atuais para uma cópia dos dados e, em seguida, chama dialog.showModal. A classe modal fornece a estilização de daisyUI, enquanto o navegador oferece o comportamento nativo do diálogo. O título identifica o diálogo por meio de aria-labelledby, e a tecla Escape pode fechá-lo sem salvar.

Manter a edição fecha o diálogo e não altera o formulário. Salvar rascunho local fecha o diálogo e anuncia a cópia exata dos dados em uma região de status. A mensagem informa que nenhum convite foi enviado. Isso não simula deliberadamente um envio de e-mail bem-sucedido: o exemplo não tem lista de destinatários nem serviço de envio.

Consulte a especificação de apoio

## Sistema de design daisyUI A redefinição e a edição têm efeitos observáveis

### A redefinição e a edição têm efeitos observáveis

Alterar um campo atualiza o cartão imediatamente e oculta um aviso de salvamento anterior. Isso impede que uma mensagem de sucesso desatualizada pareça se referir a um convite mais recente, ainda não salvo. A redefinição aguarda o navegador restaurar os valores padrão do formulário e, em seguida, recria a prévia com esses valores. O tema selecionado separadamente permanece inalterado.

O preenchimento da arte decorativa de três formas deriva de primary-content, então ela responde às mudanças de tema junto com a tipografia. A arte tem aria-hidden porque não acrescenta informações sobre o número de lugares nem o formato. O título e o rodapé visíveis da prévia contêm o conteúdo relevante.

- Uma entrada inválida impede a revisão e identifica o campo de título.

- A tecla Escape fecha a revisão sem gerar um resultado salvo.

- Editar depois de salvar limpa o resultado anterior e mantém o tema atual.

Consulte a especificação de apoio

## Sistema de design daisyUI Uma pequena CSS compilação com descoberta explícita dos arquivos-fonte

### Uma pequena implementação de CSS com descoberta explícita de fontes

A configuração fornecida usa a CLI do Tailwind, um arquivo input.css local e os três arquivos-fonte mostrados acima. source(none) desativa a varredura automática abrangente, e a diretiva source explícita aponta para HTML, que contém o componente e as classes utilitárias. Assim, o CSS gerado pelo exemplo depende da marcação usada de fato.

A saída da compilação é combinada com a folha de estilos do layout original; JavaScript simples trata das interações. A prévia independente incorpora o resultado e não depende de recursos remotos. Um projeto Vite, Astro ou React pode usar a integração padrão do Tailwind, mas deve manter a lista de temas habilitados e garantir a inclusão dos arquivos-fonte que contêm as classes.

Consulte a especificação de apoio

## daisyUI Exemplos de componentes do sistema de design

### Composição semântica de componentes HTML

Conjuntos de campos, grupo de botões de opção, controle range nativo, caixa de seleção, cartão e diálogo.

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

Referência de código

- Fundos primários sempre combinados com texto primary-content.

- O controle range continua sendo uma entrada nativa com min, max e step.

- A caixa de diálogo é aberta com showModal, não com uma classe open apenas visual.

### Comportamento do rascunho local

Pré-visualização ao vivo, captura estável para revisão, seleção de tema e validação nativa.

```
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();
```

Referência de código

- Nenhum runtime de daisyUI JavaScript é importado.

- Todas as strings do usuário são atribuídas com textContent.

- Salvar cria apenas um resultado local em memória.

### Folha de estilos original do layout

Organização responsiva e formas decorativas ao redor dos componentes nativos de 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}}
```

Referência de código

- O layout da página e a escala dos títulos são decisões da aplicação.

### Documento index.html completo

Use com a compilação da folha de estilos e o código completo de interação fornecidos acima.

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

Referência de código

- Salve a interação fornecida como app.js.

- A área de visualização e o carregamento nativo de recursos estão incluídos.

## Configuração do agente do sistema de design daisyUI

### Ponto de partida para implementação

Verificado com daisyUI 5.7.47 e Tailwind CSS 4.3.3. A arte do cartão e o layout da página são originais; os valores do componente CSS e do tema Emerald são nativos.

```
/* 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. */
```

### Um prompt para seu projeto

```
Use daisyUI 5.7.47 com a compilação Tailwind 4 fornecida e os temas Emerald, Lo-fi e Night para recriar o estúdio de convites. Combine as cores semânticas de superfície com as respectivas funções de conteúdo. Preserve os botões de opção nativos agrupados, o intervalo de assentos com incrementos regulares, a caixa de seleção de materiais e a validação do título. A revisão exibe o convite atual em uma caixa de diálogo nativa; Salvar rascunho local confirma essa captura, enquanto uma edição posterior limpa a mensagem. Redefina o formulário independentemente do tema selecionado e não afirme que os convites foram enviados.
```

## Fontes e escopo do sistema de design daisyUI

daisyUI 5.7.47 e Tailwind CSS 4.3.3. Os valores Emerald são específicos do tema. O rascunho local não persiste dados nem envia convites.

- Instalação Configuração do plugin CSS.

- Temas Configuração do tema e variáveis semânticas.

- Cores Combinação de funções de plano de fundo e conteúdo.

- Intervalo Classes nativas do componente de intervalo.

- Validador Estilos de validade do navegador.

- Modal Composição com diálogo nativo.

- Layout e tipografia Limite entre o layout da aplicação e a tipografia.

## Recursos relacionados ao sistema de design daisyUI

### Element Plus

Use o modelo Transfer, os filtros e as opções desativadas reais de Element Plus para criar uma bancada de seleção de módulos, com cores, tamanhos de fonte e dimensões de controles verificados.

### Flowbite

Uma composição nativa de acordeão e gaveta do Flowbite 4, com aliases de tema semântico verificados, uma lista de conferência de bagagem persistente e um fluxo acessível de anotações locais sobre materiais.

### Fomantic UI

Uma estante de leitura nativa do Fomantic UI com valores de tema compilados e verificados, módulos jQuery de menu suspenso e avaliação, suporte explícito a teclado e uma lista local persistente de itens selecionados.


- [Referência de implementação](https://daisyui.com/docs/themes/)
- [Fonte](https://daisyui.com/docs/themes/)
- [Fonte](https://daisyui.com/docs/layout-and-typography/)
- [Consulte a especificação de apoio](https://daisyui.com/docs/install/)
- [Consulte a especificação de apoio](https://daisyui.com/docs/colors/)
- [Consulte a especificação de apoio](https://daisyui.com/docs/themes/)
- [Consulte a especificação de apoio](https://daisyui.com/docs/layout-and-typography/)
- [Consulte a especificação de apoio](https://daisyui.com/components/join/)
- [Consulte a especificação de apoio](https://daisyui.com/components/validator/)
- [Consulte a especificação de apoio](https://daisyui.com/components/modal/)
- [Consulte a especificação de apoio](https://daisyui.com/components/card/)
- [Referência de código](https://daisyui.com/components/fieldset/)
- [Referência de código](https://daisyui.com/components/modal/)
- [Referência de código](https://daisyui.com/docs/layout-and-typography/)
- [Referência de código](https://daisyui.com/)
- [Instalação Configuração do plugin CSS.](https://daisyui.com/docs/install/)
- [Temas Configuração do tema e variáveis semânticas.](https://daisyui.com/docs/themes/)
- [Cores Combinação de funções de plano de fundo e conteúdo.](https://daisyui.com/docs/colors/)
- [Intervalo Classes nativas do componente de intervalo.](https://daisyui.com/components/range/)
- [Validador Estilos de validade do navegador.](https://daisyui.com/components/validator/)
- [Modal Composição com diálogo nativo.](https://daisyui.com/components/modal/)
- [Layout e tipografia Limite entre o layout da aplicação e a tipografia.](https://daisyui.com/docs/layout-and-typography/)