Aspect Ratio

Displays content within a desired ratio.

module NextImage = {
  type props = {
    src: string,

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/AspectRatio
Copy

Usage

Copy<AspectRatio ratio={16. / 9.} className="bg-muted rounded-lg">
  <Next.Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

Examples

Square

A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

module NextImage = {
  type props = {
    src: string,

Portrait

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

module NextImage = {
  type props = {
    src: string,

API Reference

AspectRatio

The AspectRatio component displays content within a desired ratio.

For more information, see the Base UI documentation.