Components

Aspect Ratio

Holds media at a fixed shape so the layout does not jump while it loads.

Text reference

npx -y github:anwarlemu/opencommerce-brand-cli#release add aspect-ratio --surface site

Run from the target React 19.2+ app root with Tailwind CSS 4 and the @/* source alias. Source and examples as JSON.

aspect-ratio.preview

order.previewStanding desk, oak, 48 in

aspect-ratio.square

Wayfair

Staples

Best Buy

Usage

use-it-for.md

Use around images, video and screens that must keep their shape (a product shot, a merchant's preview). Round and clip the media inside with the window's corners and edge.

avoid.md

Stretching media to fill the ratio
A ratio frame with its own border style

Exports: AspectRatio. This component includes a client boundary. Keep event handlers and state in a client component.

Dependencies: @radix-ui/react-aspect-ratio.

Example

examples/aspect-ratio.tsx

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

export function Site() {
  return (
    <div className="w-full max-w-110 overflow-hidden rounded-panel border border-line-window bg-surface shadow-card">
      <AspectRatio ratio={16 / 9}>
        <div className="flex size-full flex-col justify-end gap-1 bg-subtle p-4">
          <span className="font-mono text-caption text-fg-muted">order.preview</span>
          <span className="font-sans text-body-sm text-fg">Standing desk, oak, 48 in</span>
        </div>
      </AspectRatio>
    </div>
  );
}

export function Square() {
  return (
    <div className="grid w-full max-w-110 grid-cols-3 gap-3">
      {["Wayfair", "Staples", "Best Buy"].map((store) => (
        <AspectRatio key={store} ratio={1} className="grid place-items-center rounded-control border border-line bg-surface">
          <span className="font-sans text-body-sm text-fg-muted">{store}</span>
        </AspectRatio>
      ))}
    </div>
  );
}

Source

components/ui/aspect-ratio.tsx

"use client";

import * as React from "react";
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";

// Holds media at a fixed shape (a product shot, a store's logo tile, a screen in a window). The frame takes no style of
// its own; round and clip the media inside it with the window's corners and edge.
function AspectRatio(props: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
}

export { AspectRatio };

Reference: Extrapolated from opencommerce (the windows' framed screens).