Vibe UI
Initializing Vibe UI System...
Vibe UI

Aspect Ratio

Displays content within a container that maintains a fixed, user-defined dimension ratio.

Aspect Ratio

Displays content within a container that maintains a fixed, user-defined dimension ratio.

Preview

16:9 Cinematic Video

Standard horizontal widescreen presentation

CINEMATIC (16:9)

Installation

pnpm dlx vibe-ui-kit@latest add aspect-ratio

Premium Product Card (4:3)

A modern product card designed for e-commerce listings, keeping consistent dimensions for media containers.

VibeBuds
New Edition
Audio Pro
4.9

VibeBuds Solo ANC

Active Noise Cancellation with premium dual custom drivers.

$149.00

SaaS Blog Post Card (16:9)

A responsive card preview widely used in content platforms and media dashboards to display mockups and tutorials.

12:45
Design Systems•
5 min read

Building High-Fidelity UI Components with React & Tailwind CSS

Discover advanced methods for handling theme text colors, glassmorphism overlays, and component lifecycle events cleanly.

AR
Alex Rivera
Read Post

Profile Cover Banner (21:9)

An ultrawide aspect ratio container ideal for dashboard profile pages, header mockups, and workspace canvas backgrounds.

Workspace Active
JD

Jane Developer

Principal UI Engineer at Vibe UI

Props

PropTypeDefaultDescription
rationumber16 / 9The target aspect ratio for the container wrapper. Defaults to standard landscape widescreen.
classNamestringundefinedAdditional custom styles and classes to pass to the container wrapper.
styleReact.CSSPropertiesundefinedCustom inline styles to append to the wrapper element style map.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Aspect Ratio | Vibe UI