DaisyUI - Kompletny Przewodnik po Bibliotece Komponentów dla Tailwind CSS

# npm
npm install -D daisyui@latest

# pnpm
pnpm add -D daisyui@latest

# yarn
yarn add -D daisyui@latest

# bun
bun add -D daisyui@latest

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,html}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui"),
  ],
  daisyui: {
    themes: ["light", "dark", "cupcake", "cyberpunk", "valentine", "forest"],
    darkTheme: "dark",
    base: true,
    styled: true,
    utils: true,
    prefix: "",
    logs: true,
    themeRoot: ":root",
  },
}

// tailwind.config.js (v4)
import daisyui from "daisyui"

export default {
  plugins: [daisyui],
  daisyui: {
    themes: ["light", "dark"],
  },
}

<!-- Sprawdź czy DaisyUI działa -->
<button class="btn btn-primary">
  Jeśli ten przycisk jest stylizowany, DaisyUI działa!
</button>

<!-- Podstawowe warianty -->
<button class="btn">Default</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>

<!-- Stany -->
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>

<!-- Rozmiary -->
<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Medium (default)</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Extra small</button>

<!-- Modyfikatory -->
<button class="btn btn-wide">Wide</button>
<button class="btn btn-block">Block (full width)</button>
<button class="btn btn-circle">○</button>
<button class="btn btn-square">□</button>

<!-- Stany interaktywne -->
<button class="btn btn-outline btn-primary">Outline</button>
<button class="btn btn-active">Active</button>
<button class="btn btn-disabled">Disabled</button>
<button class="btn loading">Loading...</button>

<!-- Z ikoną -->
<button class="btn btn-primary gap-2">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
  </svg>
  Settings
</button>

<!-- Podstawowa karta -->
<div class="card w-96 bg-base-100 shadow-xl">
  <figure>
    <img src="https://picsum.photos/400/200" alt="Image" />
  </figure>
  <div class="card-body">
    <h2 class="card-title">Tytuł karty</h2>
    <p>Opis karty z dodatkowym tekstem wyjaśniającym zawartość.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Kup teraz</button>
    </div>
  </div>
</div>

<!-- Karta kompaktowa -->
<div class="card card-compact w-96 bg-base-100 shadow-xl">
  <figure><img src="image.jpg" alt="Photo" /></figure>
  <div class="card-body">
    <h2 class="card-title">Kompaktowa!</h2>
    <p>Mniej paddingu</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary btn-sm">Akcja</button>
    </div>
  </div>
</div>

<!-- Karta z badge -->
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">
      Produkt
      <div class="badge badge-secondary">NEW</div>
    </h2>
    <p>Opis produktu</p>
    <div class="card-actions justify-end">
      <div class="badge badge-outline">Fashion</div>
      <div class="badge badge-outline">Products</div>
    </div>
  </div>
</div>

<!-- Karta pozioma -->
<div class="card card-side bg-base-100 shadow-xl">
  <figure><img src="image.jpg" alt="Movie" class="w-48" /></figure>
  <div class="card-body">
    <h2 class="card-title">Film</h2>
    <p>Opis filmu</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Oglądaj</button>
    </div>
  </div>
</div>

<!-- Karta z overlay -->
<div class="card w-96 bg-base-100 shadow-xl image-full">
  <figure><img src="background.jpg" alt="Background" /></figure>
  <div class="card-body">
    <h2 class="card-title">Tytuł</h2>
    <p>Tekst na tle obrazu</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Akcja</button>
    </div>
  </div>
</div>

<!-- Modal z przyciskiem -->
<button class="btn" onclick="my_modal_1.showModal()">Otwórz Modal</button>

<dialog id="my_modal_1" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Witaj!</h3>
    <p class="py-4">Naciśnij ESC lub kliknij przycisk, aby zamknąć</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Zamknij</button>
      </form>
    </div>
  </div>
</dialog>

<!-- Modal z backdrop do zamknięcia -->
<button class="btn" onclick="my_modal_2.showModal()">Modal z backdrop</button>

