components / dimension

dimension.

architect's dimension line — witness lines, arrow / tick / dot caps, and the measurement sitting in a break in the rule. every part inherits currentColor, so recolouring the whole annotation is one prop. horizontal or vertical.

plan
installation
bunx @justin06lee/chrome@latest add dimension
props
nametypedefaultdescription
labelReactNode-the measurement, rendered in the break in the line.
orientation'horizontal' | 'vertical''horizontal'
cap'arrow' | 'tick' | 'dot' | 'none''arrow'
extensionnumber8half-length in px of the witness lines at each end; 0 removes them.
colorstring'rgba(255,255,255,0.35)'line, cap and label colour.
ariaLabelstring-accessible name. with it the annotation is exposed as an image; without it it is decorative and hidden.
labelClassNamestring-
classNamestring-