Aspect Ratio

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

4 × 5 Placeholder

Prop reference

Auto-generated from the component source

AspectRatio

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof AspectRatioPrimitive.Root>

Code

// owner: Sona
"use client";

import Image from "next/image";

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

export default function AspectRatioExample() {
  return (
    <div className="flex flex-col gap-4">
      <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg border">
        <Image
          src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=80"
          alt="Team working"
          fill
          className="object-cover"
        />
      </AspectRatio>
      <AspectRatio
        ratio={4 / 5}
        className="overflow-hidden rounded-lg border bg-muted"
      >
        <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
          4 × 5 Placeholder
        </div>
      </AspectRatio>
    </div>
  );
}

Aspect Ratio

Component preview

On this page

Command Palette