<dialog id="my_modal_2" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Modal</h3>
    <p class="py-4">Kliknij poza modal aby zamknąć</p>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

<!-- Modal z akcjami -->
<dialog id="my_modal_3" class="modal">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 class="font-bold text-lg">Potwierdź akcję</h3>
    <p class="py-4">Czy na pewno chcesz kontynuować?</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn btn-ghost">Anuluj</button>
        <button class="btn btn-primary">Potwierdź</button>
      </form>
    </div>
  </div>
</dialog>

<!-- Prosty navbar -->
<div class="navbar bg-base-100">
  <a class="btn btn-ghost text-xl">daisyUI</a>
</div>

<!-- Navbar z menu -->
<div class="navbar bg-base-100">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">Logo</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Link 1</a></li>
      <li><a>Link 2</a></li>
    </ul>
  </div>
</div>

<!-- Navbar z wyszukiwaniem i awatarem -->
<div class="navbar bg-base-100">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">Logo</a>
  </div>
  <div class="flex-none gap-2">
    <div class="form-control">
      <input type="text" placeholder="Szukaj" class="input input-bordered w-24 md:w-auto" />
    </div>
    <div class="dropdown dropdown-end">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
        <div class="w-10 rounded-full">
          <img alt="Avatar" src="avatar.jpg" />
        </div>
      </div>
      <ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
        <li><a>Profil</a></li>
        <li><a>Ustawienia</a></li>
        <li><a>Wyloguj</a></li>
      </ul>
    </div>
  </div>
</div>

<!-- Navbar z ikonami -->
<div class="navbar bg-neutral text-neutral-content">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <button class="btn btn-square btn-ghost">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
      </svg>
    </button>
  </div>
</div>

<!-- Input -->
<div class="form-control w-full max-w-xs">
  <label class="label">
    <span class="label-text">Email</span>
    <span class="label-text-alt">Wymagane</span>
  </label>
  <input type="email" placeholder="email@example.com" class="input input-bordered w-full max-w-xs" />
  <label class="label">
    <span class="label-text-alt">Wprowadź poprawny email</span>
  </label>
</div>

<!-- Input z wariantami -->
<input type="text" placeholder="Default" class="input input-bordered w-full max-w-xs" />
<input type="text" placeholder="Primary" class="input input-bordered input-primary w-full max-w-xs" />
<input type="text" placeholder="Secondary" class="input input-bordered input-secondary w-full max-w-xs" />
<input type="text" placeholder="Accent" class="input input-bordered input-accent w-full max-w-xs" />
<input type="text" placeholder="Info" class="input input-bordered input-info w-full max-w-xs" />
<input type="text" placeholder="Success" class="input input-bordered input-success w-full max-w-xs" />
<input type="text" placeholder="Warning" class="input input-bordered input-warning w-full max-w-xs" />
<input type="text" placeholder="Error" class="input input-bordered input-error w-full max-w-xs" />

<!-- Rozmiary -->
<input type="text" placeholder="Large" class="input input-bordered input-lg" />
<input type="text" placeholder="Medium" class="input input-bordered input-md" />
<input type="text" placeholder="Small" class="input input-bordered input-sm" />
<input type="text" placeholder="XS" class="input input-bordered input-xs" />

<!-- Select -->
<select class="select select-bordered w-full max-w-xs">
  <option disabled selected>Wybierz opcję</option>
  <option>Opcja 1</option>
  <option>Opcja 2</option>
  <option>Opcja 3</option>
</select>

<!-- Textarea -->
<textarea class="textarea textarea-bordered" placeholder="Twoja wiadomość"></textarea>

<!-- Checkbox -->
<div class="form-control">
  <label class="label cursor-pointer">
    <span class="label-text">Zapamiętaj mnie</span>
    <input type="checkbox" checked class="checkbox checkbox-primary" />
  </label>
</div>

<!-- Radio -->
<div class="form-control">
  <label class="label cursor-pointer">
    <span class="label-text">Opcja A</span>
    <input type="radio" name="radio-1" class="radio radio-primary" checked />
  </label>
  <label class="label cursor-pointer">
    <span class="label-text">Opcja B</span>
    <input type="radio" name="radio-1" class="radio radio-primary" />
  </label>
