Aspect Ratio

Displays content within a desired aspect ratio.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/aspect-ratio.json

Usage

Use aspect ratio to constrain media and placeholders so layout does not shift as content loads.

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

export function Example() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted overflow-hidden rounded-lg">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Mountain landscape by Drew Beamer"
        className="size-full object-cover"
      />
    </AspectRatio>
  );
}

Pass ratio as a number (for example 16 / 9, 1, or 4 / 3).