Skip to content
Cuelark UI
Layout

Aspect Ratio

Keep media at a fixed ratio so layout never shifts.

Aspect Ratio reserves space for images, video and embeds at a fixed ratio, so the page does not jump while media loads, which also protects your Cumulative Layout Shift score.

Preview

16 : 9

Installation

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

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/aspect-ratio.

Usage

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

<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="" className="size-full object-cover" />
</AspectRatio>

API reference

AspectRatio

PropTypeDefaultDescription
rationumber1Width divided by height.

Accessibility

  • Purely layout; give media its own alt text.

FAQ

Also searched as: react aspect ratio · shadcn aspect ratio · responsive video container · aspect ratio box css · prevent layout shift images