Aspect Ratio

Displays content within a desired ratio.

Installation

npx shadcn@latest add https://exawizards.com/exabase/design/registry/aspect-ratio.json

Usage

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

<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="Image" className="rounded-md object-cover" />
  </AspectRatio>
</div>

API

See the Aspect Ratio – Radix Primitives (opens in a new tab) documentation.

Alert Dialog Avatar