Command Palette

Search for a command to run...

Aspect Ratio

shadcn/ui

Displays content within a desired ratio.

Photo by Ale

import { AspectRatio } from "@/registry/optics/aspect-ratio";import Image from "next/image";<div className="w-[450px]">	<AspectRatio ratio={16 / 9}>		<Image			src="/images/placeholder.jpg"			alt="Photo"			fill			className="rounded-md object-cover"		/>	</AspectRatio></div>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/aspect-ratio.json

Props

<AspectRatio />
Name
Type
ratio
number (required, e.g., 16 / 9, 4 / 3)
className
string
Alert DialogAvatar