Studiov0.6.0

AspectRatio

Tier 1 — shadcn
Layout

Maintains a consistent width-to-height ratio for responsive media containers.

Live Preview

16:9

Code

import { AspectRatio } from "@regen/ui";

<AspectRatio />

Props Inspector

No configurable props for this component.

Documentation

Use Cases

  • •Video embeds
  • •Image placeholders
  • •Map containers

Do

  • ✓Use ratio prop (e.g. 16/9, 1/1)
  • ✓Place Image or iframe inside

Don't

  • ✗Don't use for non-media content
  • ✗Don't set explicit height — the ratio controls it