Components / Layout

AspectRatio

AspectRatio is a Box that enforces a fixed width-to-height ratio on its child. Reach for it when the surface needs to keep its shape across breakpoints — image cards, video embeds, social previews.

Loading playground…

What it is

A <Box> with the CSS aspect-ratio property set. The child element fills the container; the container's height comes from its width and the supplied ratio.

Install

AspectRatio is exported from usemotif. No separate install.

example.tsx

import { AspectRatio } from 'usemotif';

API

AspectRatio

stable

function AspectRatio(props: AspectRatioProps): JSX.Element

rationumber= 1

Width divided by height. Pass `16/9`, `4/3`, `1`, or any positive number.

…BoxPropsOmit<BoxProps, "aspectRatio">

Every Box prop except `aspectRatio`. The component sets `aspectRatio` via `style`; pass the ratio through `ratio` instead.

Examples

Sixteen-by-nine cover image:

example.tsx

<AspectRatio ratio={16 / 9} borderRadius="$radii.md" overflow="hidden">
<Image src={cover.src} alt="" w="100%" h="100%" objectFit="cover" />
</AspectRatio>

Square avatar slot:

example.tsx

<AspectRatio ratio={1} w={120}>
<Avatar src={user.avatar} />
</AspectRatio>

Video embed:

example.tsx

<AspectRatio ratio={16 / 9}>
<iframe
  src={videoUrl}
  width="100%"
  height="100%"
  allow="autoplay; encrypted-media"
/>
</AspectRatio>