Aspect Ratio

Displays content such as images, video, and maps inside a box that keeps a fixed aspect ratio as its width changes.

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

export default function AspectRatioDemo() {
  return (
    <div className="w-full max-w-96">
      <AspectRatio
        ratio={16 / 9}
        className="flex items-center justify-center rounded-md bg-muted"
      >
        <span className="text-sm text-muted-foreground">16 : 9</span>
      </AspectRatio>
    </div>
  );
}

Installation

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/aspect-ratiopnpm dlx shadcn@latest add @sevenui/aspect-ratioyarn dlx shadcn@latest add @sevenui/aspect-ratiobunx --bun shadcn@latest add @sevenui/aspect-ratio

Usage

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

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." className="size-full object-cover" />
</AspectRatio>;

API reference

AspectRatio

Extends div — the ratio is applied via CSS aspect-ratio, so the element needs a constrained width from its parent.