import CodeRender from '../../CodeRender'
 
 ### Default Usage

<CodeRender code={`<div class="avatar">
  <div class="w-24 rounded">
    <img src="/pig.jpg" />
  </div>
</div>`}></CodeRender>

```html
<div class="avatar">
  <div class="w-24 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
```

### Sizes

<CodeRender code={`<div class="avatar">
  <div class="w-32 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-20 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-16 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-8 rounded">
    <img src="/pig.jpg" />
  </div>
</div>`}></CodeRender>

```html
<div class="avatar">
  <div class="w-32 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-20 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-16 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-8 rounded">
    <img src="/pig.jpg" />
  </div>
</div>
```

### Avatar with mask

<CodeRender code={`<div class="avatar">
  <div class="w-24 mask mask-squircle">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-hexagon">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-triangle">
    <img src="/pig.jpg" />
  </div>
</div>
`}></CodeRender>

```html
<div class="avatar">
  <div class="w-24 mask mask-squircle">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-hexagon">
    <img src="/pig.jpg" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-triangle">
    <img src="/pig.jpg" />
  </div>
</div>
```



### Avatar group

<CodeRender code={`<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
</div>`}></CodeRender>

```html
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
  <div class="avatar">
    <div class="w-12">
      <img src="/pig.jpg" />
    </div>
  </div>
</div>
```

### Avatar placeholder

<CodeRender code={`<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-24">
    <span class="text-3xl">Y</span>
  </div>
</div> 
<div class="avatar online placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-16">
    <span class="text-xl">Q</span>
  </div>
</div> 
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-12">
    <span>M</span>
  </div>
</div> 
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-8">
    <span class="text-xs">UI</span>
  </div>
</div>`}></CodeRender>

```html
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-24">
    <span class="text-3xl">Y</span>
  </div>
</div> 
<div class="avatar online placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-16">
    <span class="text-xl">Q</span>
  </div>
</div> 
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-12">
    <span>M</span>
  </div>
</div> 
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-8">
    <span class="text-xs">UI</span>
  </div>
</div>
```