shadcn.io is not affiliated with official shadcn/ui
Image Annotation Comments Block for Solid
A design review window with a drawn checkout page, numbered pins placed by click or by arrow keys and Enter, a comment list that lights with its pin, Resolve and Reopen, and Post comment as the one primary.
Installation
Overview
Leave feedback on the exact spot of a design, with this annotated image window for Solid with Ark UI. There is no header above the window: its top bar holds the title, an Add pin Toggle and the one Shine Button, Post comment. The stage is a drawn greyscale checkout page (no photo) with four numbered pins; a solid pin is open and a hollow pin is resolved. With Add pin on, one button covers the stage: click where the problem is, or move a crosshair with the arrow keys (Shift for fine steps) and press Enter, and a composer opens at the top of the side list for the new pin. Pressing a pin outlines its comment and moves focus to it; pressing a comment's Pin button lights its pin; Resolve and Reopen change the pin's look and the list's word. The window's height never changes, and below the medium breakpoint the list sits under the stage. It is built from Toggle, Shine Button, Button, Textarea, Field, Avatar, Kbd and Guides, with a CSS entrance only. For design critique, QA of screenshots and any review of a picture.
FAQ
How do I use my own image and pins?
Replace the Drawing component with your image (an img filling the stage keeps the same pin maths) and edit PEOPLE and START. A pin has an id, who wrote it, an ISO at, its body, whether it is resolved and its x and y, which are percentages of the stage's width and height (not pixels), so a pin stays on the same detail at every size. Keep the stage's aspect ratio equal to the image's.
How do I place a pin without a mouse?
Turn on Add pin, press Tab to the stage (it is one button named "Place a pin on the design"), move the crosshair with the arrow keys (5 percent a step, 1 with Shift) and press Enter or Space. Escape turns Add pin off. The composer opens and takes focus, so you can write at once; Ctrl or ⌘ + Enter or the Post comment button posts it.
What stays local, and how do I make it real?
Everything. Posting adds a pin and a comment to the page and the status line says "Posted as pin 5. Nothing was sent." To make it real, store x, y and the image version with each comment (a pin on version 3 must not appear on version 4 without a decision), save from post, and let the server number the pins.
Is it accessible?
The drawing is hidden from screen readers and the facts are in text: every pin is a button named "Pin 2 by Oren Tamsin, open", its comment is in the list in the same order, and the stage has a description. The state of a pin is its fill and a word in the list, never colour. The side list is a labelled region, the composer has a label and a problem line that is always in place, and the status foot is present from load.