AspectRatio

Displays content within a desired ratio.

Demo

16:9

Props

This is a base primitive. It accepts standard HTML attributes plus className for styling via cn().

Source

export interface AspectRatioProps {
  ratio?: number;
  children?: React.ReactNode;
  className?: string;
}

export function AspectRatio({
  ratio = 16 / 9,
  children,
  className,
}: AspectRatioProps) {
  return (
    <div className={`relative ${className ?? ""}`}>
      <div style={{ paddingBottom: `${(1 / ratio) * 100}%` }} />
      <div className="absolute inset-0">{children}</div>
    </div>
  );
}

CLI

npx genui add aspect-ratio