--- title: Use daisyUI from CDN desc: How to use daisyUI from a CDN? --- : 
<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>
{data.daisyuiCssSize}kB compressed
{#if onMount} \n`} /> {/if}

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" />
{#if onMount} `} /> {/if}
{#if $combinedUrl} 
<link href="{$combinedUrl}" rel="stylesheet" type="text/css" />
{:else}
Select the parts you want to use 👇
{/if}
{$totalSize}kB • {#if $totalSize < data.daisyuiCssSize} {((data.daisyuiCssSize - $totalSize) / data.daisyuiCssSize * 100).toFixed(1)}% smaller than daisyui.css {:else} daisyui.css is {Math.abs((($totalSize - data.daisyuiCssSize) / data.daisyuiCssSize * 100).toFixed(1))}% smaller {/if}
{#if onMount} `} /> {/if}

Choose parts

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

{#each data.groupedFiles as group}

{group.name}

{#each group.files as file} toggleUrl(file)} checked={file.checked} /> {/each}
{/each}
- Every part of daisyUI is [available on CDN](https://cdn.jsdelivr.net/npm/daisyui@5/) 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](/docs/colors/#how-to-use) 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.