Layout/Aspect Ratio

Aspect Ratio

Constrains its content to a fixed width-to-height ratio, staying responsive at any container width. Useful for images, video embeds, and cards.

import { AspectRatio } from "@animui/ui"

Basic (16 / 9)

16 / 9

1 / 1

iframe / video content

Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	Width-to-height ratio to maintain, e.g. 16 / 9, 4 / 3, or 1 for a square.
`children`	`ReactNode`	—	Content to fill the ratio-constrained box, e.g. an image, video, or embed.
`className`	`string`	—	Additional classes for the outer container.

✓Purely a layout primitive; accessibility depends on the content passed as children (e.g. provide alt text on images).
✓Uses the native CSS aspect-ratio property, so it resizes fluidly with its container without JavaScript.