# sistema di design daisyUI ## Anteprima dell’interfaccia del sistema di design daisyUI Alterna Emerald, Lo-fi e Night, modifica una scheda del workshop e rivedi una bozza locale. ## Riferimento di design per il sistema di design daisyUI daisyUI 5.7.47, realizzato con Tailwind CSS 4.3.3. I valori di colore e geometria elencati appartengono al tema Emerald incluso nel bundle; Lo-fi e Night definiscono intenzionalmente valori diversi. Tipografia e spaziature della pagina sono scelte originali che usano dimensioni compatibili con Tailwind. ### Colori semantici di Emerald | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --color-base-100 | oklch(100% 0 0) | Superficie principale del componente. | | --color-base-200 | oklch(93% 0 0) | Superficie della pagina in questo esempio. | | --color-base-300 | oklch(86% 0 0) | Bordo della superficie. | | --color-base-content | oklch(35.519% 0.032 262.988) | Testo sulle superfici di base. | | --color-primary | oklch(76.662% 0.135 153.45) | Sfondo dell’azione principale e dell’invito. | | --color-primary-content | oklch(33.387% 0.04 162.24) | Testo abbinato al primario. | | --color-secondary | oklch(61.302% 0.202 261.294) | Ruolo secondario. | | --color-secondary-content | oklch(100% 0 0) | Testo abbinato al secondario. | | --color-accent | oklch(72.772% 0.149 33.2) | Ruolo di accento. | | --color-accent-content | oklch(0% 0 0) | Testo abbinato all’accento. | | --color-neutral | oklch(35.519% 0.032 262.988) | Enfasi neutra. | | --color-neutral-content | oklch(98.462% 0.001 247.838) | Testo abbinato al neutro. | | --color-info | oklch(72.06% 0.191 231.6) | Ruolo informativo. | | --color-success | oklch(64.8% 0.15 160) | Ruolo di successo. | | --color-warning | oklch(84.71% 0.199 83.87) | Ruolo di avviso. | | --color-error | oklch(71.76% 0.221 22.18) | Ruolo di errore. | ### Geometria dei componenti Emerald | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --radius-selector | 1rem | Arrotondamento per caselle di controllo, interruttori e selettori simili. | | --radius-field | 0.5rem | Arrotondamento per campi e pulsanti. | | --radius-box | 1rem | Arrotondamento per card e finestre modali. | | --size-selector | 0.25rem | Dimensione di base del selettore usata nei calcoli dei componenti. | | --size-field | 0.25rem | Dimensione di base del campo usata nei calcoli dei componenti. | | --border | 1px | Spessore del bordo del componente. | | --depth | 0 | Emerald disattiva gli effetti di profondità. | | --noise | 0 | Emerald disattiva gli effetti di rumore. | ### Scala originale del layout dell’invito | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Page spacing | 32px desktop / 24px 16px mobile | Composizione originale, non un sistema separato di token di spaziatura di daisyUI. | | Main heading | 36px / 1.1; 30px below 700px | Gerarchia originale, distinta dalle impostazioni predefinite dei componenti. | | Invitation title | 34px / 1.15; 30px on mobile | Tipografia grande originale con a capo delle parole lunghe. | | Supporting copy | 14px / 1.6 | Testo esplicativo originale e leggibile. | | Layout breakpoint | 700px | Breakpoint originale per il passaggio da layout affiancato a impilato, non un token di breakpoint di daisyUI. | ## Guida completa al sistema di design daisyUI Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Classi semantiche dei componenti di sistema di design daisyUI per Tailwind CSS ### Classi semantiche dei componenti di CSS per Tailwind > daisyUI fornisce classi per i componenti tramite un plugin Tailwind. Nella versione cinque la configurazione si trova in CSS: importa tailwindcss, quindi dichiara il plugin daisyui e i temi abilitati. L’esempio usa btn, card, fieldset, range, checkbox, join e modal invece di ricreare l’aspetto di quei componenti con selettori personalizzati. Il plugin non fornisce la gestione dello stato dell’applicazione. Gli input nativi, la convalida del browser, i metodi dei dialog e il piccolo modulo JavaScript rendono interattivo questo studio per gli inviti. La distinzione è importante quando si sceglie la libreria: può funzionare con diversi framework perché il suo livello di componenti è CSS, ma il solo nome di una classe non implementa un’operazione lato server. Leggi la specifica di supporto ## sistema di design daisyUI: abbina ogni superficie colorata al ruolo del suo contenuto ### Abbina ogni superficie colorata al ruolo del suo contenuto La scheda dell’invito usa insieme bg-primary e text-primary-content. La fascia dei ruoli ripropone lo stesso abbinamento per secondary, accent e neutral. Sono ruoli semantici coordinati, non un’unica palette fissa da copiare in ogni componente. Selezionando un altro tema abilitato, cambiano le variabili sottostanti senza modificare il markup della scheda. Il colore primary di Emerald è un verde chiaro, mentre primary-content è un verde scuro. Usare automaticamente testo bianco su ogni sfondo primary ignorerebbe il ruolo del contenuto previsto dal tema. La tabella delle specifiche conserva gli effettivi valori OKLCH del tema Emerald installato; non li converte in colori esadecimali del marchio ipotizzati. Leggi la specifica di supporto ## sistema di design daisyUI: compila i temi che intendi offrire ### Compila i temi che intendi offrire La configurazione del plugin CSS abilita Emerald come tema predefinito, oltre a Lo-fi e Night. Un controllo select modifica data-theme sull’elemento del documento. Nel menu sono disponibili solo i temi compilati; selezionare un nome di un tema mai compilato non farebbe comparire il tema corrispondente di CSS. I temi comprendono anche variabili per raggio, dimensioni dei campi, bordi ed effetti. Passare da Emerald a Lo-fi, quindi, modifica più di un semplice campione di colore. Per applicare un tema a una regione incorporata, si può impostare data-theme su quella regione invece che su html. Questo esempio autonomo lo applica intenzionalmente all’intero documento. 1. Compila i temi desiderati nel blocco del plugin daisyUI. 2. Usa nel markup dei componenti le classi semantiche per sfondo e contenuto. 3. Modifica data-theme e osserva insieme controlli, superfici e testo. Leggi la specifica di supporto ## sistema di design daisyUI: i raggi di selettori, campi e riquadri sono distinti ### I raggi di selettori, campi e riquadri sono distinti Emerald definisce radius-selector a un rem, radius-field a mezzo rem e radius-box a un rem. Le variabili size-selector e size-field sono unità di base di un quarto di rem usate nei calcoli dei componenti. Questi valori non sono intercambiabili con la spaziatura tra le sezioni della pagina. Le specifiche distinguono la geometria dei componenti dal layout originale dell’area di lavoro. La pagina circostante usa una pila di font sans-serif di sistema, un grande titolo editoriale e una struttura a due colonne. daisyUI non richiede questa gerarchia dei titoli. Al breakpoint originale di 700px, la pagina dispone l’editor sopra l’invito; mantiene ogni campo e azione invece di nascondere le impostazioni per adattarsi a uno screenshot. Leggi la specifica di supporto ## Sistema di design daisyUI: opzioni di gruppo con input radio reali ### Un gruppo Join racchiude veri input radio Le opzioni di formato sono input radio con lo stesso nome e le classi join-item e btn. Selezionando Studio session o Online circle cambia lo stato checked nativo e il testo dell’anteprima. Una riga di pulsanti stilizzati senza uno stato di selezione persistente non rappresenterebbe altrettanto chiaramente questa scelta esclusiva. Il controllo Posti usa un input range nativo da quattro a ventiquattro, con incrementi di due. Un elemento output ne mostra il numero corrente, mentre le etichette agli estremi indicano le dimensioni previste per l’incontro. Il controllo dei materiali è una vera casella di controllo. Il suo stato modifica il piè di pagina dell’invito, non solo il colore della casella. Leggi la specifica di supporto ## Sistema di design daisyUI: la validazione di CSS rispecchia i vincoli del browser ### CSS La convalida rispetta i vincoli del browser Il campo del titolo è obbligatorio e ha vincoli di lunghezza minima e massima. Le classi validator e validator-hint mostrano lo stato non valido; spetta comunque al browser applicare il vincolo nativo. Il modulo non aggira la convalida con un gestore generico dell’evento click sul pulsante di revisione. Dopo il superamento della convalida standard, il gestore dell’invio rimuove gli spazi superflui dal titolo e ne verifica la lunghezza effettiva. In questo modo intercetta una sequenza di spazi che potrebbe soddisfare un minlength senza prima essere ripulita. Un messaggio di convalida personalizzato viene cancellato al successivo evento input, così il titolo corretto può essere inviato. Il contenuto dell’utente viene visualizzato tramite textContent, mai inserito come HTML. Leggi la specifica di supporto ## Sistema di design daisyUI: una finestra di dialogo reale conserva un’istantanea per la revisione ### Una finestra di dialogo reale conserva un’istantanea per la revisione Rivedi invito copia il titolo, il formato, i posti e i materiali correnti in un’istantanea, quindi chiama dialog.showModal. La classe modal fornisce lo stile daisyUI, mentre il browser gestisce il comportamento nativo della finestra di dialogo. L’intestazione la identifica tramite aria-labelledby e il tasto Escape consente di chiudere la revisione senza salvare. Continua a modificare chiude la finestra di dialogo e lascia invariato il modulo. Salva bozza locale la chiude e annuncia l’istantanea esatta in un’area di stato. Il messaggio specifica che non è stato inviato alcun invito. Non si simula volutamente l’invio di un’email: l’esempio non prevede né un elenco di destinatari né un servizio di invio. Leggi la specifica di supporto ## Sistema di design daisyUI: il ripristino e le modifiche hanno effetti visibili ### Il ripristino e le modifiche hanno effetti visibili Modificare un campo aggiorna immediatamente la scheda e nasconde un eventuale avviso di salvataggio precedente. In questo modo un messaggio di successo ormai superato non sembra riferirsi a un invito più recente e non salvato. Il ripristino attende che il browser abbia recuperato i valori predefiniti del modulo, quindi ricrea l’anteprima a partire da quei valori effettivi. Il tema selezionato separatamente rimane invariato. Il riempimento delle tre forme decorative deriva da primary-content, quindi si aggiorna al cambio di tema insieme alla tipografia. L’illustrazione è contrassegnata con aria-hidden perché non fornisce informazioni su posti o formato. I contenuti significativi sono nel titolo e nel piè di pagina visibili dell’anteprima. - L’input non valido impedisce la revisione e segnala il campo del titolo. - Escape chiude la revisione senza generare un risultato salvato. - Dopo il salvataggio, le modifiche cancellano il vecchio risultato e mantengono il tema corrente. Leggi la specifica di supporto ## Sistema di design daisyUI: una piccola build di CSS con individuazione esplicita delle sorgenti ### Una build CSS essenziale con rilevamento esplicito delle sorgenti La configurazione fornita usa la CLI di Tailwind, un file input.css locale e i tre file sorgente mostrati sopra. source(none) disattiva la scansione automatica estesa e la direttiva source esplicita indica il HTML che contiene il componente e le classi utility. In questo modo il CSS generato per l’esempio dipende dal markup effettivamente utilizzato. L’output della build viene combinato con il foglio di stile originale del layout; plain JavaScript gestisce le interazioni. L’anteprima autonoma incorpora il risultato e non ha dipendenze remote. Anche un progetto Vite, Astro o React può usare la normale integrazione Tailwind, ma dovrebbe mantenere l’elenco dei temi abilitati e assicurarsi di includere i file sorgente che contengono le classi. Leggi la specifica di supporto ## Sistema di design daisyUI: esempi di componenti ### Composizione semantica dei componenti HTML Fieldset, gruppo di pulsanti radio, range nativo, casella di controllo, scheda e finestra di dialogo. ```

