Image

Image displays a picture with fit, corner radius, border and shadow options; AspectRatio keeps the frame at the right ratio.

fit sets how the image fills its container (none, center, contain, cover). AspectRatio (from shadcn) uses CSS aspect-ratio to reserve the space before the image loads, so the layout doesn't jump.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Image, AspectRatio } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

fit="none"

fit="center"

fit="contain"

fit="cover"

Fit

How the image fills a fixed 144 × 112 frame.

Shape

square (default), rounded, circular.

Border & shadow

bordered adds a stroke-1 border; shadow uses shadow-4, like Card.

AspectRatio

16 / 9 and 1 / 1 frames; the content fills the frame.

Usage

Always write alt text that describes the content; use alt="" for purely decorative images.
Use AspectRatio for images loaded over the network so the layout doesn't jump.
Use fit="cover" for thumbnails and "contain" when the whole image must be visible.

Don't

Don't stretch an image with a width/height that doesn't match its ratio without setting fit.
Don't use circular for images that aren't portraits or logos.
Don't place important text over an image without a background that guarantees contrast.

Props

Prop · Type	Default	Description
fit"none" \| "center" \| "contain" \| "cover" \| "default"	Default: "default"	How the image fills its container (object-fit).
shape"square" \| "rounded" \| "circular"	Default: "square"	Corner radius 0 / 4px / round.
borderedboolean	Default: false	1px stroke-1 border.
shadowboolean	Default: false	shadow-4 drop shadow.
blockboolean	Default: false	The image takes the full width of its container.
AspectRatio.rationumber	Default: 1	Width / height ratio, e.g. 16 / 9.