Command Palette

Search for a command to run...

Aspect Ratio

shadcn/ui

Displays content within a desired ratio.

Aspect Ratio
Photo by Ale

import { AspectRatio } from "@/components/optics/aspect-ratio";import Image from "next/image";<div className="w-[450px]">  <AspectRatio    className="bg-muted"    ratio={1.7777777777777777}  >    <UnknownElementType      alt="Photo by Ale"      className="rounded-md object-cover"      fill      src="/images/background-placeholder.jpeg"    />  </AspectRatio></div>

Installation

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

Props

<AspectRatio />
Name
Type
ratio
number(default: 1)
Alert DialogAvatar