import { AspectRatio } from "@/components/ui/aspect-ratio";
export function AspectRatioDemo() { return ( <AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted"> <img src="https://avatar.vercel.sh/shadcn1" alt="Aspect ratio demo" className="size-full rounded-lg object-cover" /> </AspectRatio> );}Installation
pnpm dlx shadcn@latest add @herocn/aspect-ratioUsage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9}> <img src="..." alt="Image" className="rounded-md object-cover" /></AspectRatio>Composition
Use the following composition to build an AspectRatio:
AspectRatioExamples
Square
import { AspectRatio } from "@/components/ui/aspect-ratio";
export function AspectRatioSquare() { return ( <AspectRatio ratio={1 / 1} className="w-full max-w-[12rem] rounded-lg bg-muted" > <img src="https://avatar.vercel.sh/shadcn1" alt="Square aspect ratio" className="size-full rounded-lg object-cover" /> </AspectRatio> );}Portrait
import { AspectRatio } from "@/components/ui/aspect-ratio";
export function AspectRatioPortrait() { return ( <AspectRatio ratio={9 / 16} className="w-full max-w-[10rem] rounded-lg bg-muted" > <img src="https://avatar.vercel.sh/shadcn1" alt="Portrait aspect ratio" className="size-full rounded-lg object-cover" /> </AspectRatio> );}RTL
"use client";
import { type Translations, useTranslation,} from "@/components/language-selector";import { AspectRatio } from "@/components/ui/aspect-ratio";
const translations: Translations = { en: { dir: "ltr", values: { caption: "Beautiful landscape", }, }, ar: { dir: "rtl", values: { caption: "منظر طبيعي جميل", }, }, he: { dir: "rtl", values: { caption: "נוף יפה", }, },};
export function AspectRatioRtl() { const { dir, language, t } = useTranslation(translations, "ar");
return ( <figure className="w-full max-w-sm" lang={language} dir={dir}> <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted"> <img src="https://avatar.vercel.sh/shadcn1" alt="Landscape" className="size-full rounded-lg object-cover" /> </AspectRatio> <figcaption className="mt-2 text-center text-muted-foreground text-sm"> {t.caption} </figcaption> </figure> );}