ui
XGitHub

Aspect Ratio

Allows you to display an element at a specific aspect ratio.

aspect-ratio-demo.tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
 
export function AspectRatioDemo() {
	return (
		<AspectRatio
			ratio={16 / 9}
			className="rounded-lg border bg-card text-card-foreground"
		>
			<div className="flex size-full items-center justify-center font-medium">
				Content
			</div>
		</AspectRatio>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/aspect-ratio.json

Usage

Imports
import { AspectRatio } from "@/components/ui/aspect-ratio"
Anatomy
<AspectRatio />