</div>

<!-- Toggle -->
<input type="checkbox" class="toggle toggle-primary" checked />

<!-- Range -->
<input type="range" min="0" max="100" value="40" class="range range-primary" />

<!-- Rating -->
<div class="rating">
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" checked />
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" />
</div>

<!-- File input -->
<input type="file" class="file-input file-input-bordered w-full max-w-xs" />

<!-- Podstawowa tabela -->
<div class="overflow-x-auto">
  <table class="table">
    <thead>
      <tr>
        <th></th>
        <th>Imię</th>
        <th>Stanowisko</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>Jan Kowalski</td>
        <td>Developer</td>
        <td>jan@example.com</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Anna Nowak</td>
        <td>Designer</td>
        <td>anna@example.com</td>
      </tr>
      <tr>
        <th>3</th>
        <td>Piotr Wiśniewski</td>
        <td>Manager</td>
        <td>piotr@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Tabela zebra -->
<table class="table table-zebra">
  <!-- ... -->
</table>

<!-- Tabela z hover -->
<table class="table">
  <tbody>
    <tr class="hover">
      <td>Row with hover effect</td>
    </tr>
  </tbody>
</table>

<!-- Tabela aktywna -->
<table class="table">
  <tbody>
    <tr class="active">
      <td>Active row (highlighted)</td>
    </tr>
  </tbody>
</table>

<!-- Kompaktowa tabela -->
<table class="table table-xs">
  <!-- Mniejszy padding -->
</table>

<!-- Alert podstawowy -->
<div class="alert">
  <span>12 nieprzeczytanych wiadomości.</span>
</div>

<!-- Alert info -->
<div class="alert alert-info">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  </svg>
  <span>Nowa aktualizacja oprogramowania jest dostępna.</span>
</div>

<!-- Alert success -->
<div class="alert alert-success">
  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span>Twoje zamówienie zostało potwierdzone!</span>
</div>

<!-- Alert warning -->
<div class="alert alert-warning">
  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
  </svg>
  <span>Uwaga: Twoja sesja wygasa za 5 minut!</span>
</div>

<!-- Alert error -->
<div class="alert alert-error">
  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span>Błąd! Coś poszło nie tak.</span>
</div>

<!-- Alert z akcjami -->
<div class="alert">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  </svg>
  <span>Mamy nowe warunki użytkowania.</span>
  <div>
    <button class="btn btn-sm">Odmów</button>
    <button class="btn btn-sm btn-primary">Akceptuj</button>
  </div>
</div>

<!-- Toast -->
<div class="toast toast-end">
  <div class="alert alert-info">
    <span>Nowa wiadomość.</span>
  </div>
</div>

<!-- Badge -->
<span class="badge">default</span>
<span class="badge badge-neutral">neutral</span>
<span class="badge badge-primary">primary</span>
<span class="badge badge-secondary">secondary</span>
<span class="badge badge-accent">accent</span>
<span class="badge badge-ghost">ghost</span>

<!-- Badge outline -->
<span class="badge badge-outline">outline</span>
<span class="badge badge-outline badge-primary">primary</span>

<!-- Badge rozmiary -->
<span class="badge badge-lg">Large</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-xs">Tiny</span>

<!-- Badge w przycisku -->
<button class="btn gap-2">
  Inbox
  <span class="badge badge-sm">+99</span>
</button>

<!-- Indicator -->
<div class="indicator">
  <span class="indicator-item badge badge-primary">new</span>
  <div class="grid w-32 h-32 bg-base-300 place-items-center">content</div>
</div>

<!-- Indicator na awatarze -->
<div class="indicator">
  <span class="indicator-item badge badge-secondary">online</span>
  <div class="avatar">
    <div class="w-12 rounded">
      <img src="avatar.jpg" alt="Avatar" />
    </div>
  </div>
</div>

