Astryx Avatar

Component 1

About

Avatar represents a person or team with a profile photo, initials, or a default icon, from Meta's Astryx design system. Use it in comment headers, contact lists, chat messages, user cards, and anywhere you need to identify someone visually. Includes AvatarStatusDot and AvatarGroup with overflow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Avatar to your project and fits it to your theme.

Code

How Astryx Avatar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import Avatar from '@/components/ui/astryx-avatar';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {HStack, VStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

export default function AvatarFallbackChain() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <VStack gap={4}>
          <HStack gap={3} vAlign="center">
            <Avatar
              src="https://cdn.21st.dev/assets/mirror/18/18bff2332eb645532e92157cd5a45a977d2d16aca77fc87c5161543e7c75591a.png"
              name="Daniela Gimenez"
              size="medium"
            />
            <Text type="supporting">Valid src</Text>
          </HStack>
          <HStack gap={3} vAlign="center">
            <Avatar
              src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
              fallbackSrc="https://cdn.21st.dev/assets/mirror/74/74fb215c113474ff2a1e33bb87d75b11e4434e3c9c5c614e9dd084951d7b5147.png"
              name="Invalid User"
              size="medium"
            />
            <Text type="supporting">Invalid src, valid fallbackSrc</Text>
          </HStack>
          <HStack gap={3} vAlign="center">
            <Avatar
              src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
              fallbackSrc="https://lookaside.facebook.com/assets/astryx/does-not-exist-fallback.jpg"
              name="Test User"
              size="medium"
            />
            <Text type="supporting">Both invalid, has name</Text>
          </HStack>
          <HStack gap={3} vAlign="center">
            <Avatar
              src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
              size="medium"
            />
            <Text type="supporting">All invalid, no name</Text>
          </HStack>
        </VStack>
      </div>
    </Theme>
  );
}