An aspect ratio container that keeps images and videos at 16:9, 4:3, 1:1 and other ratios across screen sizes, with a shimmer placeholder while media loads.
"use client";
import { AspectRatio, AspectRatioImage } from "@/components/ui/aspect-ratio";
import type { AspectRatioVariant } from "@/components/ui/aspect-ratio";
const demoImages: Record<AspectRatioVariant, { src: string; alt: string }> = {
video: {
src: "https://cdn.21st.dev/assets/mirror/10/10575677c5c3f1bc4ded0fc34fb4199d654f985ba6b32473b1b98703d18c844b.webp",
alt: "Waterfall dropping through a green canyon",
},
portrait: {
src: "https://cdn.21st.dev/assets/mirror/67/6756ffaa1baaa92590f8867d3ad2509dd4aae2bd75def9cd209b28760a4bc767.webp",
alt: "Twin waterfalls feeding a turquoise mountain lagoon",
},
square: {
src: "https://cdn.21st.dev/assets/mirror/d0/d0c647b6cf76c40eeb04f76851115f4025886cdbe85cdb39a85c123ff941358a.webp",
alt: "Mountain range reflected in a still alpine lake",
},
cinema: {
src: "https://cdn.21st.dev/assets/mirror/d3/d3ac0cc03838f1109ad1c426366897a0d063457f4bad1bef7531f7fe72b23ec3.webp",
alt: "Wide sunset view over a winding river valley",
},
photo: {
src: "https://cdn.21st.dev/assets/mirror/aa/aa6da4bbc7cc5432b413d76979a5b3809d395f7a2a12614440cc7abac327a47e.webp",
alt: "Classic framed mountain range photograph at sunrise",
},
};
function DemoAspectRatio({
variant,
className,
}: {
variant: AspectRatioVariant;
className?: string;
}) {
const image = demoImages[variant];
return (
<AspectRatio variant={variant} className={className}>
<AspectRatioImage src={image.src} alt={image.alt} />
</AspectRatio>
);
}
export function AspectRatioPreview() {
return (
<div className="w-full max-w-md">
<DemoAspectRatio variant="video" />
</div>
);
}
export default function Demo() {
return <AspectRatioPreview />;
}