Aspect Ratio

Displays content within a desired ratio.

"use client"

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

export default function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
      <img
        src="https://avatar.vercel.sh/kickresume"
        alt="Photo"
        className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
      />
    </AspectRatio>
  )
}

Installation

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

Usage

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

<AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
  <img
    src="https://avatar.vercel.sh/kickresume"
    alt="Photo"
    className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
  />
</AspectRatio>

Examples

Square

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

"use client"

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

export default function AspectRatioSquare() {
  return (
    <AspectRatio
      ratio={1 / 1}
      className="w-full max-w-[12rem] rounded-lg bg-muted"
    >
      <img
        src="https://avatar.vercel.sh/kickresume"
        alt="Photo"
        className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
      />
    </AspectRatio>
  )
}

Portrait

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

"use client"

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

export default function AspectRatioPortrait() {
  return (
    <AspectRatio
      ratio={9 / 16}
      className="w-full max-w-[10rem] rounded-lg bg-muted"
    >
      <img
        src="https://avatar.vercel.sh/kickresume"
        alt="Photo"
        className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
      />
    </AspectRatio>
  )
}

API Reference

AspectRatio

The AspectRatio component displays content within a desired ratio.

Prop	Type	Default	Required
`ratio`	`number`	-	Yes
`className`	`string`	-	No