novixuiv0.1
Install

Components · v0.1 · Stable

Avatar

A person or workspace representation. Falls back gracefully from photo to initials, and communicates presence with a corner status dot.

Example

An avatar with photo, name-derived initials fallback, and an online status dot.

Installation

Add via the Nova CLI, then import.

tsx
npx @novix-ui/cli add avatar
tsx
import { Avatar, AvatarGroup } from "@novix-ui/react";

When to use

Use it for

  • Comment authorship, mentions, and activity feeds
  • Workspace and team switchers (squircle)
  • Presence in collaboration tools

Reach for something else

  • Product or file thumbnails — use a plain image with squircle radius
  • Brand logos on marketing — use a Card cover, not an Avatar

Playground

Playground

md
circle
subtle
online

Sizes

Shapes

Use squircle for workspaces, teams, and brand tiles. Circle stays reserved for people.

Status indicators

Groups

Overlap avatars for collaborators. The group announces the total count and shows a "+N" tile past the limit.

+2

API

Prop
Type
Default
Description
  • src
    string
    —
    Image URL. Falls back to initials on error.
  • name
    string
    —
    Full display name — used for initials and aria-label.
  • size
    "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
    "md"
    Diameter of the avatar.
  • shape
    "circle" | "squircle"
    "circle"
    Circle for people, squircle for brands and workspaces.
  • ring
    "none" | "subtle" | "strong" | "accent"
    "subtle"
    Border treatment. Use accent for active-user emphasis.
  • status
    "online" | "offline" | "busy" | "away"
    —
    Corner presence indicator.

Accessibility

  • Always pass name — it becomes the accessible label and initials fallback.
  • Status is exposed via a visually hidden sr-only string ("online", "busy", …).
  • Images have empty alt attributes because the surrounding label is authoritative.

Design guidelines

Choose one shape per surface

Mixing circle and squircle in the same list reads as inconsistency, not variety.

Cap the group at 5

Beyond that the density is noise. Use +N and defer detail to a hover popover.

Initials are a fallback, not a style

Prefer real photos or generated art. Initials are the safety net when neither exists.

Ring communicates state

Reserve the accent ring for the active or speaking user in real-time surfaces.

Common mistakes

  • Passing only an initial as name. Nova computes initials for you — pass the full display name.
  • Using an Avatar as a button. Wrap it in an IconButton or Link so the interactive semantics are correct.