Components

Avatar

Identity disc with a graceful fallback: if the image errors, initials crossfade in so the swap never flashes.

MVTLPR

MVTLPR+2

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add avatar

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Avatar, AvatarGroup } from "@lumora/ui/components/avatar";
// or from the barrel:
import { Avatar, AvatarGroup } from "@lumora/ui";

Props worth knowing

name is required and drives the initials fallback, which crossfades in if src errors. size: xs–xl; shape: circle | square; status adds a positive/negative/away dot. AvatarGroup overlaps its children and collapses overflow past max into a +N chip. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.