Avatar

Data Display

User avatar with image and fallback initials support.

Image with fallbackInitialsSmall and largeRounded square

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

avatar.tsx

"use client";

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from "@dashboardpack/core/components/ui/avatar";

export default function AvatarExample() {
  return (
    <div className="flex flex-wrap items-center gap-5">
      <Avatar className="size-14">
        <AvatarImage src="/avatars/alex.svg" alt="Alex Morgan" />
        <AvatarFallback>AM</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <Avatar className="size-8">
        <AvatarFallback className="text-xs">SK</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarFallback className="rounded-lg">AP</AvatarFallback>
      </Avatar>
    </div>
  );
}

Usage

Use AvatarImage with AvatarFallback so the identity remains available if the image fails. Set size and shape through className on the root and fallback.

Import

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from "@dashboardpack/core/components/ui/avatar";

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Avatar props
Prop	Type / Default	Description
src / alt (AvatarImage)	`string` Default: —	Image URL and text alternative.
delayMs (AvatarFallback)	`number` Default: 0	Delay before rendering fallback content.
className	`string` Default: —	Customize root size and shape.

Build with these too

Badge Card