Avatar

Avatar image with automatic initials fallback. Supports five sizes, two shapes, an optional status indicator dot, and live-presence animation.

Import

tsx

import { Avatar } from '@velocityuikit/velocityui'

Preview

Sizes

With status

Animated status

Shapes

Image with fallback

Props

Prop	Type	Default	Description
src	`string`	—	URL of the avatar image.
alt	`string`	—	Alt text for the image.
name	`string`	—	Full name used to generate initials when no image is available.
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Controls the overall dimensions of the avatar.
shape	`'circle' \| 'square'`	`'circle'`	Border radius shape.
status	`'online' \| 'away' \| 'offline'`	—	Shows a colored status dot in the bottom-right corner.
statusAnimation	`'none' \| 'pulse'`	`'none'`	Adds a pulsing live-status ring when a status indicator is shown.

Examples

Sizes

tsx

import { Avatar } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
      <Avatar name="Alice Brown" size="xs" />
      <Avatar name="Alice Brown" size="sm" />
      <Avatar name="Alice Brown" size="md" />
      <Avatar name="Alice Brown" size="lg" />
      <Avatar name="Alice Brown" size="xl" />
    </div>
  )
}

With status

tsx

import { Avatar } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
      <Avatar name="Sam Lee" status="online" />
      <Avatar name="Jordan Kim" status="away" />
      <Avatar name="Alex Ng" status="offline" />
    </div>
  )
}

Animated live status

tsx

import { Avatar } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
      <Avatar name="Sam Lee" status="online" statusAnimation="pulse" />
      <Avatar name="Jordan Kim" status="away" statusAnimation="pulse" />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */