Aspect Ratio

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aspect Ratio to your project and fits it to your theme.

Code

How Aspect Ratio is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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 />;
}