Aspectratio

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download aspect-ratio -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

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

const Component = UI.AspectRatio;

const args = {
  "ratio": 1.7777777778,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div style="width: 400px">
    <AspectRatio v-bind="args"
      ><div
        class="grid h-full w-full place-items-center rounded bg-[var(--layer-muted)]"
      >
        16:9 media
      </div></AspectRatio
    >
  </div>
</template>

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

• AspectRatio

Examples

Default

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

const Component = UI.AspectRatio;

const args = {
  "ratio": undefined,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div style="width: 400px">
    <AspectRatio v-bind="args" :ratio="args.ratio ?? 16 / 9"
      ><div
        class="grid h-full w-full place-items-center rounded bg-[var(--layer-muted)]"
      >
        16:9 media
      </div></AspectRatio
    >
  </div>
</template>

Square

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

const Component = UI.AspectRatio;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div style="width: 300px">
    <AspectRatio :ratio="1"
      ><div
        class="grid h-full w-full place-items-center rounded bg-[var(--layer-muted)]"
      >
        1:1 media
      </div></AspectRatio
    >
  </div>
</template>

Portrait

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

const Component = UI.AspectRatio;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div style="width: 240px">
    <AspectRatio :ratio="3 / 4"
      ><div
        class="grid h-full w-full place-items-center rounded bg-[var(--layer-muted)]"
      >
        3:4 media
      </div></AspectRatio
    >
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.