Aspect Ratio

Displays content within a desired ratio.

16 / 9

Installation

Add the aspect ratio component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/aspect-ratio.json

Usage

tsx

import { AspectRatio } from "@/components/ui/aspect-ratio"

Examples

Default

16 / 9

import { AspectRatio } from "@/components/ui/aspect-ratio"

<div className="w-64">
  <AspectRatio ratio={16 / 9} className="grid place-items-center border border-border bg-muted">
    <span className="label text-muted-foreground">16 / 9</span>
  </AspectRatio>
</div>