Anchored Annotations
ProPlace comments on image coordinates, inspect numbered anchors, and resolve or reopen annotations from an accessible list.
- Resolved
pnpm dlx shadcn@latest add @latheui/anchored-annotationsPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Anchored Annotations is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
- lathe/interaction-math
- lathe/button
- lathe/slider
- lathe/textarea
- lathe/use-controllable-state
API reference
AnchoredAnnotations
| Prop | Type | Default | Description |
|---|---|---|---|
| image* (required) | { src: string; alt: string } | — | Image to annotate. Coordinates are percentages of its displayed area. |
| value / defaultValue | Annotation[] | [] (defaultValue) | Controlled or initial items with unique id, x, y, text and optional resolved flag. |
| onValueChange | (items: Annotation[]) => void | — | Receives additions and resolve/reopen changes. |
| disabled | boolean | false | Disable new comments, coordinate changes and resolution. Existing comments remain readable. |
| className | string | — | Classes for the section. |
Keyboard
- TabEnterSpace
- Navigate and activate numbered anchors, list comments and resolution controls.
- Tab
- Move through the enabled controls. Focus remains visible.
Accessibility
- Lathe controls expose accessible names, states and keyboard behavior. Layouts wrap at narrow widths and use semantic theme tokens.
- Numbered anchors and the comment list expose the same notes. New comments return focus to the textarea; resolution never removes the focused control.
Motion
- Selection and direct manipulation do not require animated movement.
- Shared Lathe controls retain their reduced-motion behavior.
Customization
Connect your own data
Use the typed props to connect application state. The source is installed into your project.
"use client"
import { AnchoredAnnotations } from "@/components/ui/anchored-annotations"
export default function AnnotationDemo() {
return <AnchoredAnnotations image={{ src: "/demo/photos/david-edelstein-n4dbvtudikw.webp", alt: "A pagoda with Mount Fuji behind the city" }} defaultValue={[{ id: "note-1", x: 32, y: 42, text: "Give the foreground a little more room." }, { id: "note-2", x: 72, y: 28, text: "The horizon feels right here.", resolved: true }]} />
}