<!-- Collapse -->
<div class="collapse bg-base-200">
  <input type="checkbox" />
  <div class="collapse-title text-xl font-medium">
    Kliknij, aby rozwinąć
  </div>
  <div class="collapse-content">
    <p>Ukryta treść pojawia się po kliknięciu.</p>
  </div>
</div>

<!-- Collapse z arrow -->
<div class="collapse collapse-arrow bg-base-200">
  <input type="checkbox" />
  <div class="collapse-title text-xl font-medium">
    Kliknij, aby rozwinąć
  </div>
  <div class="collapse-content">
    <p>Treść z ikoną strzałki.</p>
  </div>
</div>

<!-- Collapse z plus -->
<div class="collapse collapse-plus bg-base-200">
  <input type="checkbox" />
  <div class="collapse-title text-xl font-medium">
    Kliknij, aby rozwinąć
  </div>
  <div class="collapse-content">
    <p>Treść z ikoną plus/minus.</p>
  </div>
</div>

<!-- Accordion (radio - tylko jeden otwarty) -->
<div class="join join-vertical w-full">
  <div class="collapse collapse-arrow join-item border border-base-300">
    <input type="radio" name="my-accordion-1" checked />
    <div class="collapse-title text-xl font-medium">
      Pytanie 1
    </div>
    <div class="collapse-content">
      <p>Odpowiedź na pytanie 1.</p>
    </div>
  </div>
  <div class="collapse collapse-arrow join-item border border-base-300">
    <input type="radio" name="my-accordion-1" />
    <div class="collapse-title text-xl font-medium">
      Pytanie 2
    </div>
    <div class="collapse-content">
      <p>Odpowiedź na pytanie 2.</p>
    </div>
  </div>
  <div class="collapse collapse-arrow join-item border border-base-300">
    <input type="radio" name="my-accordion-1" />
    <div class="collapse-title text-xl font-medium">
      Pytanie 3
    </div>
    <div class="collapse-content">
      <p>Odpowiedź na pytanie 3.</p>
    </div>
  </div>
</div>

<!-- Podstawowe tabs -->
<div role="tablist" class="tabs tabs-bordered">
  <a role="tab" class="tab">Tab 1</a>
  <a role="tab" class="tab tab-active">Tab 2</a>
  <a role="tab" class="tab">Tab 3</a>
</div>

<!-- Tabs lifted -->
<div role="tablist" class="tabs tabs-lifted">
  <a role="tab" class="tab">Tab 1</a>
  <a role="tab" class="tab tab-active">Tab 2</a>
  <a role="tab" class="tab">Tab 3</a>
</div>

<!-- Tabs boxed -->
<div role="tablist" class="tabs tabs-boxed">
  <a role="tab" class="tab">Tab 1</a>
  <a role="tab" class="tab tab-active">Tab 2</a>
  <a role="tab" class="tab">Tab 3</a>
</div>

<!-- Tabs z zawartością (radio) -->
<div role="tablist" class="tabs tabs-lifted">
  <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Tab 1" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    Zawartość Tab 1
  </div>

  <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Tab 2" checked />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    Zawartość Tab 2
  </div>

  <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Tab 3" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    Zawartość Tab 3
  </div>
</div>

<!-- Progress bar -->
<progress class="progress w-56" value="0" max="100"></progress>
<progress class="progress w-56" value="25" max="100"></progress>
<progress class="progress w-56" value="50" max="100"></progress>
<progress class="progress w-56" value="75" max="100"></progress>
<progress class="progress w-56" value="100" max="100"></progress>

<!-- Progress z kolorami -->
<progress class="progress progress-primary w-56" value="40" max="100"></progress>
<progress class="progress progress-secondary w-56" value="60" max="100"></progress>
<progress class="progress progress-accent w-56" value="80" max="100"></progress>
<progress class="progress progress-info w-56" value="45" max="100"></progress>
<progress class="progress progress-success w-56" value="70" max="100"></progress>
<progress class="progress progress-warning w-56" value="55" max="100"></progress>
<progress class="progress progress-error w-56" value="30" max="100"></progress>

<!-- Progress nieokreślony (animowany) -->
<progress class="progress w-56"></progress>

