Avatar

Avatar is a visual representation of a user or entity, displaying profile images with automatic fallbacks.

Avatars are compact, circular (or rounded) components that represent users, teams, or other entities throughout an interface. They automatically handle image loading states and provide accessible fallback content such as initials or icons when images fail to load or are unavailable. Avatars help users quickly identify people or entities in lists, headers, comments, and other interface elements.

Use avatars to add a personal touch to user interfaces and make it easier to scan and identify content associated with specific users or entities. Avatars should maintain consistent sizing within the same context to create visual harmony, though different sizes may be appropriate for different interface areas such as navigation bars versus detailed profile views.

Example

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"

export function AvatarDefault() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

Installation


npm install @strongtie/design-system

import { Avatar } from "@strongtie/design-system/avatar"

Components

This module exports the following components:

Avatar
AvatarImage
AvatarFallback

Props

All components accept standard HTML attributes and React props.

Examples

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"

export function AvatarDefault() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

With Fallback

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@strongtie/design-system/avatar"

export function AvatarWithFallback() {
  return (
    <Avatar>
      <AvatarImage src="#non-existent-url" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

avatar
avatar-fallback
avatar-image

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Alert Badge

On This Page

Example Installation Components Props Examples With Fallback Styling Classes Accessibility

Contribute