Components
Aspect Ratio
Constrains its content to a desired width-to-height ratio. Wrap an image, video, or any block so it holds a consistent shape as the layout resizes.
Preview
16 / 9
Rendered with live Cognition tokens — the placeholder surface remaps on theme change, no dark: classes. The box keeps its ratio as its width changes.
Ratios
16 / 9
<AspectRatio ratio={16 / 9}>…</AspectRatio>1 / 1
<AspectRatio ratio={1 / 1}>…</AspectRatio>4 / 3
<AspectRatio ratio={4 / 3}>…</AspectRatio>3 / 4
<AspectRatio ratio={3 / 4}>…</AspectRatio>Pass ratio as width ÷ height. The component sets the height from the width automatically, so the shape holds at any size.
With media
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">
<img src={src} alt="" className="size-full object-cover" />
</AspectRatio>For images and video, add overflow-hidden on the ratio box and object-cover on the media so it fills and crops cleanly.
API
Prop
Type
Default
Description
ratio
number
1
Width divided by height — e.g. 16 / 9 for widescreen, 1 for a square.
children
ReactNode
required
The content to constrain. Use object-cover on media so it fills the box.
className
string
undefined
Applied to the ratio box — radius, background, or overflow-hidden for media.
Don't and Do
Don't
Don't set a fixed height on the content to fake a ratio — it breaks when the width changes. And don't wrap text in one; Aspect Ratio is for media and fixed-shape blocks, not flowing copy.
Do
<AspectRatio ratio={16 / 9}>
<img className="size-full object-cover" … />
</AspectRatio>import { AspectRatio } from "@/components/ui/aspect-ratio";
export function Cover({ src }: { src: string }) {
return (
<div className="w-[480px]">
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">
<img src={src} alt="" className="size-full object-cover" />
</AspectRatio>
</div>
);
}