Display
Device mockup
This is the one component in the library that draws a box on purpose. Everywhere else an outline would be grouping content it has no business grouping; here the outline is the content - it is what says 'phone', and without it a screenshot is just a screenshot. So the bezel is a hairline and nothing else survives unless it carries meaning: the status bar makes it a phone, the address pill makes it a browser, the home indicator makes it a modern one. No glass gradients, no drop shadows, no coloured window dots.
npx shadcn@latest add @minflow/device-mockupWhere to use it
- Marketing and documentation, where a screen needs to be identifiable as mobile or desktop at a glance.
- Design review, to check a layout inside a realistic frame and aspect ratio rather than a browser window.
- Not as a wrapper around a live app on a real device - the frame is a picture of hardware, and doubling it is noise.
Variations
Phone
Anything whose primary surface is mobile. The 9:19.5 ratio and the status bar do the identifying, so the content inside needs no explanation.
Browser
Web products, where the address is worth showing. The pill is the only chrome, because a URL is information and window dots are not.
Components
Fifty-plus specimens in one minimalist language.
Arc
Rise
Fold
Orbit
Grid
Wave
Tablet
Layouts that only make sense at a middle width - split views, canvases, anything that is neither phone nor desktop.
Library
- Arc
- Rise
- Fold
- Orbit
- Grid
- Wave