React 9:16 Aspect Ratio (Vertical/Mobile)
A 9:16 vertical aspect ratio container for mobile stories, TikTok content, and portrait-oriented media
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aspect-ratio-standard-6.jsonRelated patterns you will also like
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