CortexcnCortexcn
Components

Avatar

An image element with a fallback for representing the user.

CNCNCN
CNCNCN

Installation

Cortexcn
pnpm dlx shadcn@latest add @cortexcn/avatar

Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge } from "@/components/avatar";

Examples

Sizes

CNCNCN
CNCNCN
import { Avatar, AvatarFallback, AvatarImage } from "@/components/avatar"export function AvatarSizes() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-wrap items-center gap-2">        <Avatar size="sm">          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>      </div>      <div className="flex flex-wrap items-center gap-2">        <Avatar size="sm">          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar>          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarFallback>CN</AvatarFallback>        </Avatar>      </div>    </div>  )}

Badge

JZJZJZ
JZJZJZ
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/avatar"export function AvatarWithBadge() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-wrap items-center gap-2">        <Avatar size="sm">          <AvatarImage            src="https://github.com/jorgezreik.png"            alt="@jorgezreik"          />          <AvatarFallback>JZ</AvatarFallback>          <AvatarBadge />        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/jorgezreik.png"            alt="@jorgezreik"          />          <AvatarFallback>JZ</AvatarFallback>          <AvatarBadge />        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/jorgezreik.png"            alt="@jorgezreik"          />          <AvatarFallback>JZ</AvatarFallback>          <AvatarBadge />        </Avatar>      </div>      <div className="flex flex-wrap items-center gap-2">        <Avatar size="sm">          <AvatarFallback>JZ</AvatarFallback>          <AvatarBadge />        </Avatar>        <Avatar>          <AvatarFallback>JZ</AvatarFallback>          <AvatarBadge />        </Avatar>        <Avatar size="lg">          <AvatarFallback>JZ</AvatarFallback>          <AvatarBadge />        </Avatar>      </div>    </div>  )}

Badge with icon

PPPPPP
PPPPPP
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/avatar"import { CheckIcon, PlusIcon } from "lucide-react"export function AvatarWithBadgeIcon() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-wrap items-center gap-2">        <Avatar size="sm">          <AvatarImage            src="https://github.com/pranathip.png"            alt="@pranathip"          />          <AvatarFallback>PP</AvatarFallback>          <AvatarBadge>            <PlusIcon />          </AvatarBadge>        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/pranathip.png"            alt="@pranathip"          />          <AvatarFallback>PP</AvatarFallback>          <AvatarBadge>            <PlusIcon />          </AvatarBadge>        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/pranathip.png"            alt="@pranathip"          />          <AvatarFallback>PP</AvatarFallback>          <AvatarBadge>            <PlusIcon />          </AvatarBadge>        </Avatar>      </div>      <div className="flex flex-wrap items-center gap-2">        <Avatar size="sm">          <AvatarFallback>PP</AvatarFallback>          <AvatarBadge>            <CheckIcon />          </AvatarBadge>        </Avatar>        <Avatar>          <AvatarFallback>PP</AvatarFallback>          <AvatarBadge>            <CheckIcon />          </AvatarBadge>        </Avatar>        <Avatar size="lg">          <AvatarFallback>PP</AvatarFallback>          <AvatarBadge>            <CheckIcon />          </AvatarBadge>        </Avatar>      </div>    </div>  )}

Group

CNLRER
CNLRER
CNLRER
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/avatar"export function AvatarGroupExample() {  return (    <div className="flex flex-col gap-6">      <AvatarGroup>        <Avatar size="sm">          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="sm">          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar size="sm">          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>      </AvatarGroup>      <AvatarGroup>        <Avatar>          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>      </AvatarGroup>      <AvatarGroup>        <Avatar size="lg">          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>      </AvatarGroup>    </div>  )}

Group with count

CNLRER
+3
CNLRER
+3
CNLRER
+3
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "@/components/avatar"export function AvatarGroupWithCount() {  return (    <div className="flex flex-col gap-6">      <AvatarGroup>        <Avatar size="sm">          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="sm">          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar size="sm">          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>        <AvatarGroupCount>+3</AvatarGroupCount>      </AvatarGroup>      <AvatarGroup>        <Avatar>          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>        <AvatarGroupCount>+3</AvatarGroupCount>      </AvatarGroup>      <AvatarGroup>        <Avatar size="lg">          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>        <AvatarGroupCount>+3</AvatarGroupCount>      </AvatarGroup>    </div>  )}

Group with icon count

CNLRER
CNLRER
CNLRER
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "@/components/avatar"import { PlusIcon } from "lucide-react"export function AvatarGroupWithIconCount() {  return (    <div className="flex flex-col gap-6">      <AvatarGroup>        <Avatar size="sm">          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="sm">          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar size="sm">          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>        <AvatarGroupCount>          <PlusIcon />        </AvatarGroupCount>      </AvatarGroup>      <AvatarGroup>        <Avatar>          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>        <AvatarGroupCount>          <PlusIcon />        </AvatarGroupCount>      </AvatarGroup>      <AvatarGroup>        <Avatar size="lg">          <AvatarImage            src="https://github.com/shadcn.png"            alt="@shadcn"            className="grayscale"          />          <AvatarFallback>CN</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/maxleiter.png"            alt="@maxleiter"            className="grayscale"          />          <AvatarFallback>LR</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage            src="https://github.com/evilrabbit.png"            alt="@evilrabbit"            className="grayscale"          />          <AvatarFallback>ER</AvatarFallback>        </Avatar>        <AvatarGroupCount>          <PlusIcon />        </AvatarGroupCount>      </AvatarGroup>    </div>  )}

In empty

CNLRER
No Team Members
Invite your team to collaborate on this project.
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "@/components/avatar"import { Button } from "@/components/button"import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/empty"import { PlusIcon } from "lucide-react"export function AvatarInEmpty() {  return (    <div className="flex flex-col gap-6">      <Empty className="w-full flex-none border">        <EmptyHeader>          <EmptyMedia>            <AvatarGroup>              <Avatar size="lg">                <AvatarImage                  src="https://github.com/shadcn.png"                  alt="@shadcn"                  className="grayscale"                />                <AvatarFallback>CN</AvatarFallback>              </Avatar>              <Avatar size="lg">                <AvatarImage                  src="https://github.com/maxleiter.png"                  alt="@maxleiter"                  className="grayscale"                />                <AvatarFallback>LR</AvatarFallback>              </Avatar>              <Avatar size="lg">                <AvatarImage                  src="https://github.com/evilrabbit.png"                  alt="@evilrabbit"                  className="grayscale"                />                <AvatarFallback>ER</AvatarFallback>              </Avatar>              <AvatarGroupCount>                <PlusIcon />              </AvatarGroupCount>            </AvatarGroup>          </EmptyMedia>          <EmptyTitle>No Team Members</EmptyTitle>          <EmptyDescription>            Invite your team to collaborate on this project.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <Button>            <PlusIcon />            Invite Members          </Button>        </EmptyContent>      </Empty>    </div>  )}

Adapted from the shadcn/ui Avatar (MIT).