Aspect Ratio

Layout

Container with fixed aspect ratio.

Installation

npm install @radix-ui/react-aspect-ratio

Import

import { PixelAspectRatio } from "@/components/ui/pixel-aspect-ratio"

Usage

16:9 Aspect Ratio

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-aspect-ratio.tsx

"use client";

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
import * as React from "react";

const PixelAspectRatio = AspectRatioPrimitive.Root;

export { PixelAspectRatio };

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.