DAISYUI · SEMANTIC THEMES

A small gathering,
a considered invitation.

Compose a local workshop card and watch the theme roles follow.

Workshop details

Workshop title

Use 5–52 characters.

Format
Seats 12
4 · intimate24 · open room
OPEN STUDIOLOCAL DRAFT

A WORKSHOP FOR CURIOUS PEOPLE

Making room for ideas

Studio session

12 seatsMaterials included
PrimarySecondaryAccentNeutral

The same semantic classes use each theme’s background and matching content colors.

Review your local invitation

This prepares a local draft. No invitations are sent.

``` Riferimento del codice - Gli sfondi primari sono sempre abbinati al testo primary-content. - Il range rimane un input nativo con min, max e step. - La finestra di dialogo si apre con showModal, non con una classe open puramente visiva. ### Comportamento della bozza locale Anteprima in tempo reale, istantanea stabile per la revisione, selezione del tema e convalida 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(); ``` Riferimento del codice - Non viene importato alcun runtime daisyUI JavaScript. - Tutte le stringhe dell’utente vengono assegnate con textContent. - Il salvataggio crea solo un risultato locale in memoria. ### Foglio di stile originale del layout Disposizione adattabile e forme decorative attorno ai componenti nativi 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}} ``` Riferimento del codice - Il layout della pagina e la scala dei titoli sono decisioni dell’applicazione. ### Documento index.html completo Da usare con la build del foglio di stile e il codice completo per le interazioni forniti sopra. ``` daisyUI specimen

