VibeUI

Avatar

Presence Avatar

An avatar with presence: the dot sits in a mask cut-out and each state differs in shape — colour alone fails for colour-blind users.

  • avatar
  • presence
  • status
  • badge

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/avatar-013?lang=en

Анна Реброва, в сети
Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "avatar-013" (Presence Avatar) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/avatar-013.json

Registry item: https://vibeui.ru/r/avatar-013.json
Installs to: components/vibeui/avatar-013.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
An avatar with presence: the dot sits in a mask cut-out and each state differs in shape — colour alone fails for colour-blind users.

An avatar with a presence indicator: the dot lives in a mask cut-out, the state differs in shape and is named in words for screen readers. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Avatar013 } from "@/components/vibeui/avatar-013"

<Avatar013 name="Anna Rebrova" status="online" size="md" />

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-avatar-013-* palette — do not swap it for your theme tokens
- the mask cut-out instead of a background-coloured ring — the gap must hold on any surface
- states differing in shape, not colour alone: colour fails for colour-blind users
- the hidden caption naming the state — without it the dot is mute
- aria-hidden on the initials: the name is already read out in the caption
- sizes bound to --vibeui-avatar-013-size instead of fixed pixels

## 6. You may change
- the name and the state through status
- the size through size
- state colours in the variables
- the wording of the state labels

## 7. Rules
- The offline dot is deliberately hollow: a filled grey circle reads as an active state.
- If the portrait is an image, put it in the same slot: the mask applies to the element, not the background.
- Do not replace the cut-out with a white ring: on a dark card it turns into a halo.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/avatar-013.json
https://vibeui.ru/r/avatar-013.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-avatar-013-*. Серверный: хуков нет. Зазор вокруг точки сделан mask-image по портрету, а не обводкой цветом фона — обводка выдаёт себя, как только фон меняется. Четыре состояния различаются формой (круг, кольцо, квадрат, пустой контур) и продублированы словом в скрытой подписи, поэтому точка не остаётся немой для скринридера. Размеры sm/md/lg переопределяют только --vibeui-avatar-013-size и --vibeui-avatar-013-dot.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Avatar013Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children"
> & {
  name?: string
  status?: "online" | "away" | "busy" | "offline"
  size?: "sm" | "md" | "lg"
}

// Идея компонента: аватар с состоянием присутствия. Точка сидит в вырезе, а не
// поверх портрета: вырез делает mask-image, поэтому между точкой и краем
// остаётся ровный зазор на любом фоне — обводка цветом фона выдаёт себя, как
// только фон меняется. Состояние различается формой: круг, кольцо, квадрат и
// пустой контур; цвет один не читается при дальтонизме. Само состояние
// названо словом в подписи для скринридера, иначе точка остаётся немой.
const STYLES = `
:where([data-vibeui-block="avatar-013"]){
--vibeui-avatar-013-size:2.75rem;
--vibeui-avatar-013-dot:0.75rem;
--vibeui-avatar-013-online:oklch(0.62 0.15 152);
--vibeui-avatar-013-away:oklch(0.75 0.14 75);
--vibeui-avatar-013-busy:oklch(0.6 0.19 25);
--vibeui-avatar-013-offline:oklch(0.7 0.014 265);
--vibeui-avatar-013-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="avatar-013"]{
position:relative;display:inline-flex;flex:none;
width:var(--vibeui-avatar-013-size);height:var(--vibeui-avatar-013-size);
font-family:var(--vibeui-avatar-013-font);
}
[data-vibeui-block="avatar-013"] [data-part="face"]{
display:flex;align-items:center;justify-content:center;
width:100%;height:100%;border-radius:9999px;
background:oklch(0.9 0.06 var(--vibeui-avatar-013-hue,265));
color:oklch(0.36 0.12 var(--vibeui-avatar-013-hue,265));
font-size:calc(var(--vibeui-avatar-013-size) * 0.36);font-weight:700;
/* Вырез маской: зазор вокруг точки остаётся ровным на любом фоне. */
mask-image:radial-gradient(circle calc(var(--vibeui-avatar-013-dot) * 0.72) at calc(100% - var(--vibeui-avatar-013-dot) * 0.42) calc(100% - var(--vibeui-avatar-013-dot) * 0.42),transparent 99%,#000 100%);
}
[data-vibeui-block="avatar-013"] [data-part="dot"]{
position:absolute;right:0;bottom:0;
width:var(--vibeui-avatar-013-dot);height:var(--vibeui-avatar-013-dot);
border-radius:9999px;background:var(--vibeui-avatar-013-offline);
}
/* Форма, а не только цвет: круг, кольцо, квадрат и пустой контур. */
[data-vibeui-block="avatar-013"][data-status="online"] [data-part="dot"]{background:var(--vibeui-avatar-013-online)}
[data-vibeui-block="avatar-013"][data-status="away"] [data-part="dot"]{
background:none;box-shadow:inset 0 0 0 3px var(--vibeui-avatar-013-away);
}
[data-vibeui-block="avatar-013"][data-status="busy"] [data-part="dot"]{
border-radius:0.1875rem;background:var(--vibeui-avatar-013-busy);
}
[data-vibeui-block="avatar-013"][data-status="offline"] [data-part="dot"]{
background:none;box-shadow:inset 0 0 0 2px var(--vibeui-avatar-013-offline);
}
[data-vibeui-block="avatar-013"][data-size="sm"]{--vibeui-avatar-013-size:2rem;--vibeui-avatar-013-dot:0.625rem}
[data-vibeui-block="avatar-013"][data-size="lg"]{--vibeui-avatar-013-size:3.5rem;--vibeui-avatar-013-dot:0.875rem}
[data-vibeui-block="avatar-013"] [data-part="sr"]{
position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="avatar-013"] *{animation:none!important;transition:none!important}}
`

const STATUS_LABEL = {
  online: "в сети",
  away: "отошёл",
  busy: "не беспокоить",
  offline: "не в сети",
} as const

function hue(name: string) {
  let hash = 2166136261
  for (const symbol of name) {
    hash ^= symbol.codePointAt(0)!
    hash = Math.imul(hash, 16777619)
  }
  return ((hash >>> 0) % 12) * 30
}

function initials(name: string) {
  return name
    .split(" ")
    .slice(0, 2)
    .map((part) => part.charAt(0).toUpperCase())
    .join("")
}

/**
 * Аватар с присутствием: точка в вырезе маски, состояние формой и словом.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Avatar013({
  name = "Анна Реброва",
  status = "online",
  size = "md",
  className,
  style,
  ...props
}: Avatar013Props) {
  const palette = {
    "--vibeui-avatar-013-hue": hue(name),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-avatar-013" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="avatar-013"
        data-status={status}
        data-size={size}
        className={className}
        style={palette}
      >
        <span data-part="face" aria-hidden="true">
          {initials(name)}
        </span>
        <span data-part="dot" aria-hidden="true" />
        {/* Состояние словом: точка сама по себе немая. */}
        <span data-part="sr">
          {name}, {STATUS_LABEL[status]}
        </span>
      </span>
    </>
  )
}