AspectRatio

AspectRatio keeps its content at a fixed width-to-height ratio. Use it for images, video, embeds and maps. AspectRatio fills its parent width, so place it in a sized container.

16 / 9

'use client';

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

function Placeholder({ label }: { label: string }) {
  return (
    <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">
      {label}
    </div>
  );
}

export default function AspectRatioDefault() {
  return (
    <div className="nx:w-80">
      <AspectRatio ratio={16 / 9}>
        <Placeholder label="16 / 9" />
      </AspectRatio>
    </div>
  );
}

Installation

npx nxds-cli@latest add aspect-ratio

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

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

Examples

Ratios

Compare square, 4:3 and 16:9 boxes side by side.

1 / 1

4 / 3

16 / 9

'use client';

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

function Placeholder({ label }: { label: string }) {
  return (
    <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">
      {label}
    </div>
  );
}

export default function AspectRatioRatios() {
  return (
    <div className="nx:flex nx:items-start nx:gap-4">
      <div className="nx:w-40">
        <AspectRatio ratio={1}>
          <Placeholder label="1 / 1" />
        </AspectRatio>
      </div>
      <div className="nx:w-40">
        <AspectRatio ratio={4 / 3}>
          <Placeholder label="4 / 3" />
        </AspectRatio>
      </div>
      <div className="nx:w-56">
        <AspectRatio ratio={16 / 9}>
          <Placeholder label="16 / 9" />
        </AspectRatio>
      </div>
    </div>
  );
}

Props

AspectRatio

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

AspectRatio keeps its content at a fixed width-to-height ratio. Use it for images, video, embeds and maps. AspectRatio fills its parent width, so place it in a sized container.

<script setup lang="ts">
import { AspectRatio } from '@/components/aspect-ratio';
</script>

<template>
  <div class="nx:w-80">
    <AspectRatio :ratio="16 / 9">
      <div
        class="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>
</template>

Installation

1
Install the following dependencies:
npm install reka-ui@^2.11.0
2
Copy and paste the following code into your project.
components/aspect-ratio/AspectRatio.vue
<script setup lang="ts"> import { AspectRatio, type AspectRatioProps as RekaAspectRatioProps, } from 'reka-ui'; export type AspectRatioProps = RekaAspectRatioProps; const props = defineProps<AspectRatioProps>(); </script> <template> <AspectRatio v-bind="props" data-slot="aspect-ratio"> <slot /> </AspectRatio> </template>
components/aspect-ratio/index.ts
export { default as AspectRatio, type AspectRatioProps, } from './AspectRatio.vue';
Keep each file at the path shown above it.
Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

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

Examples

Ratios

Compare square, 4:3 and 16:9 boxes side by side.

<script setup lang="ts">
import { AspectRatio } from '@/components/aspect-ratio';
</script>

<template>
  <div class="nx:flex nx:items-start nx:gap-4">
    <div class="nx:w-40">
      <AspectRatio :ratio="1">
        <div
          class="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 class="nx:w-40">
      <AspectRatio :ratio="4 / 3">
        <div
          class="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 class="nx:w-56">
      <AspectRatio :ratio="16 / 9">
        <div
          class="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>
  </div>
</template>

Props

AspectRatio

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