Aspect Ratio

Aspect Ratio constrains its content to a fixed width-to-height ratio as the container resizes. Use it to reserve space for images, video embeds, and media cards so the layout doesn't shift while they load.

Preview

PreviewCode

Installation

npx shadcn@latest add @cubby-ui/aspect-ratio

Usage

import { AspectRatio } from "@/components/ui/cubby-ui/aspect-ratio";

<AspectRatio />

Examples

Square Ratio

Set ratio="1/1" for a square container.

PreviewCode

Portrait Orientation

Use a ratio below 1 (such as 3/4) for taller-than-wide content.

PreviewCode

Multiple Ratios

Pass different ratio values to compare common aspect ratios side by side.

Video Embed

Wrap an iframe in ratio="16/9" for a responsive video embed.

API Reference

Aspect Ratio is a custom styled div wrapper. All props are custom or standard div attributes passed through.

Props

AspectRatio

Wraps its content in a div that holds a fixed width-to-height ratio.