Aspect Ratio

Copyimport { AspectRatio } from "@/components/ui/aspect-ratio";
 
// 16:9 video thumbnail
<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." className="h-full w-full object-cover" />
</AspectRatio>
 
// Square avatar
<AspectRatio ratio={1}>
  <img src="..." alt="..." className="h-full w-full rounded-full object-cover" />
</AspectRatio>
 
// Placeholder while loading
<AspectRatio ratio={16 / 9} className="bg-muted rounded-md" />

Copy# Mint — Aspect Ratio Specs
 
## Component
- name: aspect-ratio
- file: registry/mint/aspect-ratio.tsx
- installs to: components/ui/aspect-ratio.tsx
- dependencies: radix-ui
- registryDependencies: none
 
## What is it
A layout utility that enforces a fixed width-to-height ratio on its content.
Use it for images, videos, maps, or any media where you need to prevent layout
shift before the content loads. The ratio is maintained regardless of the
container width. Prefer AspectRatio over manual padding hacks whenever fixed
proportions are required.
 
## Visual identity
Purely structural — AspectRatio itself carries no colour, radius, or shadow.
Visual character is entirely determined by the child content and any className
passed to the wrapper (e.g. bg-muted, rounded-md).
 
## Design tokens
No CSS variables consumed directly by the component. Callers typically apply:
--muted: oklch(0.96 0.02 155) / oklch(0.2 0.03 155)   — placeholder background (bg-muted)
--radius: 1.25rem                              — rounded corners (rounded-md on wrapper or child)
 
## Conventions
- Always set object-cover on img children — object-contain causes letterboxing
- Use bg-muted as a placeholder background while the image is loading
- Wrap in a width-constrained parent (max-w-sm, w-full, etc.) — AspectRatio fills 100% of its container width
- For rounded corners: apply rounded-md and overflow-hidden to the AspectRatio wrapper, or rounded-md directly to the img child
- Do not nest AspectRatio inside flex/grid items without setting explicit widths
- Sub-components expose data-slot="aspect-ratio" for CSS targeting