blackchalkv0.3.0
Components

Cart Summary

SketchCartSummary — a hand-drawn order summary card with subtotal, tax, shipping, and a checkout button.

SketchCartSummary renders a rough.js-styled card listing order line items and a total, with an optional Checkout button. Pass only the rows you need — tax and shipping are optional and are omitted from the card when not provided.

Default

import { SketchCartSummary } from "blackchalk";<SketchCartSummarysubtotal="155.50"tax="12.44"shipping="8.00"total="175.94"/>

Subtotal only

When tax and shipping are omitted the divider sits directly above the total, keeping the card compact.

<SketchCartSummarysubtotal="42.50"total="42.50"/>

Props

PropTypeDefault
subtotalstring
taxstring
shippingstring
totalstring
onCheckout() => void

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

On this page