blackchalkv0.3.0
Components

Vertical Divider

SketchVerticalDivider — a hand-drawn vertical rule for separating inline or flex items.

SketchVerticalDivider draws a rough.js vertical line that stretches to the height of its flex container — use it between items in a horizontal row to match the sketch aesthetic.

Default

import { SketchVerticalDivider } from "blackchalk";<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}><span>Left</span><SketchVerticalDivider style={{ height: 24 }} /><span>Right</span></div>

Props

PropTypeDefault
styleCSSProperties

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

On this page