Layout Primitive

Aspect Ratio

Maintain perfect proportions effortlessly. A specialized container that preserves a consistent width-to-height ratio for images, videos, and dynamic content.

Main Proportions

16:94:31:1

Preview Mode

16:9 Cinematic

Ultra Wide (21:9)

Social Portrait (4:5)

Usage

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

// Default is 1:1 square
<AspectRatio ratio={4 / 3}>
  {/* Any children like Image, Video, or View */}
</AspectRatio>

Properties

ratio

number

Target aspect ratio. Defaults to 1 (square). Use 16/9 for cinematic.

children

ReactNode

The content to be rendered within the aspect ratio container.

className

string

Additional Tailwind CSS classes for styling the container.

Installation

$npx kachindo-ui add aspect-ratio
Profile