Deepyr Documentation

Avatar

Avatar([
  Container(
    [
      img(src: '...', alt: 'Avatar'),
    ],
    // Use deepyr utilities for all styling.
    style: [Size.w24, Effects.rounded, BgUtil.base300],
  ),
]),

Avatar in custom sizes

// Using deepyr's Size utility for width.
Avatar([Container([...], style: [Size.w24, Effects.rounded, BgUtil.base300])]),
Avatar([Container([...], style: [Size.w16, Effects.rounded, BgUtil.base300])]),
Avatar([Container([...], style: [Size.w12, Effects.rounded, BgUtil.base300])]),
Avatar([Container([...], style: [Size.w8, Effects.rounded, BgUtil.base300])]),

Avatar rounded

// Use the Effects utility for border-radius.
Avatar([Container([...], style: [Size.w24, Effects.roundedXl, BgUtil.base300])]),
Avatar([Container([...], style: [Size.w24, Effects.roundedFull, BgUtil.base300])]),

Avatar with mask

Masking is a separate DaisyUI component. It is applied here via `classes` as a deepyr `Mask` abstraction does not exist yet.

// Using `classes` for the mask effect is a temporary escape hatch.
// A `Mask` component or utility will be created in the future.
Avatar([
  Container([...], style: [Size.w24], classes: 'mask mask-heart bg-base-300'),
]),

Avatar group

AvatarGroup(
  [
    Avatar([Container([...], style: [Size.w12, BgUtil.base300])]),
    Avatar([Container([...], style: [Size.w12, BgUtil.base300])]),
    Avatar([Container([...], style: [Size.w12, BgUtil.base300])]),
    Avatar([Container([...], style: [Size.w12, BgUtil.base300])]),
  ],
  classes: '-space-x-6', // Negative space utility
)

Avatar group with counter

+99

AvatarGroup(
  [
    Avatar([...]),
    Avatar([...]),
    Avatar([...]),
    Avatar.placeholder([
      Container(
        [span([text('+99')])],
        style: [BgUtil.neutral, TextUtil.neutralContent, Size.w12],
      ),
    ]),
  ],
  classes: '-space-x-6',
)

Avatar with ring

Ring styles are applied via `classes` as they are general Tailwind utilities not yet abstracted in deepyr.

Avatar([
  Container(
    [img(src: '...')],
    style: [Size.w24, Effects.roundedFull],
    classes: 'ring-2 ring-primary ring-offset-base-100 ring-offset-2',
  ),
]),

Avatar with presence indicator

// Online
Avatar(
  [Container([...], style: [Size.w24, Effects.roundedFull, BgUtil.base300])],
  style: [Avatar.online],
),
// Offline
Avatar(
  [Container([...], style: [Size.w24, Effects.roundedFull, BgUtil.base300])],
  style: [Avatar.offline],
),

Avatar placeholder

D

AI

SY

UI

// Using the `toClasses()` extension on deepyr styles for primitive components.
Avatar.placeholder([
  Container(
    [
      span([text('D')], classes: [TextUtil.xl3].toClasses())
    ],
    style: [BgUtil.neutral, TextUtil.neutralContent, Size.w24, Effects.roundedFull],
  ),
]),