Avatar

Used to represent user profile picture or initials.

import { Avatar } from '@/components/avatar'

function Example() {
  return (
    <Avatar initials="FB" src="https://i.pravatar.cc/300" alt="avatar" />
  )
}

Examples

Sizes

Use the size prop to change the size of the avatar:

import { Avatar } from '@/components/avatar'

function Example() {
  return (
    <div className="flex items-center gap-2">
      <Avatar size="xs" src="https://i.pravatar.cc/300" />
      <Avatar size="sm" src="https://i.pravatar.cc/300" />
      <Avatar size="md" src="https://i.pravatar.cc/300" />
      <Avatar size="lg" src="https://i.pravatar.cc/300" />
      <Avatar size="xl" src="https://i.pravatar.cc/300" />
      <Avatar size="2xl" src="https://i.pravatar.cc/300" />
    </div>
  )
}

Initials

Use the initials prop to render an avatar with initials:

import { Avatar } from '@/components/avatar'

function Example() {
  return (
    <Avatar initials="ak" />
  )
}

Square avatars

Use the square prop to render a square avatar:

import { Avatar } from '@/components/avatar'

function Example() {
  return (
    <Avatar initials="ak" square />
  )
}

Group avatars

Use utility classes to overlap a list of avatars and style them as a group:

import { Avatar } from '@/components/avatar'

function Example() {
  return (
    <div className="flex items-center -space-x-2">
      <Avatar
        src="https://i.pravatar.cc/300?img=1"
        className="ring-2 ring-white dark:ring-[#191918]"
      />
      <Avatar
        src="https://i.pravatar.cc/300?img=2"
        className="ring-2 ring-white dark:ring-[#191918]"
      />
      <Avatar
        src="https://i.pravatar.cc/300?img=3"
        className="ring-2 ring-white dark:ring-[#191918]"
      />
    </div>
  )
}