Avatars
xs
sm
md
lg
xl
2xl
OR
OR
OR
OR
OR
OR
OR
OR
OR
OR
OR
OR
Avatar
xs
sm
md
lg
xl
2xl
3xl
4xl
Verified tick
Online indicator
Sub-avatar
OR
OR
OR
OR
OR
OR
Add button
Base components
xs
sm
md
+5
+5
+5
Avatar group
sm
md
lg
xl
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Olivia Rhye
olivia@untitledui.com
Avatar label group
sm
md
lg
OR
OR
OR
Avatar profile photo
Documentation
Component variables

[Size] sm
[Size] md
[Size] lg
[Size] xl
[Size] 2xl

[Label] Primary text ID
[Label] Primary text visibility
[Label] Primary text
[Label] Secondary text ID
[Label] Secondary text visibility
[Label] Secondary text

[Avatar] ID
[Avatar] Image Visibility
[Avatar] Image
[Avatar] Icon Visibility
[Avatar] Icon
[Avatar] Text Visibility
[Avatar] Text
[Avatar] Contrast border

[Status icon] Verified
[Status icon] Online indicator
[Status icon] Sub-avatar

[Sub-avatar] ID
[Sub-avatar] Visibility
[Sub-avatar] Image Visibility
[Sub-avatar] Image
[Sub-avatar] Icon Visibility
[Sub-avatar] Icon
[Sub-avatar] Text Visibility
[Sub-avatar] Text
[Sub-avatar] Contrast border

Component variables