Aspect Ratio

Server-safe box locked to a ratio (16:9 thumbnails, 9:16 clips). A direct image or video child fills it with object-cover.

npx @kznlabs/labsui add aspect-ratio

16:9

1:1

9:16

import { AspectRatio } from "@/components/ui/aspect-ratio";export function ClipThumb({ src, title }: { src: string; title: string }) {  return (    <AspectRatio ratio={9 / 16} className="w-40 rounded-xl border">      <img src={src} alt={title} />    </AspectRatio>  );}

<AspectRatio>

Box locked to a ratio. A direct <img> or <video> child fills it (object-cover).

ratiodefault 16 / 9
number
Width / height, e.g. 16 / 9, 1, 9 / 16.

Prop	Type	Default
`ratio` Width / height, e.g. `16 / 9`, `1`, `9 / 16`.	`number`	`16 / 9`

Also accepts every <div> prop.

* required. Every component also takes className.