@neynar/ui/llm-docs/aspect-ratio.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# AspectRatio

**Type**: component

AspectRatio - Maintains consistent width-to-height ratios for content A foundational layout component that preserves specific aspect ratios regardless of container size. Essential for responsive images, videos, and media content that needs consistent proportions across different screen sizes. Built on Radix UI primitives with zero JavaScript runtime overhead. This component creates a CSS-based aspect ratio container using the modern `aspect-ratio` property, ensuring content maintains its intended proportions without layout shifts or JavaScript calculations. The component acts as a constraint wrapper that forces its children to maintain the specified ratio.

## JSX Usage

```jsx
import { AspectRatio } from '@neynar/ui';

<AspectRatio
  ratio={0}
  className="value"
  asChild={true}
>
  {/* Your content here */}
</AspectRatio>
```

## Component Props

### ratio
- **Type**: `number`
- **Required**: No
- **Description**: The desired aspect ratio as width/height (e.g., 16/9, 4/3, 1)

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Content to be constrained within the aspect ratio

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for styling

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: Merge props with child element instead of wrapping