Components
Product Card
SketchProductCard — a hand-drawn e-commerce product card with image placeholder, title, price, and action button.
SketchProductCard composes a rough.js card with a sketched image placeholder,
product title, price tag, and a primary action button. Pass originalPrice to
show a sale line-through.
Default
import { SketchProductCard } from "blackchalk";<SketchProductCardtitle="Hand-Knit Wool Beanie"price="24.00"/>On Sale
import { SketchProductCard } from "blackchalk";<SketchProductCardtitle="Vintage Leather Satchel"price="89.00"originalPrice="129.00"/>Props
| Prop | Type | Default |
|---|---|---|
title | string | — |
price | string | — |
originalPrice | string | — |
actionLabel | string | "Add to Cart" |
onAction | () => void | — |
imageWidth | number | — |
imageHeight | number | 150 |
See it in the Storybook playground, or read the source.