blackchalk
Components

Card

SketchCard — a hand-drawn surface, with an optional inverted variant.

SketchCard draws a rough.js border around its content. Pass inverted to render a dark, highlighted surface where the theme flips locally — content authored with the theme colors inverts automatically.

Default

import { SketchCard, SketchButton, SketchBadge } from "blackchalk";<SketchCard><SketchBadge>primitive</SketchBadge><SketchButton variant="primary">Action</SketchButton></SketchCard>

Inverted

<SketchCard inverted><SketchBadge variant="muted">themeable</SketchBadge><p>Tokens flip automatically.</p></SketchCard>

Props

PropTypeDefaultNotes
invertedbooleanfalseDark highlighted surface; content inverts.
fillstringSolid fill drawn behind content.

On this page