HTMLDrop.

daisyUI starter

daisyUI 5 components on Tailwind CSS v4, with themes. No build step.

Open in editor Free. No install, no sign-up.
  • daisyui
  • @tailwindcss/browser

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>daisyUI starter</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <div class="navbar bg-base-100 shadow-sm">
      <a class="btn btn-ghost text-xl" href="https://daisyui.com" target="_blank">
        <svg class="h-7 w-7" viewBox="0 0 24 24" role="img" aria-label="daisyUI">
          <path
            fill="#5a0ef8"
            d="M12 0C7.828.001 4.396 3.433 4.395 7.605c.001 4.172 3.433 7.604 7.605 7.605 4.172-.001 7.604-3.433 7.605-7.605C19.604 3.433 16.172.001 12 0Zm0 .286c4.016 0 7.32 3.304 7.32 7.32-.001 4.015-3.305 7.318-7.32 7.318-4.015 0-7.319-3.304-7.32-7.319 0-4.016 3.304-7.32 7.32-7.32zm0 4.04a3.294 3.294 0 0 0-3.279 3.279v.001A3.296 3.296 0 0 0 12 10.884a3.294 3.294 0 0 0 3.279-3.279A3.294 3.294 0 0 0 12 4.326ZM8.34 16.681h-.008a3.67 3.67 0 0 0-3.652 3.652v.015A3.67 3.67 0 0 0 8.332 24h7.336a3.67 3.67 0 0 0 3.652-3.652v-.016a3.67 3.67 0 0 0-3.652-3.652h-.008Z"
          />
        </svg>
        daisyUI
      </a>
      <div class="ml-auto flex items-center gap-2">
        <select id="theme" class="select select-sm w-32" aria-label="Theme">
          <option value="light">Light</option>
          <option value="dark">Dark</option>
          <option value="cupcake">Cupcake</option>
          <option value="synthwave">Synthwave</option>
          <option value="retro">Retro</option>
        </select>
      </div>
    </div>

    <div class="hero bg-base-200 min-h-[60vh]">
      <div class="hero-content text-center">
        <div class="max-w-md">
          <h1 class="text-5xl font-bold">Hello daisyUI</h1>
          <p class="py-6">
            Component classes like <code class="kbd kbd-sm">btn</code> and
            <code class="kbd kbd-sm">card</code> on top of Tailwind. Pick a theme above to restyle
            everything.
          </p>
          <button class="btn btn-primary" onclick="hello.showModal()">Get started</button>
        </div>
      </div>
    </div>

    <div class="mx-auto grid max-w-4xl gap-6 p-8 md:grid-cols-3">
      <div class="card bg-base-100 shadow-md">
        <div class="card-body">
          <h2 class="card-title">Buttons <span class="badge badge-secondary">new</span></h2>
          <div class="flex flex-wrap gap-2">
            <button class="btn btn-sm">Default</button
            ><button class="btn btn-sm btn-accent">Accent</button>
          </div>
        </div>
      </div>
      <div class="card bg-base-100 shadow-md">
        <div class="card-body">
          <h2 class="card-title">Progress</h2>
          <progress class="progress progress-primary" value="70" max="100"></progress>
          <input
            type="range"
            class="range range-xs range-secondary"
            value="40"
            aria-label="Level"
          />
        </div>
      </div>
      <div class="card bg-base-100 shadow-md">
        <div class="card-body">
          <h2 class="card-title">Toggles</h2>
          <label class="label"
            ><input type="checkbox" class="toggle toggle-primary" checked /> Notifications</label
          >
          <label class="label"
            ><input type="checkbox" class="checkbox checkbox-accent" /> Remember me</label
          >
        </div>
      </div>
    </div>

    <dialog id="hello" class="modal">
      <div class="modal-box">
        <h3 class="text-lg font-bold">Hello!</h3>
        <p class="py-4">This modal is a native dialog, styled by daisyUI.</p>
        <div class="modal-action">
          <form method="dialog"><button class="btn">Close</button></form>
        </div>
      </div>
    </dialog>
  </body>
</html>

/* daisyUI and Tailwind handle the styling. Add your own CSS here. */

// Themes are a data-theme attribute on <html>.
const select = document.getElementById("theme");
select.addEventListener("change", () => {
  document.documentElement.dataset.theme = select.value;
});

Questions

Can I use daisyUI without a build step?

Yes. This starter loads daisyUI straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a daisyUI project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my daisyUI demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits