Components

Aspect Ratio

Displays content within a desired ratio, so images, video embeds, and media placeholders keep their proportions at any container width.

Playground

Ratio—ratio

Image—children

Usage

Wrap the content in AspectRatio and pass ratio as width divided by height. The component ships no styles of its own — the parent sets the width, and the child is styled directly (rounded-lg, object-cover).

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

<div className="w-full max-w-sm">
  <AspectRatio ratio={16 / 9}>
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      alt="Photo by Drew Beamer"
      className="size-full rounded-lg object-cover"
    />
  </AspectRatio>
</div>

Square

A ratio of 1 keeps the content square — the default when no ratio is passed. Useful for album art, product shots, and gallery grids.

<div className="w-full max-w-48">
  <AspectRatio ratio={1}>
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      alt="Photo by Drew Beamer"
      className="size-full rounded-lg object-cover"
    />
  </AspectRatio>
</div>

Portrait

Ratios below 1 render taller than wide — 9 / 16 matches vertical video and story-style media. Keep the parent narrow so the height stays reasonable.

<div className="w-full max-w-40">
  <AspectRatio ratio={9 / 16}>
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      alt="Photo by Drew Beamer"
      className="size-full rounded-lg object-cover"
    />
  </AspectRatio>
</div>

Media placeholder

AspectRatio accepts any child, not just images — reserve the slot with a muted placeholder while media loads and the layout never shifts.

import { ImageIcon } from "@phosphor-icons/react"

<div className="w-full max-w-sm">
  <AspectRatio ratio={16 / 9}>
    <div className="flex size-full items-center justify-center rounded-lg border border-dashed bg-muted">
      <ImageIcon className="size-6 text-muted-foreground" />
    </div>
  </AspectRatio>
</div>

API Reference

AspectRatio wraps the Radix Aspect Ratio primitive and accepts all of its props. It renders a single div tagged data-slot="aspect-ratio" that sizes its child with absolute positioning — style the child, not the wrapper.

Prop	Type	Default
ratio	number	1
asChild	boolean	false
className	string	—

Tokens used

4 design tokens consumed by the Aspect Ratio examples.

--radius
Radius
rounded-lg
--muted
Muted
bg-muted
--muted-foreground
Muted foreground
text-muted-foreground
--border
Border
borderborder-dashed