PrimitiveDisponible

Aspect Ratio

Contenedor multimedia que conserva su proporción.

16 : 9

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/aspect-ratio.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

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

export default function Demo() {
  return (
    <div className="w-full max-w-lg">
      <AspectRatio
        ratio={16 / 9}
        className="grid place-items-center rounded-lg border-2 border-ink bg-accent text-accent-foreground"
      >
        <p className="bl-type-section-title">16 : 9</p>
      </AspectRatio>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
ratio	number	1	Width divided by height; must be positive.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.