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.

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>

Try it live

← Back to the playground to see Avatar rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.

← Previous

Pill

Skeleton