Aspect Ratio

Displays content within a desired ratio.

Docs API Reference

Photo by Drew Beamer

/* eslint-disable @next/next/no-img-element */
import { AspectRatio } from "@/components/ui/aspect-ratio"

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/aspect-ratio.json

Usage

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

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

API Reference

AspectRatio Props

Prop	Type	Default	Description
`ratio`	`number`	`1`	The desired ratio (width/height)

Alert Dialog Avatar

On this page

Installation Usage API Reference AspectRatio Props