docs / patterns / mockup-showcase

MockupShowcase

browser or device chrome around whatever you put inside: a next/image, a bare img, a video or a live iframe. the frame is the value.

intensity · structuresrsc · server

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

the visual slot of HeroSplit, a case study, a feature sectionchildren keep their own alt text and semanticsnot a window manager. nothing inside the chrome is interactivenever nested in another MockupShowcase

a11y

the chrome, dots and address bar are all aria-hidden · the media carries its own altjest-axe
live demo · try it out
your screenshot here
customize
framewhich chrome to draw
aspectaspect-ratio of the media well
urladdress bar text, browser frame only
usagecopy
import { MockupShowcase } from "@usva-ui/react/patterns/mockup-showcase";

<MockupShowcase url="usva.dev">
  <Image src={shot} alt="The usva docs homepage" />
</MockupShowcase>

props

proptypedefaultnotes
frame"browser" | "device" | "none""browser"which chrome to draw.
urlstring—decorative text in the browser address bar.
aspectstring"16/10"any CSS aspect-ratio value.
childrenReactNode—the media. stretched to fill the well, whatever element it is.

get it

bun add @usva-ui/reactcopy
usagecopy
import { MockupShowcase } from "@usva-ui/react/patterns/mockup-showcase";

<MockupShowcase frame="browser" url="usva.dev">
  <Image src={shot} alt="The usva docs homepage" />
</MockupShowcase>