Aspect Ratio

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { AspectRatio } from "@line/abc-def-react/aspect-ratio";

<script setup lang="ts">
import { AspectRatio } from "@line/abc-def-vue/aspect-ratio";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { AspectRatio } from "@line/abc-def-react/aspect-ratio";

export function Example() {
  return (
    <AspectRatio ratio={16 / 9}>
      <div className="grid h-full place-items-center rounded-md border bg-muted">16:9</div>
    </AspectRatio>
  );
}

<script setup lang="ts">
import { AspectRatio } from "@line/abc-def-vue/aspect-ratio";
</script>

<template>
  <AspectRatio :ratio="16 / 9">
    <div class="bg-muted grid h-full place-items-center rounded-md border">
      16:9
    </div>
  </AspectRatio>
</template>

Component tokens

This component does not define a dedicated component token file. It inherits shared semantic tokens and utility classes.

Composition exports

Usage notes

• Use for screenshots, video, cards, and responsive media placeholders.
• Related component tokens use the `aspect-ratio` token group in `@line/abc-def-styles/css`.