Aspectratio — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Radix UI.

Installation

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

pnpm exec frontfriend download aspect-ratio -f react --primitive radix

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

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio";
<div className="w-[400px]">
  <AspectRatio  ratio={1.7777777778}>
    <div className="grid h-full w-full place-items-center bg-neutral-subtle rounded">
      16:9 media
    </div>
  </AspectRatio>
</div>;

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

Examples

Default

import { AspectRatio } from "@/components/ui/aspect-ratio";
<div className="w-[400px]">
  <AspectRatio  ratio={16 / 9}>
    <div className="grid h-full w-full place-items-center bg-neutral-subtle rounded">
      16:9 media
    </div>
  </AspectRatio>
</div>;

Square

import { AspectRatio } from "@/components/ui/aspect-ratio";
<div className="w-[300px]">
  <AspectRatio ratio={1}>
    <div className="grid h-full w-full place-items-center bg-neutral-subtle rounded">
      1:1 media
    </div>
  </AspectRatio>
</div>;

Portrait

import { AspectRatio } from "@/components/ui/aspect-ratio";
<div className="w-[240px]">
  <AspectRatio ratio={3 / 4}>
    <div className="grid h-full w-full place-items-center bg-neutral-subtle rounded">
      3:4 media
    </div>
  </AspectRatio>
</div>;

API reference

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

Prop	Type	Default	Description
`ratio`	`number`	`1`

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