21:9 ultrawide aspect ratio
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: An extra wide 21:9 strip for cinematic banners and page headers, at most 28rem across
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
- Ordinary widescreen video and thumbnails at the usual TV shape: use the Aspect Ratio Widescreen 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-4.mdget_example("c-aspect-ratio-4")npx shadcn@latest add @reui/c-aspect-ratio-4Shadcn Components in Aspect Ratio Ultrawide
About Shadcn Aspect Ratio Ultrawide
21:9 ultrawide 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-4 and edit as your own code.
What You Can Build With Shadcn Aspect Ratio Ultrawide
- 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-4
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Aspect Ratio Examples
- Widescreen 16:9 widescreen aspect ratio
- Standard 4:3 standard aspect ratio
- Square 1:1 square 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 Ultrawide?
Use it for an extra wide 21:9 strip for cinematic banners and page headers, at most 28rem across.
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 ordinary widescreen video and thumbnails at the usual TV shape, use the Aspect Ratio Widescreen 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 Ultrawide?
Is Shadcn Aspect Ratio Ultrawide free to use?
Which components does Shadcn Aspect Ratio Ultrawide 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.