Avatar

User avatar component with images or initials, sizes, and square/round styles.

import { Avatar } from "@/components/ui/preskok-ui/avatar"

export function AvatarPreskokDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-6">
      <Avatar src="/avatars/01.png" alt="Alex Johnson" />
      <Avatar src="/avatars/02.png" alt="Jamie Rivera" size="lg" />
      <Avatar initials="AJ" alt="Alex Johnson" isSquare />
      <Avatar initials="JR" alt="Jamie Rivera" size="xl" />
    </div>
  )
}

Installation


pnpm
npm
yarn
bun
pnpm dlx @preskok-org/ui@latest add avatar

Usage

import { Avatar } from "@/registry/preskok/ui/preskok-ui/avatar"
 
export function AvatarDemo() {
  return (
    <div className="flex gap-4">
      <Avatar src="/avatars/01.png" alt="Alex Johnson" />
      <Avatar initials="AJ" alt="Alex Johnson" />
      <Avatar initials="JR" alt="Jamie Rivera" isSquare size="lg" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`src`	`string \| null`	`null`	Image source
`initials`	`string`	-	Initials fallback
`alt`	`string`	`""`	Accessible alt text
`isSquare`	`boolean`	`false`	Square vs. circular shape
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Avatar size
`className`	`string`	-	Additional CSS classes

Disclosure Carousel

On This Page

Installation Usage Props