Avatar
Radix avatar with a sketch circular or square frame. Falls back to initials, with an optional status dot.
<Avatar fallback="AL" shape="circle" status="online" roughness={1.5} />CLI install
npx doodleui-react add avatar
Usage
import { Avatar } from "doodleui-react";
<Avatar fallback="AL" alt="Ada Lovelace" status="online" />
Image loading and the fallback swap come from Radix. doodle-ui draws the frame and the status badge.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| src | string | undefined | Image URL. Falls back to initials if missing or loading. |
| fallback | ReactNode | undefined | Initials or placeholder shown without an image. |
| size | number | 40 | Width and height in pixels. |
| shape | "circle" | "square" | "circle" | Frame geometry. |
| status | "online" | "offline" | "busy" | undefined | Optional sketch status dot. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |