---
title: Aspect Ratio
description: Keep media and other content at a consistent ratio.
group: Components
order: 13
---
Give images, video, and placeholders a predictable frame with a single `ratio` prop.
```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function Example() {
return (
)
}
```
## Installation
```bash
npx @arctis-sh/@arctis-sh/ui@latest add aspect-ratio
```
## Usage
```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
```
```tsx
```
## Square
Use `ratio={1}` for a square frame.
```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function Example() {
return (
)
}
```
## Portrait
Use `ratio={9 / 16}` for a tall portrait frame.
```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function Example() {
return (
)
}
```
## Rectangle
Use `ratio={16 / 9}` for a wide landscape frame.
```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function Example() {
return (
)
}
```
## API Reference
### AspectRatio
| Prop | Type | Default |
| --- | --- | --- |
| ratio | number | 1 |
| className | string | — |
```tsx
```
## Source
```tsx
import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";
type AspectRatioProps = HTMLAttributes & {
ratio?: number;
children?: ReactNode;
};
export function AspectRatio({
ratio = 1,
className,
children,
style,
...props
}: AspectRatioProps) {
return (
{children}
);
}
```