Aspect Ratio

Ratio layout wrapper primitive built on Radix AspectRatio for reserving media element proportions.

// Radix — @radix-ui/react-aspect-ratio
import { AspectRatio } from "@shavin/ui";

16 / 9

16:9

<div className="w-64 overflow-hidden rounded-[var(--radius-xl)] border border-hairline">
  <AspectRatio ratio={16 / 9}>
    <div className="flex h-full w-full items-center justify-center bg-surface-hover text-sm text-fg-muted">
      16:9
    </div>
  </AspectRatio>
</div>

1 / 1

1:1

<div className="w-40 overflow-hidden rounded-[var(--radius-xl)] border border-hairline">
  <AspectRatio ratio={1}>
    <div className="flex h-full w-full items-center justify-center bg-surface-hover text-sm text-fg-muted">
      1:1
    </div>
  </AspectRatio>
</div>

4 / 3

4:3

<div className="w-56 overflow-hidden rounded-[var(--radius-xl)] border border-hairline">
  <AspectRatio ratio={4 / 3}>
    <div className="flex h-full w-full items-center justify-center bg-surface-hover text-sm text-fg-muted">
      4:3
    </div>
  </AspectRatio>
</div>

Props

AspectRatio takes no props beyond className and the native element's attributes.