Aspect Ratio

Displays content within a desired ratio.

Overview

AspectRatio keeps children inside a fixed width-to-height frame. Pass ratio as a number such as 16 / 9 or 1. Combine with Tailwind width utilities like max-w-md or sm:max-w-lg. In your app, images and video typically fill the frame with object-cover.

Preview

1.50:1

Customize

Ratio

1.5

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add aspect-ratio

Usage

1
2
3
4
5
6
7
8
9
10
11
import { AspectRatio } from "@/components/ui/aspect-ratio";

export function Hero() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted max-w-md overflow-hidden rounded-md">
      <div className="text-muted-foreground flex size-full items-center justify-center text-sm">
        16:9
      </div>
    </AspectRatio>
  );
}

Examples

Landscape

A 16:9 frame for wide media.

16:9

Square

A 1:1 frame for avatars and thumbnails.

1:1

Portrait

A 9:16 frame for tall media.

9:16

Responsive width

Cap the frame with max-width utilities. The ratio stays fixed as the viewport shrinks.

16:9

In practice

A marketing card uses AspectRatio for a 16:9 Open Graph cover above title, description, and equally sized actions.

Vinyaas

Composable React components you install as source.

v1.2.0

A production catalog for forms, overlays, charts, and product UI — with docs, CLI install, and theme tokens that travel with your app.

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`ratio`	number	—	Width divided by height. Use 16 / 9, 1, or 9 / 16.
`className`	string	—	Merged onto the aspect ratio root with cn.

Accessibility

AspectRatio is presentational. Give images meaningful alt text. Decorative crops can use an empty alt when the surrounding copy already describes the media.