Aspect Ratio

A surface that keeps a fixed width-to-height ratio.

Examples

16 : 9

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Aspect Ratio

pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/aspect-ratio.json'

Usage

A complete example using the installed component and hook paths.

Aspect Ratio usage

"use client";import { AspectRatio } from "@/components/ui/aspect-ratio";const AspectRatioPreview = function AspectRatioPreview() {    return (      <AspectRatio ratio={16 / 9} className="w-full rounded-lg border bg-muted">        <div className="flex size-full items-center justify-center text-2xl font-medium">          16 : 9        </div>      </AspectRatio>    );  };export default function Demo() {  return <AspectRatioPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

AspectRatio

AspectRatio props

React.ComponentProps<"div"> & { ratio: number }

Source