PrimitiveAvailable

Aspect Ratio

A predictable media container that preserves its width-to-height ratio.

16 : 9

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

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

Usage

Import the component into your project and keep the source code under your 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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

A surface or content, not a control by default. No artificial hover, pressed or focus state.
Internal actions use Button or links. Informational states need text as well as color.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
ratio	number	1	Width divided by height; must be positive.

Accessibility

Rules that should remain intact when adapting the component to a product.

Keep visible text labels and the semantic HTML shown in the example.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.