Aspect Ratio

Locks children to a width-to-height ratio.

Data & surfacesServer-safe

Install

bash

npx @agents-npm-packages/vibeui add aspect-ratio --dir ./src/components/ui

Import

tsx

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

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<AspectRatio>

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered inside the component.
ratio	number	16 / 9	Width divided by height, e.g. 16 / 9.
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/aspect-ratio.tsx

import { cn } from "@/lib/utils";

/** Locks children to a width-to-height ratio. */
export function AspectRatio({
  ratio = 16 / 9,
  className,
  children,
}: {
  ratio?: number;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <div
      className={cn("relative w-full overflow-hidden", className)}
      style={{ aspectRatio: String(ratio) }}
    >
      <div className="absolute inset-0">{children}</div>
    </div>
  );
}

Exports AspectRatio. Peer dependencies: clsx, tailwind-merge.