AspectRatio

16 / 9

Installation

npm install @radix-ui/react-aspect-ratio@^1.1.8

components/aspect-ratio/aspect-ratio.tsx
components/aspect-ratio/index.ts

Code

'use client';

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

export default function AspectRatioDemo() {
  return (
    <div className="nx:w-full nx:max-w-sm">
      <AspectRatio ratio={16 / 9}>
        <div className="nx:flex nx:size-full nx:items-center nx:justify-center nx:rounded-md nx:bg-muted nx:text-muted-foreground nx:typography-label-small">
          16 / 9
        </div>
      </AspectRatio>
    </div>
  );
}

Props

AspectRatio

AspectRatio adds no props of its own; it accepts the props of the element or primitive it wraps.

Examples

Ratios

1 / 1

4 / 3

'use client';

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

export default function AspectRatioRatios() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-start nx:gap-4">
      <div className="nx:w-40">
        <AspectRatio ratio={1}>
          <div className="nx:flex nx:size-full nx:items-center nx:justify-center nx:rounded-md nx:bg-muted nx:text-muted-foreground nx:typography-label-small">
            1 / 1
          </div>
        </AspectRatio>
      </div>
      <div className="nx:w-40">
        <AspectRatio ratio={4 / 3}>
          <div className="nx:flex nx:size-full nx:items-center nx:justify-center nx:rounded-md nx:bg-muted nx:text-muted-foreground nx:typography-label-small">
            4 / 3
          </div>
        </AspectRatio>
      </div>
    </div>
  );
}