Aspect Ratio

# Brok UI: Aspect Ratio (`aspect-ratio`)

Constrains its content to a given width/height ratio.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add aspect-ratio
```

## Usage

```blade
<x-ui.aspect-ratio ratio="16 / 9" class="rounded-lg border border-border">
    <div class="flex h-full w-full items-center justify-center bg-muted text-muted-foreground">{{ __('16 / 9') }}</div>
</x-ui.aspect-ratio>
```

## Props

- `ratio` (string, default `16 / 9`) — CSS aspect-ratio value, such as "16 / 9" or "1 / 1".

## Use when

- Use to structure hierarchy, spacing, and responsiveness so content is easier to scan and navigate.
- Reserving stable space for media (images, video, embeds) before it loads, to prevent layout shift.
- Constraining a flexible-width container to a fixed width/height ratio, such as 16/9 or 1/1.

## Avoid when

- Do not let layout primitives substitute for semantics, headings, or interaction rules users still need.
- The content already has intrinsic dimensions and layout shift is not a concern; a plain width/height suffices.
- The content needs to scroll within a fixed viewport rather than scale to a ratio; use scroll-area.

## Anti-patterns

- Using visual layout as a substitute for semantic structure

## Rules

- Use the `<brok:aspect-ratio>` tag (or `<x-ui.aspect-ratio>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/aspect-ratio
- Registry JSON (files, props, contract): https://brokui.dev/r/open/aspect-ratio.json