<!-- source-hash: 585563381a0d7558b71c533935db93f8 -->
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
<AspectRatio ratio={16 / 9} className="bg-muted">
  <Image
    src="/video-thumbnail.jpg"
    alt="Video thumbnail"
    fill
    className="rounded-md object-cover"
  />
</AspectRatio>

// Square aspect ratio for profile images
<AspectRatio ratio={1} className="bg-muted">
  <Image
    src="/avatar.jpg"
    alt="User avatar"
    fill
    className="rounded-full object-cover"
  />
</AspectRatio>

// Custom 3:2 aspect ratio
<AspectRatio ratio={3 / 2}>
  <div className="flex items-center justify-center h-full bg-gradient-to-br from-blue-400 to-purple-600">
    <span className="text-white font-semibold">3:2 Content</span>
  </div>
</AspectRatio>
```

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.