Shadcn.io is not affiliated with official shadcn/ui
9:16 Aspect Ratio (Vertical/Mobile)
A 9:16 vertical aspect ratio container for mobile stories, TikTok content, and portrait-oriented media
Mobile-first means vertical. This React component wraps content in a 9:16 aspect ratio using shadcn/ui's AspectRatio built on Radix UI primitives. The ratio prop (9 / 16) maintains portrait smartphone proportions perfect for stories and vertical video, preventing layout shift when media loads. Perfect for Instagram Stories, TikTok videos, Snapchat content, or any mobile-first vertical media—keeps portrait aspect locked while adapting width responsively for immersive full-screen smartphone viewing experiences.
9:16 Aspect Ratio (Vertical/Mobile) preview
Installation
Related Components
16:9 Widescreen
Horizontal inverse of vertical
1:1 Square
Equal width and height ratio
4:3 Traditional
Classic television aspect ratio
3:2 Photography
DSLR camera aspect ratio
21:9 Ultrawide
Extra wide cinematic aspect ratio
2:1 Panoramic
Wide panoramic aspect ratio
FAQ
Was this page helpful?
Sign in to leave feedback.