Aspect Ratio

npx shadcn@latest add https://ui.saasflare.io/r/aspect-ratio.json

pnpm add @saasflare/ui

"use client"import { AspectRatio } from "@saasflare/ui"/** A 16:9 media frame holding a dashboard preview image. */export function Demo() {    return (        <div className="w-full max-w-sm">            <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md border">                <img                    src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=640&q=80"                    alt="Analytics dashboard preview"                    className="size-full object-cover"                />            </AspectRatio>        </div>    )}

"use client"import { AspectRatio } from "@saasflare/ui"/** A 1:1 square frame, ideal for avatars or logo tiles. */export function Demo() {    return (        <div className="w-full max-w-sm">            <AspectRatio                ratio={1}                className="flex items-center justify-center rounded-md border bg-muted"            >                <span className="text-2xl font-semibold tracking-tight">SF</span>            </AspectRatio>        </div>    )}