Aspect Ratio

A high-quality, styled React aspect ratio component for maintaining element proportions.

The AspectRatio component constrains content to a specific width-to-height aspect ratio.

Usage

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

export function ExampleAspectRatio() {
  return (
    <div className="w-[400px]">
      <AspectRatio ratio={16 / 9} className="bg-muted flex items-center justify-center rounded-lg border">
        <span>16 / 9 Content</span>
      </AspectRatio>
    </div>
  );
}

Preview

16 / 9 Aspect Ratio

Custom Styling

Apply custom borders, gradient backgrounds, or shadow overlays using className:

<AspectRatio ratio={16 / 9} className="bg-gradient-to-br from-indigo-500/20 to-purple-500/20 rounded-2xl border border-indigo-500/30 overflow-hidden shadow-lg">
  <img src="/demo.jpg" alt="Preview" className="h-full w-full object-cover" />
</AspectRatio>

Styling & Class Names

Target internal aspect ratio CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.aspect-ratio`	Root container	Aspect ratio positioning wrapper.

API Reference

AspectRatio Props

Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	The desired aspect ratio (width/height).