🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Avatar

A visual representation of a user or entity using an image, icon, or initials.

Avatars are used to identify users, accounts, or entities throughout an interface. They typically display a profile picture, but gracefully fall back to initials or a placeholder when an image is unavailable or fails to load. Avatars are commonly found in user profiles, comment sections, navigation bars, and anywhere user identification is needed.

Built on top of Radix UI's Avatar primitive with automatic fallback handling and accessibility support.

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 extend Radix UI primitives. See the Radix UI documentation for all available 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.

Component Slots

The following data attributes are used to identify component parts:

avatar
avatar-fallback
avatar-image

Additional Classes

Other CSS classes used by this component:

avatar
avatar-fallback
avatar-image

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI avatar Documentation

Alert Badge

On This Page

Example Installation Components Props Examples With Fallback Styling Component Slots Additional Classes Accessibility Resources

Contribute