ComponentClient component

Aspect Ratio

A small primitive for predictable media proportions.

Installation

Preview

16 / 9

Predictable media, every time.

Usage

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

<AspectRatio ratio={16 / 9}>
  <img alt="Preview" src="/preview.jpg" />
</AspectRatio>

API reference

PropTypeDefaultDescription
rationumber1Desired width divided by height.
classNamestring—Overrides or extends the generated Tailwind classes.
disabledbooleanfalsePrevents user interaction when supported.