Aspect Ratio

Container that locks child content to a fixed width-to-height ratio via CSS custom property.

Default
16:9
Cinematic
21:9
Portrait
3:4
Square
1:1
Thumbnail
4:3 thumbnail

Installation

npx shadcn@latest add @byronwade/aspect-ratio

Props

PropTypeDefaultDescription
rationumberWidth divided by height (e.g. 16/9, 1, 4/3).
classNamestringAdditional classes merged onto the root.