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 ( <AspectRatio ratio={1} className="w-44 rounded-md bg-surface-hover" /> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add aspect-ratioUsage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9} className="h-44 w-auto rounded-md bg-surface-hover" />Square
Use ratio={1} for a square frame.
tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"export function Example() { return ( <AspectRatio ratio={1} className="w-44 rounded-md bg-surface-hover" /> )}Portrait
Use ratio={9 / 16} for a tall portrait frame.
tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"export function Example() { return ( <AspectRatio ratio={9 / 16} className="w-44 rounded-md bg-surface-hover" /> )}Rectangle
Use ratio={16 / 9} for a wide landscape frame.
tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"export function Example() { return ( <AspectRatio ratio={16 / 9} className="h-44 w-auto rounded-md bg-surface-hover" /> )}API Reference
AspectRatio
| Prop | Type | Default |
|---|---|---|
| ratio | number | 1 |
| className | string | — |
<AspectRatio ratio={16 / 9}> <img src="..." alt="..." className="size-full object-cover" /></AspectRatio>