Presence Avatars
Who’s online: avatars rearrange as status changes. Pro · Animated components › Lists and people
Who is here: online people in a lively stack, offline ones greyed out and smaller beside it. When a status changes, the avatar slides over to its new group and the rest close ranks (a layout animation driven by the new users, no render per frame).
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add presence-avatarsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { PresenceAvatars } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
users * | readonly PresenceUser[] | People with their current status — from your WebSocket, SSE or polling; the component only shows it. | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar size of the online group; offline avatars are a step smaller. |
showCounts | boolean | true | Show the "N online / N offline" captions (default true). |
max | number | Avatars shown per group; the rest fold into a "+N" chip (default: all). | |
animation | 'spring' | 'none' | 'spring' | spring (default): avatars slide between the groups when someone comes or goes; none: instant. |
labels | Partial<PresenceAvatarsLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
- Todo List — Checklist with a wavy strike-through on done items
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Radial Menu — Ring-shaped context menu on right-click
Previous: Todo List · Next: Radial Menu · All Animated components