Yugen UI

AspectRatio

AspectRatio keeps a frame at a fixed width-to-height ratio at any width, for video, images, banners or stories.

Uses the CSS aspect-ratio property, so the space is reserved from the start and the layout doesn't jump when an image or video finishes loading. The frame takes 100% of the container's width (override it with a className such as w-24), rounds its corners and clips overflowing content. The child fills the frame (Image fit="cover", BloomArt, size-full).
4:32

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { AspectRatio } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Brand bloom — 4:3

4:3 illustration

The classic photo ratio; suits article cards and product thumbnails.

  • AC
  • MG
  • SL
  • PP
  • JK
  • TN
  • CN
  • HS

1:1 avatar grid

Squares that scale with the grid columns; rounded-circular for avatars, rounded-xlarge for product images.

Blossom season 2026

Bloom forecast by region

21:9 banner

A wide hero strip. The text sits on a neutral card for enough contrast instead of directly on the gradient.

Ueno
Kyoto
Hokkaido

9:16 story

A full-screen portrait frame for phones; set a fixed width (w-24) and let the height follow.

Usage

Do
  • Wrap images and videos loaded from the network in AspectRatio to reserve their space and avoid layout shift (CLS).
  • Use the standard ratio for the content: 16:9 video, 4:3 photo, 1:1 avatar, 21:9 banner, 9:16 story.
  • Make the child fill the frame: Image fit="cover" or the size-full class.
Don't
  • Don't set both a fixed height and a ratio. The height wins and the frame gets distorted.
  • Don't put important text directly on an image or gradient without a background that guarantees contrast.
  • Don't use 9:16 for content people read on desktop. It is too narrow.

Props

Prop · TypeDefaultDescription
rationumberDefault: 1Width / height ratio, e.g. 16 / 9, 4 / 3, 21 / 9, 9 / 16.
classNamestringDefault: —Radius, background, width (w-full by default); the frame is always relative and overflow-hidden.
styleCSSPropertiesDefault: —Merged after aspect-ratio, so it can override it.
...propsHTMLAttributes<HTMLDivElement>Default: —Passed to the outer div.