Aspect Ratio

Constrains its content to a desired width-to-height ratio, built on Radix UI's Aspect Ratio primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/aspect-ratio.json

Aspect Ratio holds a fixed width-to-height proportion for whatever it contains — images, video embeds, map tiles, placeholders — so layouts stay stable while media loads and across viewport sizes. Pass the ratio as a number: 16 / 9, 4 / 3, or 1 for a square.

<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="Cover" className="size-full rounded-md object-cover" />
</AspectRatio>

Preview

16 / 9

Square (1 / 1)

1 / 1

Props

AspectRatio extends React.ComponentProps<typeof AspectRatioPrimitive.Root>.

Prop	Type	Notes
`ratio`	`number`	Width-to-height ratio, e.g. `16 / 9`. Defaults to `1`.
`className`	`string`	Applied to the ratio box that wraps the content.