Write, Run & Share daisyUI code online using OneCompiler's daisyUI online editor for free. It's one of the robust, feature-rich online editors for daisyUI. Getting started with the OneCompiler's daisyUI online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'daisyUI' and start writing code to learn and test online without worrying about tedious process of installation.
daisyUI is a component layer for Tailwind CSS. It adds class names like btn, card, and alert so you get styled components without writing the utility classes yourself, while Tailwind utilities stay available for fine-tuning. It also ships themes you switch with a single attribute.
Load Tailwind and the daisyUI stylesheet, then use the component classes in your markup.
<head>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" />
</head>
btn is the base class. Add a color modifier such as btn-primary, and size or style modifiers like btn-sm or btn-outline.
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline btn-secondary">Outline</button>
<button class="btn btn-sm btn-accent">Small accent</button>
card plus card-body builds a content block. card-actions aligns the buttons.
<div class="card w-80 bg-base-200 shadow">
<div class="card-body">
<h2 class="card-title">Plan</h2>
<p>What's included in the plan.</p>
<div class="card-actions justify-end">
<button class="btn btn-primary btn-sm">Choose</button>
</div>
</div>
</div>
daisyUI covers a wide set of components with the same naming style.
<div class="alert alert-success">Saved successfully</div>
<span class="badge badge-primary">New</span>
<input type="text" placeholder="Type here" class="input input-bordered" />
<progress class="progress progress-primary w-56" value="60" max="100"></progress>
Set data-theme on any element (often <html>) to recolor everything inside it. Built-in themes include light, dark, cupcake, and dracula.
<html data-theme="dark">
<!-- components here use the dark theme -->
</html>
daisyUI components are just classes, so Tailwind utilities layer on top for spacing, layout, and overrides.
<button class="btn btn-primary w-full mt-4">Full width</button>
<div class="card bg-base-200 p-2 md:p-6">...</div>