Aspect Ratio · paneui

Installation

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

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

<AspectRatio ratio={16 / 9}>
  <div className="absolute inset-0 bg-muted" />
</AspectRatio>

AspectRatio
└── AspectRatioImage (optional)

Ratio changes run as a motion layout animation with a bounce-free spring. With reduced motion the frame jumps straight to its new shape.

A full-width frame locked to a ratio, with a muted well background. Also accepts every prop of motion.div.

ratio= 1: number; Width divided by height, e.g. 16 / 9. Invalid values fall back to 1.
animated= true: boolean; Animate ratio changes. Reduced motion always skips the movement.
radius= 20: number; Corner radius in px.
contentClassName: string; Classes for the absolutely positioned content layer.

Prop	Type	Default	Description
ratio	number	1	Width divided by height, e.g. `16 / 9`. Invalid values fall back to 1.
animated	boolean	true	Animate ratio changes. Reduced motion always skips the movement.
radius	number	20	Corner radius in px.
contentClassName	string	—	Classes for the absolutely positioned content layer.

Cover-cropped image for AspectRatio, sized from its real width and height. Must be used inside it. Also accepts every prop of motion.img.

Prop	Type	Default	Description
alt*	string	—	Alternative text.
width*	number	—	Intrinsic width in px.
height*	number	—	Intrinsic height in px.
draggable	boolean	false	Native image dragging.