Embossed UI

Search documentation

Search for a page or component.

Aspect Ratio

Displays content within a desired ratio.

An office with plants and desks
import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioDemo() {
  return (
    <AspectRatio
      ratio={16 / 9}
      className="w-full max-w-sm overflow-hidden rounded-xl bg-muted outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"
    >
      <img
        src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
        alt="An office with plants and desks"
        className="absolute inset-0 size-full object-cover"
      />
    </AspectRatio>
  )
}

Installation

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/aspect-ratio.json

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio"
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-xl">
  <img
    src="..."
    alt="Image"
    className="absolute inset-0 size-full object-cover"
  />
</AspectRatio>

Examples

Square

An office with plants and desks
import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioSquare() {
  return (
    <AspectRatio
      ratio={1 / 1}
      className="w-full max-w-48 overflow-hidden rounded-xl bg-muted outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"
    >
      <img
        src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
        alt="An office with plants and desks"
        className="absolute inset-0 size-full object-cover"
      />
    </AspectRatio>
  )
}

Portrait

An office with plants and desks
import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioPortrait() {
  return (
    <AspectRatio
      ratio={9 / 16}
      className="w-full max-w-40 overflow-hidden rounded-xl bg-muted outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"
    >
      <img
        src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
        alt="An office with plants and desks"
        className="absolute inset-0 size-full object-cover"
      />
    </AspectRatio>
  )
}

API Reference

AspectRatio

PropTypeDefault
rationumber—
classNamestring—

The frame is plain: give it a radius and, for photos, the 1px inset outline the Item and Attachment image tiles use (outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10).

Alert DialogAttachment