Theme

Avatar

display @dryui/ui

User profile image with fallback initials

userprofileimageinitials

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Avatar } from '@dryui/ui';
</script>

<Avatar src="/avatar.jpg" alt="Jane" fallback="JD" />

Import options

Root package

ts
import { Avatar } from '@dryui/ui'

Per-component subpath

ts
import { Avatar } from '@dryui/ui/avatar'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

With Image

Jane Doe
svelte
<Avatar
  src="https://i.pravatar.cc/150?img=1"
  alt="Jane Doe"
  size="md"
/>

With Initials Fallback

svelte
<Avatar fallback="JD" size="md" />
<Avatar fallback="AB" size="md" />
<Avatar fallback="XY" size="md" />

Sizes

svelte
<Avatar fallback="SM" size="sm" />
<Avatar fallback="MD" size="md" />
<Avatar fallback="LG" size="lg" />

Shape Variants

svelte
<Avatar fallback="CI" size="md" shape="circle" />
<Avatar fallback="SQ" size="md" shape="square" />

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Prop Type Default Required Bindable
src
string
— — —
alt
string
— — —
fallback
string
— — —
size
smmdlg
 'md' — —
shape
circlesquare
 'circle' — —
status
onlineofflinebusyaway
 — — —
badge
Snippet
— — —
children
Snippet
— — —

Forwards <span> attributes via rest props. Common examples: id, style, aria-label.