Components
Compare Table
SketchCompareTable — a hand-drawn side-by-side product comparison table.
SketchCompareTable renders a rough.js-styled card with a header row of product
names and zebra-striped attribute rows beneath, separated by sketched dividers. It
fills the width of its container, so wrap it to size it.
Default
import { SketchCompareTable } from "blackchalk";<SketchCompareTableattributes={["Price", "Weight", "Battery", "Warranty"]}products={[ { name: "Basic", attributes: { Price: "$49", Weight: "220g", Battery: "8 hrs", Warranty: "1 year" }, }, { name: "Pro", attributes: { Price: "$99", Weight: "180g", Battery: "16 hrs", Warranty: "2 years" }, }, { name: "Max", attributes: { Price: "$149", Weight: "160g", Battery: "30 hrs", Warranty: "3 years" }, },]}/>Props
| Prop | Type | Default |
|---|---|---|
products | { name: string; attributes: Record<string, string> }[] | — |
attributes | string[] | — |
See it in the Storybook playground, or read the source.