shadcn.io is not affiliated with official shadcn/ui
Drawing Canvas Comments Block for React Aria
A sketch comment with an SVG stage you draw on with a pointer, stroke weight and tone groups, Undo, Redo and Clear, keyboard box and arrow stamps, and an Attach sketch button that puts the drawing inline in the posted comment.
Installation
Overview
Answer with a quick drawing instead of a paragraph, with this sketch comment for React with React Aria. A design chat in Doodlewick puts an SVG stage beside its thread: draw on the stage with a pointer, pick the next stroke's weight (Thin, Medium, Thick) and tone (Ink, Soft, Dashed) in two Toggle Groups, and walk the history with Undo, Redo and Clear. Drawing itself needs a pointer, so "Add a box" and "Add an arrow" drop stamps on the stage for keyboard users, and a hint says so. "Attach sketch" puts a thumbnail of the stage in the composer, and the posted comment draws that sketch inline next to its words; two earlier comments carry typed sketches. The stage is SVG rather than canvas, so it scales cleanly, ports to every framework and needs no drawing library. Built from Toggle Group, Button, Textarea, Field, Avatar, Badge, Shine Button and Guides. For design reviews, whiteboard chats and any thread where a sketch says it faster.
FAQ
How do I change the starting sketches?
Edit START at the top of the file. A sketch is a list of strokes, each an id, an SVG path d in a 320 by 200 box, a tone (ink, soft or dash) and a width w. The weights and tones the groups offer are in WEIGHTS and TONES. Drawing keeps at most 40 strokes.
What stays local, and how do I make it real?
Everything. Posting adds the comment and a copy of its strokes to a list in the page, and the status line says nothing was sent. To make it real, store the strokes as JSON with the comment (they are small) and draw them with the same Sketch component, or render a PNG on the server for email and previews. Validate the paths on the server before drawing them elsewhere.
How do I draw without a pointer?
Pointer drawing is the one thing a keyboard cannot do here, so the stage is paired with two stamps: Add a box and Add an arrow, each dropped at a new spot so they do not stack. Weight and tone apply to stamps too, and Undo, Redo and Clear work from the keyboard. Say so in your own product if sketches matter to your users: a text comment can always carry the same point.
How do Undo, Redo and Clear work?
Undo moves the last stroke to a redo list and Redo brings it back; a new stroke empties the redo list. Clear moves every stroke to the redo list in reverse, so Redo restores them one by one, and the status line says how many were cleared.
Is it accessible?
The stage is an image with a label that counts its strokes and a caption that explains the keyboard route; the toggle groups and buttons are named, Undo, Redo and Clear are disabled when they have nothing to do, and posted sketches have a text label with the author's name. The polite status line says each result. React Aria's ToggleGroup and Button follow the same names and keys.