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 />
  )
}