Components

Aspect ratio

Wrapper that maintains a fixed aspect ratio for its child. Useful for images, videos, and thumbnails that must not deform.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<AspectRatio ratio={16 / 9} className="rounded-lg bg-muted" />

When to use

  • Media thumbnails in a grid.
  • Screenshots or previews that need a stable box before the asset loads.

When not to use

  • Cards with variable content height — those size to their content.

Usage

Do
  • Set a ratio like 16 / 9 for videos, 4 / 3 for screenshots, 1 / 1 for icons.
Don't
  • Don't wrap layout containers — the wrapper is for a single visual asset.