ContextQMD
Back to Daisyui

daisyUI Logo

packages/docs/src/routes/(routes)/brand/+page.md

5.5.1910.8 KB
Original Source
<script> import Translate from "$components/Translate.svelte" </script> <div class="text-center"> </div>

daisyUI Name

daisyUI name must be written as "daisyUI" with a lowercase "d" and uppercase "UI" with no spaces.

  • ✅ Correct: daisyUI
  • ❌ Incorrect: DaisyUI, Daisy UI, daisy ui, DaisyUi

Exception: daisyUI package stays lower case daisyui as it is a package name and must follow coding conventions.

Brand agreement

  • Do not use the daisyUI name or logo in a way that suggests your product or service is officially affiliated with, endorsed by, or produced by daisyUI.
  • When naming your projects, tools, or services, use "for daisyUI" or "compatible with daisyUI" instead of including "daisyUI" at the beginning of your product name.

Examples

✅ Correct usage:

  • Color Picker for daisyUI
  • Theme Generator made with daisyUI
  • My Project: Built with daisyUI
  • Unofficial daisyUI datepicker

❌ Incorrect usage:

  • daisyUI Color Picker
  • daisyUI Laravel
  • Official daisyUI Extension
  • daisyUI Pro Components

You can download the daisyUI logo in SVG and PNG formats for appropriate usage.
Please do not modify, distort, or alter the logo.

<div class="grid sm:grid-cols-2 gap-4 mb-4"> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-white rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-black">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/mark-static.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/mark-compressed.svg">Minified SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/daisyui-logo-2000.png">PNG</a>
</div>
</div> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-black rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-white">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/mark-static.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/mark-compressed.svg">Minified SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/daisyui-logo-2000.png">PNG</a>
</div>
</div> </div> <div class="grid sm:grid-cols-2 gap-4 mb-4"> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-white rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-black">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/type-dark.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/type-dark-compressed.svg">Minified SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/type-dark.png">PNG</a>
</div>
</div> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-black rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-white">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/type-light.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/type-light-compressed.svg">Minified SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/type-light.png">PNG</a>
</div>
</div> </div> <div class="grid sm:grid-cols-2 gap-4 mb-4"> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-white rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-black">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/horizontal-dark.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/horizontal-dark-compressed.svg">Minified SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/horizontal-dark.png">PNG</a>
</div>
</div> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-black rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-white">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/horizontal-light.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/horizontal-light-compressed.svg">Minified SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/horizontal-light.png">PNG</a>
</div>
</div> </div> <div class="grid sm:grid-cols-2 gap-4 mb-4"> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-white rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-black">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/mark-rotating.svg">SVG</a>
</div>
</div> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-black rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-white">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/mark-rotating.svg">SVG</a>
</div>
</div> </div> <div class="text-center mx-2"> </div> <div class="grid sm:grid-cols-2 gap-4 mb-4"> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-white rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-black">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/horizontal-mono-dark.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/horizontal-mono-dark.png">PNG</a>
</div>
</div> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-black rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-white">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/horizontal-mono-light.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/horizontal-mono-light.png">PNG</a>
</div>
</div> </div> <div class="grid sm:grid-cols-2 gap-4 mb-4"> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-white rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-black">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/mark-mono-dark.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-black" href="https://img.daisyui.com/images/daisyui/mark-mono-dark.png">PNG</a>
</div>
</div> <div class="m-2 outline-2 outline-offset-4 outline-base-content/5 bg-black rounded-box py-12 px-4 flex flex-col gap-6 items-center"> 
<div class="flex gap-2 sm:gap-4 text-[0.6875rem] opacity-70 text-white">
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/mark-mono-light.svg">SVG</a>
  <a target="_blank" rel="noopener, noreferrer" class="no-underline hover:underline text-white" href="https://img.daisyui.com/images/daisyui/mark-mono-light.png">PNG</a>
</div>
</div> </div>