Sketch padPro

A drawing surface for sketch to image: brush, eraser, rectangle and ellipse on B, X, R and C, filled or outlined shapes, a palette, line width, undo and redo, pen pressure and touch. Exports black ink on white paper at any size.

Markdown

On this page

ProA minute's sketch of a lighthouse for sketch to image. B, X, R and C switch tools; the thumbnail is the exported PNG.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/sketch-pad

Usage

tsx

import { SketchPad } from "@/components/ui/chatcn/pro/sketch-pad"

<SketchPad
  ref={sketch}
  aspectRatio={4 / 3}
  onChange={(change) => setReady(!change.empty)}
/>

const png = await sketch.current?.toBlob({ width: 1024 })

The sketch is a list of vector items in fractions of the canvas, so it exports at any size and reopens from defaultItems. On screen the paper and ink follow the theme; exports are what sketch models expect: black ink and the palette's colors on white paper (pass background: null for transparency). onChange fires after each finished mark; onDraw fires at most once a frame while drawing, for live previews like the realtime canvas. underlay puts a gray reference photo under the paper to trace over, and it is never exported.

Examples

States

ProEmpty, filled and outlined shapes, tracing over a reference photo and disabled.

Props

Prop	Type	Notes
`defaultItems`	`SketchItem[]`	Strokes and shapes to start from
`onChange`	`({ items, empty, toDataURL }) => void`	After every mark, undo, redo and clear
`onDraw`	`() => void`	While drawing, at most once a frame
`tool`, `defaultTool`, `onToolChange`	`"brush" \| "eraser" \| "rect" \| "ellipse"`	Default `brush`
`color`, `defaultColor`, `onColorChange`	`string`	A palette id or any CSS color. Default `ink`
`size`, `defaultSize`, `onSizeChange`	`number`	Line width in px on screen. Default 6
`fill`, `defaultFill`, `onFillChange`	`boolean`	Shapes filled or outlined
`palette`	`{ id, label, value, exportValue? }[]`	Default ink, gray and the six chart hues
`aspectRatio`, `exportWidth`	`number`	Default 4 / 3 and 1024 px
`underlay`	`{ src, opacity? }`	A reference photo to trace over, not exported
`disabled`, `toolbar`, `hint`, `sizeRange`, `label`, `footer`		Lock, hide the toolbar, the empty hint, the width range, the surface name, a slot below
`ref`	`{ toCanvas, toDataURL, toBlob, undo, redo, clear, getItems }`	Exports include a mark in progress

Keyboard

Key	Action
`B`, `X`, `R`, `C`	Brush, eraser, rectangle, ellipse (`E` and `O` work too)
`F`	Fill shapes or outline them
`1` to `9`	Pick a color from the palette
`[`, `]`	Thinner or thicker by 2 px; with `Shift`, by 8 px
`Shift` while dragging a shape	Square or circle
`Alt` while dragging a shape	Draw from the center
`⌘Z` or `Ctrl+Z`, `⇧⌘Z` or `Ctrl+Y`	Undo, redo
`Delete` on the canvas	Clear the sketch

Accessibility

The canvas is a focusable group named by label with its mark count, and a described hint lists the keys. Shortcuts never fire while you type in the footer.
Tools and colors are toggle groups with names; the width is a slider that announces pixels.
Drawing needs a pointer, pen or touch. Every setting and every history action works from the keyboard.
Undo, redo and clear are announced politely. Under forced colors the swatches keep a border.

Motion

Ink goes exactly where the pointer is, with no easing: strokes are smoothed in shape (curves through midpoints), never in time. Coalesced pointer events keep fast strokes smooth.
The brush ring follows the pointer with transforms only. The empty hint fades out in 150 ms when you start.
Nothing triggered by a key animates.