Yami UI

Displays content within a desired ratio.

16 / 9

Installation

Add the aspect ratio component with the shadcn CLI.

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

Usage

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>

Examples

Default

16 / 9

Code

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>