Aspect Ratio

Component 40

About

Displays content within a desired ratio.

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

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted">
      <Image
        src="https://cdn.21st.dev/assets/mirror/4a/4a036b28b8c09c74e3c094c95910fc41dfad836e8f93894f3f9b26b56ec20f63.jpg"
        alt="Photo by Drew Beamer"
        fill
        className="h-full w-full rounded-md object-cover"
      />
    </AspectRatio>
  )
}