Components

Aspect Ratio

Aspect ratio box: CSS aspect-ratio, unstyled, no hover effect.

16:9

Image panel held to 16:9. The caption sits below it.

Install

bash

npx shadcn add @eloquent/aspect-ratio

Usage

tsx

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

<AspectRatio ratio={16 / 9}>
  <img src="/lead.jpg" alt="The chamber, seen from the gallery" className="size-full object-cover" />
</AspectRatio>

ratio is width divided by height and defaults to 1. The box is as wide as its container; set a width with className.

States

1:1
1:1
4:3
4:3
16:9
16:9
3:4
3:4

The component is not interactive: it has no hover, focus or disabled state and no motion.

Keyboard

It takes no focus. Anything focusable inside it follows its own keyboard story.

Vietnamese

16:9

Khung ảnh giữ tỉ lệ 16:9. Chú thích nằm bên dưới.

Ink adaptation

None. Upstream ships it unstyled, and so does this item: no rule, fill, radius or shadow. The examples give the panel a tint-1 fill and the caption a hairline rule. Built on the CSS aspect-ratio property, with no Base UI part.