Aspect Ratio

Locks child content to a fixed width-to-height ratio. Built on reka-ui.

Default

16:9 image container that scales with its parent width.

Import the parts you need from the component's folder.

import { AspectRatio } from "@/components/ui/aspect-ratio";

Set ratio=1 for square thumbnails.

Set ratio=3/4 for tall, portrait-oriented content.

3 : 4

Prop	Type	Default	Description
`ratio`	`number`	`1`	Width-to-height ratio. 16/9 ≈ 1.78, 4/3 ≈ 1.33, 1 = square.
`asChild`	`boolean`	`false`	Render into the child element instead of a wrapper div.