A React component wrapper for Radix UI's AspectRatio primitive that maintains consistent width-to-height ratios for content containers. ## Key Components - **AspectRatio** - The main component that wraps content and enforces aspect ratio constraints - Re-exports `@radix-ui/react-aspect-ratio` Root component with client-side rendering ## Usage Example ```typescript import { AspectRatio } from "./aspect-ratio" import Image from "next/image" // 16:9 video aspect ratio Video thumbnail // Square aspect ratio for profile images User avatar // Custom 3:2 aspect ratio
3:2 Content
``` The component automatically calculates height based on width and the specified ratio, making it perfect for responsive images, video containers, and maintaining consistent layouts across different screen sizes.