Aspect Ratio

Displays content within a desired ratio.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/aspect-ratio.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Common Ratios

1:1 (Square)

1:1

16:9 (Video)

16:9

4:3 (Classic)

4:3

21:9 (Cinematic)

21:9

Usage

How to use this component in your code.

<AspectRatio ratio={1}>Square</AspectRatio>
<AspectRatio ratio={16 / 9}>Video</AspectRatio>
<AspectRatio ratio={4 / 3}>Classic</AspectRatio>
<AspectRatio ratio={21 / 9}>Cinematic</AspectRatio>