Aspect Ratio

Layout

Keeps media sized to a fixed ratio.

AspectRatio reserves space with a percentage padding trick so the content never causes the box to jump.

npx shadcn@latest add aspect-ratio

Default

Preview

Live

16 : 9

tsx

1<div className="w-full max-w-sm">
2  <AspectRatio ratio={16 / 9}>
3    <img src="..." alt="Thumbnail" className="h-full w-full object-cover rounded-lg" />
4  </AspectRatio>
5</div>

Square

A ratio of 1 produces a square box.

Preview

Live

1 : 1

tsx

1<AspectRatio ratio={1}>...</AspectRatio>

API reference

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

Prop	Type	Description
ratio	number	Width divided by height, e.g. 16 / 9.
children	React.ReactNode	Content to fit inside the box, typically an image.
className	string	Override the classes of the wrapper.