Foundations

Avatar

Single Avatar component handles image, initials, and emoji avatars. Optional progress ring, status dot, vibrant aurora surface, and AvatarStack for groups.

Avatar is one component for every avatar need. Pass src for an image, name to derive two-letter initials (consistent hashed background per name), or emoji for the playful kid-friendly variant the rest of KidCash uses for chore-doer faces and goal mascots.

Optional progress (0-100) wraps the avatar in an animated SVG ring — perfect for "61% to your savings goal" displays. A status dot (online / busy / away / offline) uses the theme's success/warning/danger colors so the indicator matches the rest of the surface.

Pair with <AvatarStack> to render overlapping avatar groups with a "+N more" cap.

Live preview

🦄

Rafi

🐼

Kai

🦊

Sam

🦄

Rafi

🐼

Kai

🦊

Sam

🐝

Lia

Example

tsx

import { Avatar, AvatarStack } from '@kidcash/ui';

<Avatar emoji="🦄" size="lg" status="online" progress={75} />
<Avatar name="Elon Zito" size="md" />
<AvatarStack max={4}>
  <Avatar name="A" /><Avatar name="B" /><Avatar name="C" />
  <Avatar name="D" /><Avatar name="E" /><Avatar name="F" />
</AvatarStack>

Want all 27 in one place?

The home playground shows every component side-by-side. Or install @kidcash/ui and use Avatar in your own app.

← Previous

Pill

Skeleton