saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Avatar

Avatar

An image element with a fallback for representing the user.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/avatar

Usage

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from "@/components/ui/avatar"
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Fallback

CN
Avatar with fallback initials.

Sizes

Loading...
Multiple avatar sizes.

Avatar Group

Loading...
Overlapping avatar group.

API Reference

PropTypeDefaultDescription
size"default" | "sm" | "lg" | "xl""default"The size of the avatar.

On This Page

  • Installation
  • Usage
  • Examples
  • Fallback
  • Sizes
  • Avatar Group
  • API Reference
JDSCDP
CNCNCNCNCN
HR
SU
ER
AC
JL
+3