Avatar
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add display/avatarPlain-CSS theme — no build step
npx astrocraft-ui add display/avatar --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add display/avatar --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/avatar --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/avatar --theme tailwind --bridge lumosLive demo
Avatar
AvatarGroup
"+3" read aloud is "plus three". The overflow takes the names of who is hidden and announces them, which is the same information the stack gives a sighted reader and nothing more.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `Avatar.astro` | `avatar` `avatar-image` | `data-size`: `sm` · `md` · `lg` | — | — |
| `AvatarGroup.astro` | `avatar-group` | `data-size`: `sm` · `md` · `lg` | — | — |
| `AvatarOverflow.astro` | `avatar-overflow` | `data-size`: `sm` · `md` · `lg` | — | — |
Source
What the command copies — 4 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"span"> & {
size?: "sm" | "md" | "lg";
src?: string;
alt?: string;
};
const { size = "md", src, alt = "", class: className, ...rest } = Astro.props;
---
<span class={className} data-slot="avatar" data-size={size} {...rest}>
{src ? <img src={src} alt={alt} data-slot="avatar-image" /> : <slot />}
</span>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & {
label?: string;
size?: "sm" | "md" | "lg";
};
const { label, size = "md", class: className, ...rest } = Astro.props;
---
<div
role={label ? "group" : undefined}
aria-label={label}
class={className}
data-slot="avatar-group"
data-size={size}
{...rest}
>
<slot />
</div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"span"> & {
names?: readonly string[];
count?: number;
label?: string;
size?: "sm" | "md" | "lg";
};
const { names = [], count, label, size = "md", class: className, ...rest } = Astro.props;
const hidden = count ?? names.length;
const name = label ?? (names.length > 0 ? `${hidden} more: ${names.join(", ")}` : `${hidden} more`);
---
<span
role="img"
aria-label={name}
class={className}
data-slot="avatar-overflow"
data-size={size}
data-count={hidden}
{...rest}
>
<span aria-hidden="true"><slot>+{hidden}</slot></span>
</span>
import Avatar from "./Avatar.astro";
import AvatarGroup from "./AvatarGroup.astro";
import AvatarOverflow from "./AvatarOverflow.astro";
export { Avatar, AvatarGroup, AvatarOverflow };
export default Avatar;
What you get
The component source, copied into your project by npx astrocraft-ui add display/avatar — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.