Aspect ratio

Keeps media and previews at a fixed width to height ratio as the layout resizes.

npx prodular-ui add aspect-ratio

Video thumbnail

16:9. Images inside fill the box and crop with object-cover.

3:42

Set up usage based pricing in under four minutes.

import { PlayIcon } from "lucide-react"
import { AspectRatio } from "@/components/ui/aspect-ratio"
export default function AspectRatioDefault() {  return (    <figure className="flex w-full max-w-md flex-col gap-2">      <AspectRatio        ratio={16 / 9}        className="flex items-center justify-center overflow-hidden rounded-xl border bg-muted"      >        <span className="flex size-12 items-center justify-center rounded-full bg-card text-foreground shadow-md">          <PlayIcon className="size-5 translate-x-px" />        </span>        <span className="absolute right-3 bottom-3 rounded-sm bg-foreground/80 px-1.5 text-xs font-medium text-background tabular-nums">          3:42        </span>      </AspectRatio>      <figcaption className="text-[13px] text-muted-foreground">        Set up usage based pricing in under four minutes.      </figcaption>    </figure>  )}

Anatomy

<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-xl">  <img src="/cover.jpg" alt="Usage pricing walkthrough" /></AspectRatio>

Guidance

Use it when

Images, videos, maps and document previews whose space must be reserved before they load.
Rows of thumbnails that must line up.

Avoid

Text content. Let it set its own height.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Pass ratio as a division, for example ratio={16 / 9} or ratio={3 / 4}.
Put rounding, border and overflow-hidden on AspectRatio itself, not on a wrapper.
A direct img child fills the box with object-cover. Always give it an alt.

API

AspectRatio

Prop	Type	Default	Description
ratio	number		Width divided by height. Required.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add aspect-ratio# or, with the registry in components.jsonnpx shadcn@latest add @prodular/aspect-ratio