arca-ui

Avatar

Flat by default for nested UIs. Use default variant sparingly when the avatar is standalone.

Elevation

Three elevation levels for different contexts. Avatar is a small component, so strong shadow + lift is not available.

Default

Medium shadow. For standalone profile heroes.

AC
Alex Chen
@alexchen_design

Outlined

Border only, no shadow. Most common use for general UIs.

OL
Outlined Avatar
Clean border for standard interfaces.

Flat

No shadow. For nesting inside elevated containers.

FL
Team Member
Inside an elevated container, keep avatars flat.

Sizes

SM

Small

MD

Default

LG

Large

XL

Extra Large

Animated Entrance

Avatars appear with a spring animation on load.

SA
MI
EM
JA
OL

Special Hover Effects

SC

Scale

RO

Rotate

RI

Ring

CL

Colorize

BR

Brighten

Circular Avatars

Add rounded-full for classic circular profiles.

CH

Default

CO

Outlined

CF

Flat

Status Indicators

ON

Online

BU

Busy

AW

Away

OF

Offline

VE

Verified

With Badges

NO3

Notifications

PR

Premium

NW

Featured

Avatar Groups

Overlapping Stack

U1U2U3U4+5

With Add Button

U1U2U3

Team Members

T1T2T3T4T5

5 team members

Working on this project

Fallback States

JDABKLMNOP

Colored fallbacks for when images fail to load or aren't provided.

User Card Examples

SA

Sarah Miller

5 min ago

This looks amazing! Love the paper-cut aesthetic you've created here.

JA

James Wilson

Wants to connect