Aspect Ratio

Aspect Ratio locks its content to a fixed width-to-height ratio, such as 16:9.

API Reference

16 / 9

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/aspect-ratio.tsx

Import from@viliha/vui-react/aspect-ratio

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Constrain any child (image, video, embed) to a fixed ratio.

aspect-ratio-demo.tsx

import { AspectRatio } from "@viliha/vui-react/aspect-ratio";

export function Example() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img src="/cover.jpg" alt="" className="size-full rounded-lg object-cover" />
    </AspectRatio>
  );
}

AspectRatio props

It takes no props of its own. Everything you pass reaches the underlying AspectRatioPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.