16:9 widescreen aspect ratio
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A landscape 16:9 box, the shape of video players and modern slide decks, in a column up to 28rem wide
When to use
- Video, banner and screenshot slots in widescreen shapes such as 16:9, 21:9 and 16:10
- Photo and thumbnail slots in square, landscape or portrait shapes, cropped to fill the box
- Media boxes whose height follows their width, so the space is held before the image arrives
When not to use
- A strip wider than standard video for a cinematic page header: use the Aspect Ratio Ultrawide example
- A sign in page split between the form and a full height image panel: use the Auth blocks
- Several images the user swipes or steps through one at a time: use the Carousel component
- A choice of exactly one option from a short visible list: use the Radio Group component
Agent notes
- Pass
ratioas width divided by height, as in 16 / 9; the base twin requires it and the radix twin falls back to 1 when it is missing - Every
imgis a random grayscalepicsum.photosplaceholder whosealtis only the ratio label; swapsrcand write a realalt - Set width on a parent, as the
max-w-mdormax-w-xswrapper does; radix putsclassNameon an absolute inner layer, where a width class breaks the ratio
https://reui.io/components/aspect-ratio/c-aspect-ratio-1.mdget_example("c-aspect-ratio-1")npx shadcn@latest add @reui/c-aspect-ratio-1Shadcn Components in Aspect Ratio Widescreen
About Shadcn Aspect Ratio Widescreen
16:9 widescreen aspect ratio. Built with the Aspect Ratio component. A free, open source shadcn aspect ratio example you can install with npx shadcn@latest add @reui/c-aspect-ratio-1 and edit as your own code.
What You Can Build With Shadcn Aspect Ratio Widescreen
- Composes Aspect Ratio, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-aspect-ratio-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Aspect Ratio Examples
- Standard 4:3 standard aspect ratio
- Square 1:1 square aspect ratio
- Ultrawide 21:9 ultrawide aspect ratio
- Tall Portrait 9:16 portrait aspect ratio
- Classic Photo 3:2 classic photography aspect ratio
- Social Portrait 4:5 social media portrait aspect ratio
- Monitor 16:10 computer monitor aspect ratio
Related Shadcn Component Categories
Open-source shadcn attachment components for chat composers, upload states, and file previews.
Open-source shadcn autocomplete components for smart search, typeahead inputs, and suggestion lists.
Open-source shadcn avatar components for user profiles, team directories, and comment threads.
Open-source shadcn badge components for status labels, feature tags, and count indicators.
Open-source shadcn breadcrumb components for navigation trails, docs hierarchy, and app wayfinding.
Open-source shadcn bubble components for chat threads, assistant replies, and message reactions.
Frequently Asked Questions
When should I use Shadcn Aspect Ratio Widescreen?
Use it for a landscape 16:9 box, the shape of video players and modern slide decks, in a column up to 28rem wide.
Shadcn Aspect Ratio as a whole fits:
- Video, banner and screenshot slots in widescreen shapes such as 16:9, 21:9 and 16:10
- Photo and thumbnail slots in square, landscape or portrait shapes, cropped to fill the box
- Media boxes whose height follows their width, so the space is held before the image arrives
For a strip wider than standard video for a cinematic page header, use the Aspect Ratio Ultrawide example. For a sign in page split between the form and a full height image panel, use the Auth blocks. For several images the user swipes or steps through one at a time, use the Carousel component. For a choice of exactly one option from a short visible list, use the Radio Group component.
How do I install Shadcn Aspect Ratio Widescreen?
Is Shadcn Aspect Ratio Widescreen free to use?
Which components does Shadcn Aspect Ratio Widescreen use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.