Avatar

since 1.0

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

Example

CN

"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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Avatar
AvatarImage
AvatarFallback

Props

All components accept standard HTML attributes and React props.

Examples

With Fallback

CN

"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>
  )
}

Alert Badge

On This Page

Example Install Components Props Examples With Fallback