Componentes

Aspect Ratio

Manter proporção fixa de mídia (16:9, 1:1, etc.).

Dados e layout
16:9
Código da demo
"use client";

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

export function Demo() {
  return (
    <div className="w-full max-w-md overflow-hidden rounded-md border border-border">
      <AspectRatio ratio={16 / 9}>
        <div className="flex size-full items-center justify-center bg-muted text-muted-foreground">
          <span className="fe-caption">16:9</span>
        </div>
      </AspectRatio>
    </div>
  );
}
Acessibilidade
O conteúdo interno carrega a semântica; ratio é só layout.
Importar
import { AspectRatio } from "@financeequity/ui/aspect-ratio"

Neste repositório:

import { AspectRatio } from "@/components/ui/aspect-ratio"
Dependências
radix-ui