> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Aspect Ratio

> Displays content within a desired aspect ratio.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn@latest add aspect-ratio
  ```

  ```bash yarn theme={null}
  yarn dlx shadcn@latest add aspect-ratio
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest add aspect-ratio
  ```
</CodeGroup>

## Usage

```tsx theme={null}
import { AspectRatio } from "@/components/ui/aspect-ratio"
```

```tsx theme={null}
<AspectRatio ratio={16 / 9}>
  <img src="/photo.jpg" alt="Photo" />
</AspectRatio>
```

## Component Code

```tsx theme={null}
"use client"

import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }
```

## Examples

<Tabs>
  <Tab title="Image">
    Display an image within a 16:9 aspect ratio.

    ```tsx theme={null}
    <div className="w-full max-w-md">
      <AspectRatio ratio={16 / 9}>
        <img
          src="/placeholder.jpg"
          alt="Placeholder"
          className="rounded-md object-cover w-full h-full"
        />
      </AspectRatio>
    </div>
    ```
  </Tab>

  <Tab title="Video">
    Embed a video with a specific aspect ratio.

    ```tsx theme={null}
    <AspectRatio ratio={16 / 9}>
      <iframe
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        className="w-full h-full"
        allowFullScreen
      />
    </AspectRatio>
    ```
  </Tab>

  <Tab title="Custom Ratio">
    Use different aspect ratios like 1:1 or 4:3.

    ```tsx theme={null}
    <AspectRatio ratio={1}>
      <img
        src="/square.jpg"
        alt="Square image"
        className="rounded-md object-cover w-full h-full"
      />
    </AspectRatio>
    ```
  </Tab>
</Tabs>

## API Reference

### AspectRatio

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `ratio`     | `number` | `1`     |
| `className` | `string` | -       |