Aspect Ratio

Box locked to a width/height ratio, with a shimmer placeholder that dissolves into the image once it loads.

Sample landscape photograph — Field notes, vol. 3
Shot on 35mm, scanned at 4K
1.78:1

ratio1.7777777777777777

shimmer

src

alt

Installation

npx shadcn@latest add @glint-ui/aspect-ratio

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/aspect-ratio.json

Usage

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

<AspectRatio ratio={16 / 9} src="/cover.jpg" alt="Mountain lake at dawn" className="rounded-xl" />

Props

Prop	Type	Default	Description
ratio	number	1.7777777777777777	Width divided by height, e.g. 16 / 9.
shimmer	boolean	true	Animated placeholder until the image loads.
src	string	—	Image rendered with object-cover. Omit to place your own children.
alt	string	""	Alt text for the image.
children	ReactNode	—	Any content (video, iframe, map) to fit inside the box.
className	string	—	Extra classes for the root element.