A CSS-native invitation studio that demonstrates daisyUI 5 semantic themes, paired content colors, radio-button joins, range controls, browser validation and a real dialog review step.
Official daisyUI 5.7.47 classes compiled with Tailwind CSS 4.3.3; application behavior is plain JavaScript. · Implementation reference
02
daisyUI Design System Design Reference
daisyUI 5.7.47, built with Tailwind CSS 4.3.3. The listed color and geometry values belong to the bundled Emerald theme; Lo-fi and Night intentionally define different values. Page typography and spacing are original choices using Tailwind-compatible dimensions.
daisyUI Design System Semantic Component Classes on Tailwind CSS
Semantic Component Classes on Tailwind CSS
daisyUI supplies component classes through a Tailwind plugin. In version five the setup lives in CSS: import tailwindcss, then declare the daisyui plugin and enabled themes. The specimen uses btn, card, fieldset, range, checkbox, join and modal rather than recreating those component appearances with bespoke selectors.
The plugin does not supply the application’s state management. The native inputs, browser validation, dialog methods and small JavaScript module make this invitation studio interactive. The distinction matters when selecting the library: it can work with several frameworks because its component layer is CSS, but a class name alone does not implement a server operation.
daisyUI Design System Pair Every Colored Surface with Its Content Role
Pair Every Colored Surface with Its Content Role
The invitation card uses bg-primary and text-primary-content together. The role strip repeats this pairing for secondary, accent and neutral. These are coordinated semantic roles, not a single fixed palette that must be copied into every component. Selecting another enabled theme changes the underlying variables without changing the card markup.
Emerald’s primary is a light green and its primary-content is a dark green. Using white text automatically on every primary background would ignore the theme’s intended content role. The specification table preserves the actual OKLCH values from the installed Emerald theme; it does not convert them into guessed hexadecimal brand colors.
daisyUI Design System Compile the Themes You Intend to Offer
Compile the Themes You Intend to Offer
The CSS plugin configuration enables Emerald as the default plus Lo-fi and Night. A select control changes data-theme on the document element. Only those compiled themes are offered in the menu; selecting a name that was never built would not conjure the corresponding CSS.
Themes also carry radius, field sizing, border and effect variables. Switching from Emerald to Lo-fi therefore changes more than a color swatch. To scope a theme to an embedded region, data-theme can be placed on that region instead of html. This standalone specimen deliberately applies it to the whole document.
Compile the intended themes in the daisyUI plugin block.
Use semantic background and content classes in the component markup.
Change data-theme and inspect controls, surfaces and text together.
daisyUI Design System Selector, Field and Box Radii Are Separate
Selector, Field and Box Radii Are Separate
Emerald defines radius-selector as one rem, radius-field as half a rem and radius-box as one rem. Its size-selector and size-field are quarter-rem base units used by component calculations. These values are not interchangeable with the spacing between page sections. The specification separates component geometry from the original workbench layout.
The surrounding page uses a system sans stack, a large editorial heading and a two-column composition. daisyUI does not require that headline hierarchy. At the original 700px breakpoint the page stacks the editor above the invitation; it preserves every input and action rather than hiding settings to fit a screenshot.
daisyUI Design System A Join Groups Real Radio Inputs
A Join Groups Real Radio Inputs
The format options are radio inputs with a shared name, join-item and btn classes. Selecting Studio session or Online circle changes the native checked state and the preview copy. A row of styled buttons without a persistent selection state would not represent this mutually exclusive choice as clearly.
Seats uses a native range input from four to twenty-four in steps of two. An output element mirrors its current number, while endpoint labels explain the intended gathering size. The materials control is a real checkbox. Its state changes the invitation footer rather than merely toggling the checkbox’s color.
daisyUI Design System CSS Validation Reflects Browser Constraints
CSS Validation Reflects Browser Constraints
The title input is required and has minimum and maximum length constraints. The validator class and validator-hint present the invalid state; the browser is still responsible for enforcing the native constraint. The form does not bypass validity through a generic click handler on the review button.
After ordinary validation passes, the submit handler trims the title and checks its meaningful length. This catches a string of spaces that can satisfy an untrimmed minlength. A custom validity message is cleared on the next input event so a corrected title can be submitted. User content is rendered through textContent, never inserted as HTML.
daisyUI Design System A Real Dialog Holds a Review Snapshot
A Real Dialog Holds a Review Snapshot
Review invitation copies the current title, format, seats and materials into a snapshot, then calls dialog.showModal. The modal class supplies daisyUI styling while the browser provides native dialog behavior. The heading labels the dialog through aria-labelledby, and Escape can close the review without saving.
Keep editing closes the dialog and leaves the form unchanged. Save local draft closes it and announces the exact snapshot in a status region. The message states that no invitations were sent. This is intentionally not a simulated email delivery success: the example has no recipient list or sending service.
daisyUI Design System Reset and Editing Have Observable Effects
Reset and Editing Have Observable Effects
Changing a field updates the card immediately and hides a previous saved notice. That prevents a stale success statement from appearing to describe a newer unsaved invitation. Reset waits until the browser has restored form defaults, then rebuilds the preview from those actual values. It leaves the independently selected theme in place.
The decorative three-shape artwork derives its fill from primary-content, so it responds to theme changes along with the typography. It is marked aria-hidden because it adds no information about seats or format. The visible preview title and footer carry the meaningful content.
Invalid input prevents review and identifies the title field.
Escape dismisses review without generating a saved result.
Editing after a save clears the old result while retaining the current theme.
daisyUI Design System A Small CSS Build with Explicit Source Discovery
A Small CSS Build with Explicit Source Discovery
The supplied setup uses Tailwind’s CLI, a local input.css and the three source files shown above. source(none) disables broad automatic scanning, and the explicit source directive points at the HTML containing the component and utility classes. This makes the example’s generated CSS depend on its actual markup.
The build output is combined with the original layout stylesheet; plain JavaScript handles the interaction. The standalone preview inlines the result and has no remote dependency. A Vite, Astro or React project can use its normal Tailwind integration instead, but should retain the enabled-theme list and ensure the class-bearing source files are included.
Primary backgrounds always pair with primary-content text.
The range remains a native input with min, max and step.
The dialog is opened through showModal, not a visual-only open class.
Local draft behavior
Live preview, stable review snapshot, theme selection and native validation.
javascript
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();
The viewport and native asset loading are included.
04
daisyUI Design System Agent Setup
Implementation Starting Point
Verified with daisyUI 5.7.47 and Tailwind CSS 4.3.3. The card artwork and page layout are original; component CSS and Emerald theme values are native.
css
/* npm install -D [email protected] @tailwindcss/[email protected][email protected] */
/* 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. */
A Prompt for Your Project
Agent Prompt
Use daisyUI 5.7.47 with the supplied Tailwind 4 build and the Emerald, Lo-fi and Night themes to reproduce the invitation studio. Pair semantic surface colors with their content roles. Preserve the joined native radio inputs, even-step seat range, materials checkbox and title validation. Review captures the current invitation in a native dialog; Save local draft confirms that snapshot, while later editing clears the message. Reset the form independently of the selected theme, and do not claim invitations were sent.
05
daisyUI Design System Sources and Scope
daisyUI 5.7.47 and Tailwind CSS 4.3.3. Emerald values are theme-specific. The local draft neither persists data nor sends invitations.