DAISYUI · SEMANTIC THEMES

A small gathering,
a considered invitation.

Compose a local workshop card and watch the theme roles follow.

Workshop details

Workshop title

Use 5–52 characters.

Format
Seats 12
4 · intimate24 · open room
OPEN STUDIOLOCAL DRAFT

A WORKSHOP FOR CURIOUS PEOPLE

Making room for ideas

Studio session

12 seatsMaterials included
PrimarySecondaryAccentNeutral

The same semantic classes use each theme’s background and matching content colors.

Review your local invitation

This prepares a local draft. No invitations are sent.

``` Riferimento del codice - Salva il codice fornito per le interazioni come app.js. - Sono inclusi il viewport e il caricamento nativo delle risorse. ## daisyUI Configurazione dell’agent per il sistema di design ### Punto di partenza per l’implementazione Verificato con daisyUI 5.7.47 e Tailwind CSS 4.3.3. L’illustrazione della scheda e il layout della pagina sono originali; i valori di CSS dei componenti e del tema Emerald sono nativi. ``` /* 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 . */ /* Set and a viewport meta tag. */ ``` ### Un prompt per il tuo progetto ``` Usa daisyUI 5.7.47 con la build Tailwind 4 fornita e i temi Emerald, Lo-fi e Night per riprodurre lo studio degli inviti. Abbina i colori semantici delle superfici ai rispettivi ruoli del contenuto. Mantieni gli input radio nativi raggruppati, il range dei posti con incrementi pari, la casella dei materiali e la convalida del titolo. Rivedi acquisisce l’invito corrente in una finestra di dialogo nativa; Salva bozza locale conferma quell’istantanea, mentre le modifiche successive cancellano il messaggio. Ripristina il modulo senza modificare il tema selezionato e non dichiarare che gli inviti sono stati inviati. ``` ## daisyUI Fonti e ambito del sistema di design daisyUI 5.7.47 e Tailwind CSS 4.3.3. I valori Emerald dipendono dal tema. La bozza locale non conserva i dati né invia inviti. - Installazione Configurazione del plugin CSS. - Temi Configurazione del tema e variabili semantiche. - Colori Abbinamento dei ruoli di sfondo e contenuto. - Range Classi del componente range nativo. - Validator Stili per la convalida del browser. - Modal Composizione della finestra di dialogo nativa. - Layout e tipografia Confini tra layout e tipografia dell’applicazione. ## daisyUI Risorse correlate al sistema di design ### Element Plus Usa il modello Transfer, i filtri e le opzioni disabilitate effettivi di Element Plus per creare un ambiente di lavoro per la selezione dei moduli, con colori, dimensioni tipografiche e dimensioni dei controlli verificati. ### Flowbite Una composizione nativa con accordion e drawer di Flowbite 4, con alias verificati per i temi semantici, una checklist di preparazione persistente e un flusso accessibile, eseguibile in locale, per annotare i materiali. ### Fomantic UI Uno scaffale di lettura nativo Fomantic UI con valori del tema compilati e verificati, moduli jQuery per menu a discesa e valutazioni, supporto esplicito alla tastiera e una selezione breve persistente in locale. - [Riferimento per l’implementazione](https://daisyui.com/docs/themes/) - [Fonte](https://daisyui.com/docs/themes/) - [Fonte](https://daisyui.com/docs/layout-and-typography/) - [Leggi la specifica di supporto](https://daisyui.com/docs/install/) - [Leggi la specifica di supporto](https://daisyui.com/docs/colors/) - [Leggi la specifica di supporto](https://daisyui.com/docs/themes/) - [Leggi la specifica di supporto](https://daisyui.com/docs/layout-and-typography/) - [Leggi la specifica di supporto](https://daisyui.com/components/join/) - [Leggi la specifica di supporto](https://daisyui.com/components/validator/) - [Leggi la specifica di supporto](https://daisyui.com/components/modal/) - [Leggi la specifica di supporto](https://daisyui.com/components/card/) - [Riferimento del codice](https://daisyui.com/components/fieldset/) - [Riferimento del codice](https://daisyui.com/components/modal/) - [Riferimento del codice](https://daisyui.com/docs/layout-and-typography/) - [Riferimento del codice](https://daisyui.com/) - [Installazione Configurazione del plugin CSS.](https://daisyui.com/docs/install/) - [Temi Configurazione del tema e variabili semantiche.](https://daisyui.com/docs/themes/) - [Colori Abbinamento dei ruoli di sfondo e contenuto.](https://daisyui.com/docs/colors/) - [Range Classi del componente range nativo.](https://daisyui.com/components/range/) - [Validator Stili per la convalida del browser.](https://daisyui.com/components/validator/) - [Modal Composizione della finestra di dialogo nativa.](https://daisyui.com/components/modal/) - [Layout e tipografia Confini tra layout e tipografia dell’applicazione.](https://daisyui.com/docs/layout-and-typography/)