'/%3e%3cpath%20d='M178.8%2051C182.335%2051%20185.2%2053.8654%20185.2%2057.4V83C185.2%2086.5346%20182.335%2089.4%20178.8%2089.4H114.8C111.6%2089.4%20108.4%2092.6%20108.4%2095.8V121.4C108.4%20124.935%20105.535%20127.8%20102%20127.8H76.4002C72.8656%20127.8%2070.0002%20124.935%2070.0002%20121.4V95.8C70.0002%2092.2654%2072.8656%2089.4%2076.4002%2089.4H102C105.2%2089.4%20108.4%2086.2%20108.4%2083V57.4C108.4%2053.8654%20111.266%2051%20114.8%2051H178.8Z'%20fill='oklch(0.643%200.19%20270.83)'/%3e%3c/svg%3e)
medialayout
aspect-ratio
Lock media to a ratio box.
pnpm dlx shadcn@latest add aspect-ratioLive preview
Interactive example with the installed component.
16:9
Use it when
Start with the component when this interaction is the smallest useful building block. Compose a Fenod block when the user needs a full workflow instead.
Illustration brief
Minimal UI illustration, a framed media placeholder with caption lines, warm off-white background, olive charcoal accents, thin borders, no gradients, no text, no logos, no device mockup.
Related components
Shares an interaction or layout role with Aspect Ratio.