Aspect Ratio

Displays content within a specific aspect ratio, useful for images, videos, and other media.

1. Import

Import the Aspect Ratio component from the design system.

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

2. Props

Aspect Ratio component props.

Prop	Type	Default
ratio	number	1
asChild	boolean	false
className	string	--

3. Usages

Common Aspect Ratio patterns and configurations.

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

function Example() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted">
      <img
        src="https://example.com/image.jpg"
        alt="Image"
        className="object-cover w-full h-full"
      />
    </AspectRatio>
  );
}