Glasswave UI

Aspect Ratio

Displays content within a desired ratio.

Aspect Ratio
Foggy mountain ridges
16 : 9

Mountain landscape

Maintains a 16:9 ratio

Installation

1pnpm dlx shadcn@latest add @glasswave/aspect-ratio

Usage

1import { AspectRatio } from "glasswave";2import Image from "next/image";
1<AspectRatio ratio={16 / 9}>2  <Image3    src="/mountains.jpg"4    alt="Image"5    fill6    className="object-cover"7  />8</AspectRatio>

API Reference

See the Radix UI Aspect Ratio documentation.