Use daisyUI from CDN

How to use daisyUI from a CDN?

You don't need to install anything. Just add one of these to the head tag of your HTML:
<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>
40kB compressed

Adding all themes

daisyui.css includes light and dark themes. For other themes, add themes.css file as well:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/combine/npm/daisyui@5/base/rootscrollgutter.css,npm/daisyui@5/base/scrollbar.css,npm/daisyui@5/base/rootcolor.css,npm/daisyui@5/base/rootscrolllock.css,npm/daisyui@5/base/reset.css,npm/daisyui@5/base/svg.css,npm/daisyui@5/base/properties.css,npm/daisyui@5/components/input.css,npm/daisyui@5/components/menu.css,npm/daisyui@5/components/toggle.css,npm/daisyui@5/components/checkbox.css,npm/daisyui@5/components/select.css,npm/daisyui@5/components/button.css,npm/daisyui@5/theme/light.css" rel="stylesheet" type="text/css" />

10.3kB 74.3% smaller than daisyui.css

Choose parts

Combined and compress into one CSS file, hosted on the fastest CDN

Base styles

Components and modifiers

Utility classes

Color utitliy classes

Themes

  • Every part of daisyUI is available on CDN as separate CSS files.
  • Some uncommon Tailwind CSS color utility classes for daisyUI colors are available on additional CSS files for CDN usage, see colors docs for more info.
  • daisyUI variant class names like is-drawer-open and is-drawer-close are not included in the CDN files because adding them for all class names will result in a very large file size.
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details