Avatar

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<PxAvatar name="Ada Lovelace" size={44} shape="circle" />

Installation#

pnpm dlx shadcn@latest add @lumesec/px-avatar

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/px-avatar.json

Usage#

import { PxAvatar } from "@/components/lumesec/px-avatar";

export function Example() {
  return <PxAvatar name="Ada Lovelace" status="online" size={44} />;
}

Behaviour#

Initials on a pixel field coloured from the name, so the same person always gets the same colour. Status dots pulse when online, and hovering sends a ripple through the field.

API reference#

Props#

Also accepts every prop of <span> (React.ComponentProps<"span">), spread onto the root element.

Ref#

ref points at the root HTMLSpanElement.

Accessibility#

• The root has role="img" and an aria-label with the name, or the name and status, for example "Ada Lovelace, online".
• The canvas and the initials are aria-hidden, so the label is read once.
• Reduced motion: the online pulse and the hover ripple are off.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --card, --muted-foreground, --lumesec-success, --lumesec-warning and --destructive.

Notes#

• The hue is a hash of name, so the same name always gets the same colour in a given theme.
• Initials are text in the inherited sans font, sized to the avatar (36% of size for two letters, 42% for one), so accented letters render too. They are white, or black on light colours, whichever contrasts more.
• Overlap avatars in a stack with a negative margin, for example className="-ml-[10px]" on every avatar after the first.