Aspect Ratio

Displays content within a fixed width-to-height ratio.

import { ImageIcon } from "lucide-react";

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

export default function AspectRatioWidescreen() {
  return (
    <AspectRatio
      ratio={16 / 9}
      className="w-full max-w-md overflow-hidden rounded-lg bg-linear-to-br from-info-muted via-layer-2 to-success-muted"
    >
      <div className="absolute inset-0 flex items-center justify-center text-icon-muted">
        <ImageIcon className="size-8" />
      </div>
    </AspectRatio>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add aspect-ratio
pnpm dlx shadcn@latest add @jarvis/aspect-ratio

Usage

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

export function Cover() {
  return (
    <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">
      <img src="/cover.jpg" alt="The team at the 2026 offsite" className="size-full object-cover" />
    </AspectRatio>
  );
}

It fills the width of its container and sets its height from ratio.

Examples

Square

import { ImageIcon } from "lucide-react";

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

export default function AspectRatioSquare() {
  return (
    <AspectRatio
      ratio={1}
      className="w-full max-w-48 overflow-hidden rounded-lg bg-linear-to-br from-warning-muted via-layer-2 to-destructive-muted"
    >
      <div className="absolute inset-0 flex items-center justify-center text-icon-muted">
        <ImageIcon className="size-8" />
      </div>
    </AspectRatio>
  );
}

Props

Part	Extends
AspectRatio	<div>

AspectRatio

Prop	Type	Default
`ratio`	`number`	—