NeatAnnotation
Hand-drawn arrows, labels, and marker highlights for calling attention to inline content.
Installation
This component is primitive-agnostic — same source under both flavors.
Basic
The release is ready for reviewone final pass.
Eight directions
Direction names describe where the arrow points.
Color and highlight
Leave out note for a marker-only annotation. The rainbow tone pauses automatically when reduced motion is requested.
Compose annotations
login flowP2 bugassigned to Alice
Custom color and long notes
Go / no-go
The release candidateConfirm the release notes, migration guide, and rollback steps. is ready.
Accessibility
Notes are connected to their target with aria-describedby by default. Set decorative only when the annotation repeats information that is already available. For instructions, validation, or status, keep the same meaning in the surrounding visible content instead of relying on the drawing alone.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| note | string | — | Handwritten note beside the target. Omit it for a highlight-only marker. |
| direction | "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw" | "n" | Compass direction the arrow points toward the annotated target. |
| tone | "neutral" | "amber" | "blue" | "green" | "red" | "purple" | "rainbow" | "neutral" | Built-in color treatment shared by the marker, arrow, and note. |
| color | string | — | Any valid CSS color. Overrides the selected tone color. |
| highlight | boolean | true | Adds a soft marker behind the target. Disable it for pre-styled children. |
| decorative | boolean | false | Hides the note from assistive technology when it adds no meaning. |
| style | NeatAnnotationStyle | — | Native span styles plus typed CSS variables for fine position and typography tuning. |
Credits
Inspired by neat-annotations by Maxim Syabro (@syabro). The original source is MIT licensed; its copyright and license notice are preserved in the component source.