Image
FREEImage with a loading placeholder, soft fade-in, error fallback, aspect ratio, caption and hover zoom.
Installation
Terminal
npx @bloxa/cli add image
# or: npx shadcn@latest add @bloxa/imageExamples
Ratio, caption and zoom
A placeholder shows until the image loads, then it fades in.
Error fallback
When loading fails, a localized message or your own content is shown.
Corners and fit
API reference
Every component also accepts the props of the element it renders.
Image
| Prop | Type | Default | Description |
|---|---|---|---|
| alt | string | — | Required description; "" for decorative images. |
| ratio | number | string | — | Frame aspect ratio, e.g. 16 / 9 or "4/3". |
| fit | "cover" | "contain" | "cover" | How the image fills the frame. |
| rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Corner radius. |
| fallback | ReactNode | — | Content shown when loading fails. |
| caption | ReactNode | — | Caption; wraps in figure/figcaption. |
| zoomOnHover | boolean | false | Gentle zoom on hover. |
| frameClassName | string | — | Class for the outer frame (className goes to the img). |