Skip to content
ArcadiaDesign

Img

An image that fades in once it has decoded, instead of painting top to bottom.

import { Img } from "@arcadia/ui"
A gradient

TSX

An img that stays transparent until the picture has decoded, then fades in over --duration-fast, so an image never paints top to bottom as it arrives. It changes opacity only: give it a size or an aspect ratio, so the text around it is already where it will be. Every attribute of the element passes through.

alt works as on any image. An image that fails to load shows at once, so the browser's broken-image box and its alt text are never hidden. Reduced motion shows the picture as soon as it has decoded, without the fade.

Img

rootStyle
RootStyle
Typed StyleX override: where the image sits.
className
string
A product's hook class for its own rules (being retired: new code sets rootStyle).
style
ComponentPropsWithRef<"img">["style"]
Inline geometry the image needs from data (an aspect ratio).

Rest props go to <img> props.