Aspect Ratio

Keeps content, such as an image, at a width-to-height ratio.

@cupertinoui/aspect-ratioRegistry JSON

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

export default function AspectRatioDemo() {
  return (
    <div className="w-full max-w-sm">
      <AspectRatio ratio={16 / 10} className="overflow-hidden rounded-[12px] shadow-[0_0_0_1px_var(--mac-grid)]">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/wallpapers/drift-light.webp" alt="Drift wallpaper, light" className="size-full object-cover" />
      </AspectRatio>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/aspect-ratio

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<AspectRatio ratio={16 / 10}>
  <img src="…" alt="…" className="size-full object-cover" />
</AspectRatio>

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

AspectRatio

Prop	Type	Description
`ratio`	`number`	Width divided by height.
`className`	`string`	Extra classes, merged with the component's own.