Aspect Ratio

AspectRatio is a box that holds a width-to-height ratio and stretches its contents to fill it edge to edge. Reach for it wherever an image, video, or embed needs a fixed shape before it loads, so the layout does not jump.

Why it is built this way

CSS aspect-ratioAspect RatioA box that keeps its shape and fills whatever is put in it. CSS aspect-ratio, as a prop.@sushindustries/ui · layout does the entire job; the component exists only so the number arrives as a prop instead of an inline style somebody has to remember the syntax for. The default is 16/9, and whatever is passed as children fills the box edge to edge without extra styling of its own.

What it does not do

It takes one ratio, not a responsive set. A box that needs 4/3 on a phone and 16/9 on a desktop wraps two of these behind a media query, or computes the number itself - this component does not read breakpoints.

Install

tanstack add https://adamjurek.com/r/tanstack/aspect-ratio.json

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

pnpm add @sushindustries/ui @sushindustries/atoms

What you get