Components
Avatar
An image element with a fallback for representing the user.
CNMKNX
Sizes
NXxxs
NXxs
NXsm
NXdefault
NXlg
NXxl
NX2xl
Installation
import { ... } from 'nooxit-design-system/components/avatar';Notes
Sizes follow the Figma kit: xxs 16px, xs 24px, sm 32px, default and
md 40px, lg 48px, xl 56px and 2xl 64px. The shape prop switches
between a circle and the rounded square, whose radius scales with the size.
Fallbacks use the orange-100 / orange-950 primitives directly, which is how the Figma kit paints them.
Source — src/components/avatar.tsx
Figma — Avatar in the Nooxit UI kit