Status Avatar
A copy-paste avatars component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
AvatarsHTMLCSSany framework
S
Copy into your project
HTML
<div class="nuda-status-avatar">
<img class="nuda-status-avatar__img" src="avatar.jpg" alt="User name" />
<span class="nuda-status-avatar__ring" data-status="online"></span>
</div>CSS
/* Status Avatar
Avatar with animated status ring.
Customize: --avatar-size */
.nuda-status-avatar {
--avatar-size: 48px;
position: relative;
width: var(--avatar-size);
height: var(--avatar-size);
display: inline-flex;
}
.nuda-status-avatar__img {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
object-fit: cover;
}
.nuda-status-avatar__ring {
position: absolute;
bottom: 1px;
right: 1px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2.5px solid #111;
}
.nuda-status-avatar__ring[data-status="online"] {
background: #22c55e;
animation: nuda-status-ring-pulse 2s ease-out infinite;
}
.nuda-status-avatar__ring[data-status="away"] {
background: #f59e0b;
}
.nuda-status-avatar__ring[data-status="offline"] {
background: #6b7280;
}
@keyframes nuda-status-ring-pulse {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-status-avatar__ring[data-status="online"] { animation: none; }
}How to use Status Avatar
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.