Primitives
Image
Enhanced image component with configurable border radius, shadow, fallback support, and optional zoom effect on hover.
Installation
npm install @trinkui/reactImport
import { Image } from "@trinkui/react";Radius
Shadow
Zoom on Hover
Props
| Prop | Type | Default | Description |
|---|---|---|---|
srcrequired | string | — | Image source URL |
altrequired | string | — | Alt text for accessibility |
radius | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius of the image |
shadow | "none" | "sm" | "md" | "lg" | "none" | Box shadow depth |
fallbackSrc | string | — | Fallback image URL if the primary src fails to load |
isZoomed | boolean | false | Apply a hover zoom-in effect |
width | number | string | — | Image width |
height | number | string | — | Image height |
className | string | — | Additional CSS classes |
Accessibility
- The
altprop is required and rendered as the nativealtattribute. - If
fallbackSrcis provided, it is swapped in automatically on load error so the layout is never broken. - Decorative images should use
alt=""androle="presentation".