Components
AspectRatio
Constrains content to a fixed width-to-height ratio, clipping overflow.
AspectRatio locks its child to a given proportion via the ratio prop (width
÷ height, e.g. 16 / 9), so the box keeps that shape as it scales with its
container. It rounds and clips overflow, making it ideal for responsive images,
video embeds, and media thumbnails that must not jump or distort while loading.
Built on Radix's AspectRatio primitive.
Example
Preview
16:9 media frame
1:1 square
import { AspectRatio } from '@officina/ui';
<AspectRatio ratio={16 / 9}>
<img src="/cover.jpg" alt="Cover" className="size-full object-cover" />
</AspectRatio>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | — |