JJabKit
Theme preference

AvatarBorder

1.0.0

Identity avatar wrapped in a token-colored conic ring that can spin or stay still.

npx jabkit add avatar-border

Component Data

ID
avatar-border
Category
atoms
Version
1.0.0
Added
2026-09-07
Type
component
Keyboard nav
No
Reduced motion
Yes
avatarborderidentityringatom

Dependencies

  • clsx
  • tailwind-merge

Examples

Default

<div className="bg-background p-8 text-foreground">
      <AvatarBorder
        alt={avatarBorderMocks.default.alt}
        fallback={avatarBorderMocks.default.fallback}
        size="lg"
        src={avatarBorderMocks.default.src}
      />
    </div>

Variants

<div className="flex flex-wrap items-end gap-6 bg-background p-8 text-foreground">
      <AvatarBorder
        alt={avatarBorderMocks.default.alt}
        fallback={avatarBorderMocks.default.fallback}
        size="sm"
        src={avatarBorderMocks.default.src}
      />
      <AvatarBorder
        alt={avatarBorderMocks.second.alt}
        fallback={avatarBorderMocks.second.fallback}
        src={avatarBorderMocks.second.src}
      />
      <AvatarBorder fallback={avatarBorderMocks.fallback.fallback} size="lg" />
      <AvatarBorder
        alt={avatarBorderMocks.default.alt}
        animate={false}
        fallback={avatarBorderMocks.default.fallback}
        size="lg"
        src={avatarBorderMocks.default.src}
      />
    </div>