1. Components
  2. avatar

Avatar

Display a user image, initials, or fallback icon with sizing options.

Demo

User avatarJDABCD
import { Avatar } from "@/components/jk/avatar"

export const AvatarDemo = () => {
  return (
    <div className="flex items-center gap-4 justify-center flex-wrap">
      <Avatar 
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
        alt="User avatar"
        size="md"
      />
      <Avatar 
        text="JD"
        variant="solid"
        intent="solid-primary"
        size="md"
      />
      <Avatar 
        text="AB"
        variant="soft"
        intent="soft-primary"
        size="md"
      />
      <Avatar 
        text="CD"
        variant="outline"
        intent="outline-primary"
        size="md"
      />
    </div>
  )
}

Installation

terminal
npx shadcn@latest add @jk-ui/avatar

Sizes

User avatarxs
User avatarsm
User avatardefault
User avatarmd
User avatarlg
User avatarxl
import { Avatar } from "@/components/jk/avatar"

export const AvatarSizes = () => {
  return (
    <div className="flex items-center gap-4 justify-center flex-wrap">
      <div className="flex flex-col items-center gap-2">
        <Avatar 
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
          alt="User avatar"
          size="xs"
        />
        <span className="text-xs text-fg-muted">xs</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Avatar 
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
          alt="User avatar"
          size="sm"
        />
        <span className="text-xs text-fg-muted">sm</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Avatar 
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
          alt="User avatar"
          size="default"
        />
        <span className="text-xs text-fg-muted">default</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Avatar 
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
          alt="User avatar"
          size="md"
        />
        <span className="text-xs text-fg-muted">md</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Avatar 
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
          alt="User avatar"
          size="lg"
        />
        <span className="text-xs text-fg-muted">lg</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Avatar 
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
          alt="User avatar"
          size="xl"
        />
        <span className="text-xs text-fg-muted">xl</span>
      </div>
    </div>
  )
}

Placeholder Variants

JDABCDEFGH
JDABCDEFGH
JDABCDEFGH
import { Avatar } from "@/components/jk/avatar"

export const AvatarPlaceholder = () => {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-4 justify-center flex-wrap">
        <Avatar text="JD" variant="solid" intent="solid-primary" size="md" />
        <Avatar text="AB" variant="solid" intent="solid-secondary" size="md" />
        <Avatar text="CD" variant="solid" intent="solid-success" size="md" />
        <Avatar text="EF" variant="solid" intent="solid-danger" size="md" />
        <Avatar text="GH" variant="solid" intent="solid-gray" size="md" />
      </div>
      <div className="flex items-center gap-4 justify-center flex-wrap">
        <Avatar text="JD" variant="soft" intent="soft-primary" size="md" />
        <Avatar text="AB" variant="soft" intent="soft-secondary" size="md" />
        <Avatar text="CD" variant="soft" intent="soft-success" size="md" />
        <Avatar text="EF" variant="soft" intent="soft-danger" size="md" />
        <Avatar text="GH" variant="soft" size="md" />
      </div>
      <div className="flex items-center gap-4 justify-center flex-wrap">
        <Avatar text="JD" variant="outline" intent="outline-primary" size="md" />
        <Avatar text="AB" variant="outline" intent="outline-secondary" size="md" />
        <Avatar text="CD" variant="outline" intent="outline-success" size="md" />
        <Avatar text="EF" variant="outline" intent="outline-danger" size="md" />
        <Avatar text="GH" variant="outline" size="md" />
      </div>
    </div>
  )
}

Radius

User avatarnone
User avatardefault
User avatarcircle
JDnone
ABdefault
CDcircle
import { Avatar } from "@/components/jk/avatar"

export const AvatarRadius = () => {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-4 justify-center flex-wrap">
        <div className="flex flex-col items-center gap-2">
          <Avatar 
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
            alt="User avatar"
            size="md"
            radius="none"
          />
          <span className="text-xs text-fg-muted">none</span>
        </div>
        <div className="flex flex-col items-center gap-2">
          <Avatar 
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
            alt="User avatar"
            size="md"
            radius="default"
          />
          <span className="text-xs text-fg-muted">default</span>
        </div>
        <div className="flex flex-col items-center gap-2">
          <Avatar 
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
            alt="User avatar"
            size="md"
            radius="circle"
          />
          <span className="text-xs text-fg-muted">circle</span>
        </div>
      </div>
      <div className="flex items-center gap-4 justify-center flex-wrap">
        <div className="flex flex-col items-center gap-2">
          <Avatar 
            text="JD"
            variant="solid"
            intent="solid-primary"
            size="md"
            radius="none"
          />
          <span className="text-xs text-fg-muted">none</span>
        </div>
        <div className="flex flex-col items-center gap-2">
          <Avatar 
            text="AB"
            variant="solid"
            intent="solid-primary"
            size="md"
            radius="default"
          />
          <span className="text-xs text-fg-muted">default</span>
        </div>
        <div className="flex flex-col items-center gap-2">
          <Avatar 
            text="CD"
            variant="solid"
            intent="solid-primary"
            size="md"
            radius="circle"
          />
          <span className="text-xs text-fg-muted">circle</span>
        </div>
      </div>
    </div>
  )
}
Prev
Badge

Small label for counts or status indicators.

Next
On this page