Image

Data Display

A responsive image with an aspect ratio, optional overlay, and caption.

Image wraps a lazy-loaded img in an aspect-ratio container so layout never shifts while the picture loads. Use it in cards, heroes, and galleries.

npx shadcn@latest add image

Default

Set the aspect ratio with a Tailwind class.

Preview

Live

tsx

1<Image
2  src="https://picsum.photos/seed/shelf/400/300"
3  alt="Abstract indigo gradient"
4  aspect="aspect-[4/3]"
5  rounded
6/>

Overlay and caption

A gradient overlay can sit on top, with a caption below the image.

Preview

Live

Mountain landscape — Panorama captured above the valley.

tsx

1<Image
2  src="https://picsum.photos/seed/shelf/400/300"
3  alt="Mountain landscape"
4  aspect="aspect-[4/3]"
5  rounded
6  overlay
7  caption="Panorama captured above the valley."
8/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
src	string	The image URL.
alt	string	Accessible description of the image.
aspect	string= "aspect-[4/3]"	Aspect ratio class applied to the container.
rounded	boolean= false	Clips the image with rounded corners.
overlay	boolean= false	Renders a dark gradient scrim over the image.
caption	string	Optional caption shown below the image.