<!-- Radial progress -->
<div class="radial-progress" style="--value:70;">70%</div>
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;">70%</div>
<div class="radial-progress bg-primary text-primary-content border-4 border-primary" style="--value:70;">70%</div>

<!-- Loading spinner -->
<span class="loading loading-spinner loading-xs"></span>
<span class="loading loading-spinner loading-sm"></span>
<span class="loading loading-spinner loading-md"></span>
<span class="loading loading-spinner loading-lg"></span>

<!-- Loading dots -->
<span class="loading loading-dots loading-lg"></span>

<!-- Loading ring -->
<span class="loading loading-ring loading-lg"></span>

<!-- Loading ball -->
<span class="loading loading-ball loading-lg"></span>

<!-- Loading bars -->
<span class="loading loading-bars loading-lg"></span>

<!-- Loading infinity -->
<span class="loading loading-infinity loading-lg"></span>

<!-- Podstawowy avatar -->
<div class="avatar">
  <div class="w-24 rounded">
    <img src="avatar.jpg" alt="Avatar" />
  </div>
</div>

<!-- Avatar zaokrąglony -->
<div class="avatar">
  <div class="w-24 rounded-full">
    <img src="avatar.jpg" alt="Avatar" />
  </div>
</div>

<!-- Avatar z mask -->
<div class="avatar">
  <div class="w-24 mask mask-squircle">
    <img src="avatar.jpg" alt="Avatar" />
  </div>
</div>

<div class="avatar">
  <div class="w-24 mask mask-hexagon">
    <img src="avatar.jpg" alt="Avatar" />
  </div>
</div>

<!-- Avatar z ringiem -->
<div class="avatar">
  <div class="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
    <img src="avatar.jpg" alt="Avatar" />
  </div>
</div>

<!-- Avatar z online indicator -->
<div class="avatar online">
  <div class="w-24 rounded-full">
    <img src="avatar.jpg" alt="Avatar" />
  </div>
</div>

<div class="avatar offline">
  <div class="w-24 rounded-full">
    <img src="avatar.jpg" alt="Avatar" />
  </div>
</div>

<!-- Avatar placeholder -->
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-24">
    <span class="text-3xl">JK</span>
  </div>
</div>

<!-- Avatar group -->
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <div class="avatar">
    <div class="w-12">
      <img src="avatar1.jpg" alt="Avatar 1" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="avatar2.jpg" alt="Avatar 2" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="avatar3.jpg" alt="Avatar 3" />
    </div>
  </div>
  <div class="avatar placeholder">
    <div class="w-12 bg-neutral text-neutral-content">
      <span>+99</span>
    </div>
  </div>
</div>

// tailwind.config.js
module.exports = {
  daisyui: {
    themes: [
      "light",
      "dark",
      "cupcake",
      "bumblebee",
      "emerald",
      "corporate",
      "synthwave",
      "retro",
      "cyberpunk",
      "valentine",
      "halloween",
      "garden",
      "forest",
      "aqua",
      "lofi",
      "pastel",
      "fantasy",
      "wireframe",
      "black",
      "luxury",
      "dracula",
      "cmyk",
      "autumn",
      "business",
      "acid",
      "lemonade",
      "night",
      "coffee",
      "winter",
      "dim",
      "nord",
      "sunset",
    ],
  },
}

<!-- W HTML -->
<html data-theme="cyberpunk">

<!-- Lub na konkretnym elemencie -->
<div data-theme="dark" class="bg-base-200 p-4">
  Ten div używa dark theme
</div>

// React/Next.js przykład
import { useState, useEffect } from 'react'

export function ThemeSwitcher() {
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme)
    localStorage.setItem('theme', theme)
  }, [theme])

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      setTheme(savedTheme)
    }
  }, [])

  return (
    <select
      className="select select-bordered"
      value={theme}
      onChange={(e) => setTheme(e.target.value)}
    >
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="cupcake">Cupcake</option>
      <option value="cyberpunk">Cyberpunk</option>
      <option value="synthwave">Synthwave</option>
    </select>
  )
}