blackchalkv0.3.0
Components

Avatar

SketchAvatar — a hand-drawn initials avatar with a rough.js circle border.

SketchAvatar renders up to two initials inside a sketched circle — a low-fidelity identity placeholder that fits naturally alongside other hand-drawn components.

Default

import { SketchAvatar } from "blackchalk";<SketchAvatar initials="AL" />

Group

import { SketchAvatar } from "blackchalk";<div style={{ display: "flex", gap: 8 }}><SketchAvatar initials="AL" /><SketchAvatar initials="AT" /><SketchAvatar initials="GH" size={64} /></div>

Props

PropTypeDefault
initialsstring
sizenumber40

See it in the Storybook playground, or read the source.

On this page