Phoenix + DaisyUI

Setup
Setup
Welcome
Welcome
Alert
Components Alert
Avatar
Components Avatar
Badge
Components Badge
Breadcrumbs
Components Breadcrumbs
Button
Components Button
Card
Components Card
Checkbox
Components Checkbox
Drawer
Components Drawer
Dropdown
Components Dropdown
Flash
Components Flash
Header
Components Header
Hero
Components Hero
Indicator
Components Indicator
Input
Components Input
Join
Components Join
List
Components List
Loading
Components Loading
Menu
Components Menu
Modal
Components Modal
Navbar
Components Navbar
Pagination
Components Pagination
Radio
Components Radio
Range
Components Range
Select
Components Select
Simple Form
Components Simple Form
Stat
Components Stat
Swap
Components Swap
Table
Components Table
Text Input
Components Text Input
Textarea
Components Textarea
Toggle
Components Toggle
Tooltip
Components Tooltip
Core Components
Examples Core Components

Avatar

<.avatar >
  <div class="w-24 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>

Avatar in custom sizes Open in playground

<.avatar >
  <div class="w-32 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>
<.avatar >
  <div class="w-20 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>
<.avatar >
  <div class="w-16 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>
<.avatar >
  <div class="w-8 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>

Avatar rounded Open in playground

<.avatar >
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>

Avatar with mask Open in playground

<.avatar >
  <div class="mask mask-squircle w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>
<.avatar >
  <div class="mask mask-hexagon w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>
<.avatar >
  <div class="mask mask-triangle w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>

Avatar group Open in playground

<.avatar_group class="-space-x-6 rtl:space-x-reverse">
  <.avatar >
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </.avatar>
  <.avatar >
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </.avatar>
  <.avatar >
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </.avatar>
  <.avatar >
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </.avatar>
</.avatar_group>

Avatar group with counter Open in playground

+99

<.avatar_group class="-space-x-6 rtl:space-x-reverse">
  <.avatar >
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </.avatar>
  <.avatar >
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </.avatar>
  <.avatar >
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </.avatar>
  <.avatar placeholder>
    <div class="bg-neutral text-neutral-content w-12">
      <span>+99</span>
    </div>
  </.avatar>
</.avatar_group>

Avatar with ring Open in playground

<.avatar >
  <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>

Avatar with presence indicator Open in playground

<.avatar online>
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>
<.avatar offline>
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</.avatar>

Avatar placeholder Open in playground

<.avatar placeholder>
  <div class="bg-neutral text-neutral-content w-24 rounded-full">
    <span class="text-3xl">D</span>
  </div>
</.avatar>
<.avatar online placeholder>
  <div class="bg-neutral text-neutral-content w-16 rounded-full">
    <span class="text-xl">AI</span>
  </div>
</.avatar>
<.avatar placeholder>
  <div class="bg-neutral text-neutral-content w-12 rounded-full">
    <span>SY</span>
  </div>
</.avatar>
<.avatar placeholder>
  <div class="bg-neutral text-neutral-content w-8 rounded-full">
    <span class="text-xs">UI</span>
  </div>
</.avatar>