Layout

Aspect ratio

Reserves space at a fixed ratio so media cannot cause layout shift.

Server safeSource

Import

import { AspectRatio } from '@the_viveksingh/vivek-ui'

Reserve the space before the media loads

The box takes its height from its own width, so an image or iframe dropping in causes no layout shift.

16 / 9 - reserves its height, so nothing shifts once the media loads

<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
</AspectRatio>

Square

1 / 1

<AspectRatio ratio={1}>
  <img src="/avatar.jpg" alt="" />
</AspectRatio>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for AspectRatio
Prop	Type	Default	Description
`ratio`	`number`	—	Width-to-height ratio. `16 / 9` and `1.777` are equivalent. Defaults to `16 / 9`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

AspectRatio carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.