Layout

Aspect Ratio

Displays content within a desired ratio, useful for responsive images, videos, and embeds.

Preview

import { AspectRatio } from '@brika/clay/components/aspect-ratio';

/** 16/9 ratio, the standard for responsive images and video embeds. */
export default function AspectRatioDefaultDemo() {
  return (
    <div className="w-full max-w-sm overflow-hidden rounded-lg">
      <AspectRatio ratio={16 / 9}>
        <div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground text-sm rounded-lg">
          16 / 9
        </div>
      </AspectRatio>
    </div>
  );
}

01 Installation

Install

Pull Aspect Ratio from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { AspectRatio } from "@brika/clay";

tsxGranular1 line

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

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxAspect Ratio.tsx14 lines

import { AspectRatio } from '@brika/clay/components/aspect-ratio';

/** 16/9 ratio, the standard for responsive images and video embeds. */
export default function AspectRatioDefaultDemo() {
  return (
    <div className="w-full max-w-sm overflow-hidden rounded-lg">
      <AspectRatio ratio={16 / 9}>
        <div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground text-sm rounded-lg">
          16 / 9
        </div>
      </AspectRatio>
    </div>
  );
}

03 Examples

Aspect Ratio, every way

Portrait

3/4 portrait ratio, common for product photos and editorial images.

GitHub

import { AspectRatio } from '@brika/clay/components/aspect-ratio';

/** 3/4 portrait ratio, common for product photos and editorial images. */
export default function AspectRatioPortraitDemo() {
  return (
    <div className="w-40 overflow-hidden rounded-lg">
      <AspectRatio ratio={3 / 4}>
        <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-muted text-muted-foreground text-sm rounded-lg">
          <span className="font-medium">3 / 4</span>
          <span className="text-xs">Portrait</span>
        </div>
      </AspectRatio>
    </div>
  );
}

Square

Square ratio, useful for profile photos, avatars, and thumbnails.

GitHub

import { AspectRatio } from '@brika/clay/components/aspect-ratio';

/** Square ratio, useful for profile photos, avatars, and thumbnails. */
export default function AspectRatioSquareDemo() {
  return (
    <div className="w-40 overflow-hidden rounded-lg">
      <AspectRatio ratio={1}>
        <div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground text-sm rounded-lg">
          1 / 1
        </div>
      </AspectRatio>
    </div>
  );
}

Video

4/3 ratio, traditional video and presentation format.

GitHub

import { AspectRatio } from '@brika/clay/components/aspect-ratio';

/** 4/3 ratio, traditional video and presentation format. */
export default function AspectRatioVideoDemo() {
  return (
    <div className="w-full max-w-sm overflow-hidden rounded-lg">
      <AspectRatio ratio={4 / 3}>
        <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-muted text-muted-foreground text-sm rounded-lg">
          <span className="font-medium">4 / 3</span>
          <span className="text-xs">Classic video format</span>
        </div>
      </AspectRatio>
    </div>
  );
}

04 Accessibility

Accessibility

The container is purely presentational, no ARIA role or keyboard behavior.
Content placed inside inherits normal focus order; ensure images carry meaningful alt text.

05 API reference

API reference

Props specific to Aspect Ratio. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

No wrapper-specific props, all attributes pass through to the underlying primitive.