Mockup

A device with a screen you can put anything on: a phone, a tablet, a monitor or a laptop, with the system's own status bar, dock or taskbar drawn on it. The screen is a viewport at the device's real resolution, so the content inside is laid out against a phone rather than against the page.

import { Mockup } from 'neba';

<Mockup device="mobile" os="ios" width={260}>
  <YourScreen />
</Mockup>;

Props

Prop	Type	Default	Description
device *	'desktop' | 'tablet' | 'mobile'	—	Which machine this is a picture of. It picks the shape, the resolution ladder and which systems are on offer
os	'macos' | 'windows' | 'linux' | 'ios' | 'ipados' | 'android'	device's own	The system whose chrome is drawn. A desktop runs macos, windows or linux; a tablet ipados or android; a phone ios or android. Anything else falls back to the device default
hardware	'monitor' | 'laptop'	'monitor'	What holds a desktop screen up: a stand under it, or a keyboard in front of it. Ignored on a tablet and a phone
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	How big the device is, on a five-step ladder of real resolutions per device. As on Box, it is neither a height nor a type scale
resolution	{ width: number; height: number }	—	The screen's logical resolution in CSS pixels, when none of the five steps is the machine you mean. The viewport the content lays out against, not the panel's physical pixel count
orientation	'portrait' | 'landscape'	'portrait'	Which way a handheld is held. The screen, the bezel and the cut-out turn together. Ignored on a desktop
bezel	'none' | 'thin' | 'standard' | 'thick'	'standard'	How much hardware there is around the screen. none is no hardware at all rather than a thinner frame; thick is an older device with a forehead and a chin
finish	'graphite' | 'silver' | 'white'	'graphite'	What the hardware is made of. Fixed colours rather than theme tokens, so it stays the same on a page switched to dark
notch	'none' | 'notch' | 'dynamic-island' | 'punch-hole'	device's own	The camera cut-out. Hardware rather than chrome, so it is drawn even with systemUi off. Defaults to what the device would have
systemUi	boolean	true	The system's own bars: a status bar and a home indicator, a menu bar and a dock, a taskbar. Each takes its own space rather than covering the content
scroll	boolean	false	Whether content taller than the screen scrolls. Off it is clipped, which is what a still picture of a device wants
wallpaper	string	페이지의 surface 색	What is behind the content: any CSS background value. A colour, a gradient, a url()
time	string	'9:41'	The clock in the status bar or the taskbar, and the only text the chrome draws. A string rather than a Date: reading the real one would differ between the server and the browser
width	number | string	'100%'	The rendered width of the device on the page. Numbers are pixels. The screen keeps its own resolution and the whole device is scaled to fit
height	number | string	—	The rendered height. Given on its own, the width follows the device's proportion
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	The accent in the chrome: a dock's first icon, a taskbar's
elevationshared	0 | 1 | 2 | 3	0	How far off the page the device sits. Drawn as a silhouette rather than a box, and it does not shrink with the device
transitionshared	NebaTransition	—	An entrance animation, run once on mount (transition="fade"). Wrap it in an Animate* component for a trigger or a replay
render	useRender.RenderProp	—	Renders something other than a div (render={<figure />}). Base UI's own escape hatch
children	ReactNode	—	What is on the screen

Native <div> attributes pass through, and render swaps the element. The shared axes are described in prop conventions.

Three props belong to one device and are ignored on the others: hardware is a desktop's, orientation is a handheld's, and an os a device does not run falls back to that device's default.

Examples

device

device is the only prop with no default. It picks the shape, the resolution ladder and which systems are on offer: a desktop runs macos, windows or linux, a tablet ipados or android, a phone ios or android.

import { Mockup } from 'neba';
import { DesktopScreen, PhoneScreen } from './screen';

export default function MockupDevices() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <Mockup device="desktop" width={380}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="tablet" width={150}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="mobile" width={110}>
        <PhoneScreen />
      </Mockup>
    </div>
  );
}

Sizing the mockup

width and height set how big the device is drawn on the page: a number in pixels, or any CSS length. Given one, the other follows the device's proportion; given neither, it fills the width it is in. Whatever it comes to, the screen inside stays at its own resolution and the whole device is scaled to fit.

<Mockup device="mobile" width={260} />
<Mockup device="desktop" height={320} />
<Mockup device="tablet" width="100%" />

size and resolution

size is a five-step ladder of real resolutions per device: a phone from 320 to 430 CSS pixels wide, a desktop from 1024 to 1920. resolution takes a { width, height } pair and overrides it.

Because the screen is a container named neba-screen, content inside can answer to the device with a container query rather than to the window. Both mockups below are 300 pixels wide on the page; only the screens behind them differ.

import { Mockup } from 'neba';

/**
 * Both mockups are drawn the same width on the page. What differs is the screen
 * behind that: 390 CSS pixels on the left and 1440 on the right, which is why
 * the same three cards stack on one and sit in a row on the other.
 */
export default function MockupResolution() {
  return (
    <div className="flex w-full flex-wrap items-start justify-center gap-5">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">390 × 844</span>
        <Mockup device="mobile" bezel="thin" systemUi={false} notch="none" width={230}>
          <Cards />
        </Mockup>
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">1440 × 900</span>
        <Mockup device="desktop" bezel="thin" systemUi={false} width={230}>
          <Cards />
        </Mockup>
      </div>
    </div>
  );
}

/**
 * A container query rather than a media query: the screen is a container named
 * `neba-screen`, so this answers to the device it is on rather than to the
 * window the page is in.
 */
function Cards() {
  return (
    <div className="grid grid-cols-1 gap-3 p-4 @min-[600px]/neba-screen:grid-cols-3">
      {['Requests', 'Error rate', 'Latency'].map((label) => (
        <div
          key={label}
          className="rounded-(--neba-radius-sm) border border-(--neba-border) bg-(--neba-primary-soft) p-4 text-[0.8125rem]"
        >
          {label}
        </div>
      ))}
    </div>
  );
}

os

os decides which bars are drawn and where: a menu bar and a floating dock, a centred taskbar, a top bar with a dock down the leading edge. The chrome is an impression rather than a copy: abstract shapes in Neba's own tokens, with the clock as the only text.

import { Mockup, type NebaMockupOs } from 'neba';

const SYSTEMS: NebaMockupOs[] = ['macos', 'windows', 'linux'];

export default function MockupOs() {
  return (
    <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-3">
      {SYSTEMS.map((os) => (
        <div key={os} className="flex flex-col gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{os}</span>
          <Mockup device="desktop" os={os} bezel="thin" wallpaper="var(--neba-panel-hover)" />
        </div>
      ))}
    </div>
  );
}

On a handheld the pair is a status bar and the bar at the bottom: a home indicator on ios and ipados, three navigation glyphs on android.

import { Mockup } from 'neba';

/**
 * A phone runs `ios` or `android`, a tablet `ipados` or `android`. The status
 * bar, the bar at the bottom and the cut-out all follow from the pair.
 */
export default function MockupHandhelds() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">ios</span>
        <Mockup device="mobile" os="ios" width={128} />
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">android</span>
        <Mockup device="mobile" os="android" width={128} />
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">ipados</span>
        <Mockup device="tablet" os="ipados" width={168} />
      </div>
    </div>
  );
}

hardware

On a desktop, hardware is what holds the screen up: a stand under it, or a keyboard in front of it. It is ignored on a tablet and a phone.

import { Mockup } from 'neba';
import { DesktopScreen } from './screen';

export default function MockupHardware() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">monitor</span>
        <Mockup device="desktop" hardware="monitor" width={340}>
          <DesktopScreen />
        </Mockup>
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">laptop</span>
        <Mockup device="desktop" hardware="laptop" os="macos" width={340}>
          <DesktopScreen />
        </Mockup>
      </div>
    </div>
  );
}

bezel

bezel is how much hardware there is around the screen. none is not a thinner frame but no hardware at all: the screen on its own with its corners cut. thick is an older device: narrow sides with a forehead and a chin.

import { Mockup, type NebaMockupBezel } from 'neba';

const BEZELS: NebaMockupBezel[] = ['none', 'thin', 'standard', 'thick'];

export default function MockupBezel() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-5">
      {BEZELS.map((bezel) => (
        <div key={bezel} className="flex flex-col items-center gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{bezel}</span>
          {/* `thick` is an older phone rather than a wider frame: narrow sides,
              a forehead and a chin — and no cut-out, because a device with that
              much bezel had nowhere to put one. */}
          <Mockup
            device="mobile"
            bezel={bezel}
            notch={bezel === 'thick' ? 'none' : undefined}
            width={112}
          />
        </div>
      ))}
    </div>
  );
}

finish

finish is what the hardware is made of. The three are fixed colours rather than theme tokens, so a graphite phone stays graphite on a page switched to dark.

import { Mockup, type NebaMockupFinish } from 'neba';

const FINISHES: NebaMockupFinish[] = ['graphite', 'silver', 'white'];

export default function MockupFinish() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-5">
      {FINISHES.map((finish) => (
        <div key={finish} className="flex flex-col items-center gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{finish}</span>
          <Mockup device="mobile" finish={finish} elevation={1} width={112} />
        </div>
      ))}
    </div>
  );
}

notch

notch is the camera cut-out: a dynamic-island, a notch, a round punch-hole, or none. It defaults to what the device would have: an island on an iOS phone, a punch hole on an Android one, nothing on a tablet or a desktop.

It is hardware rather than chrome, so it is drawn whether or not systemUi is on, and it moves to the leading edge in landscape.

import { Mockup, type NebaMockupNotch } from 'neba';

const NOTCHES: NebaMockupNotch[] = ['dynamic-island', 'notch', 'punch-hole', 'none'];

export default function MockupNotch() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-5">
      {NOTCHES.map((notch) => (
        <div key={notch} className="flex flex-col items-center gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{notch}</span>
          <Mockup device="mobile" notch={notch} width={112} />
        </div>
      ))}
    </div>
  );
}

orientation

orientation turns a handheld. The screen, the bezel and the cut-out all turn with it. A desktop ignores it, because its stand does not turn.

import { Mockup } from 'neba';
import { DesktopScreen } from './screen';

/** The bezel and the cut-out turn with the screen. */
export default function MockupOrientation() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <Mockup device="tablet" orientation="portrait" width={150}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="tablet" orientation="landscape" width={230}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="mobile" orientation="landscape" notch="notch" width={200} />
    </div>
  );
}

systemUi

Every bar takes its own space rather than covering the content, so systemUi={false} gives the screen back to children rather than uncovering anything that was hidden.

import { Mockup } from 'neba';
import { PhoneScreen } from './screen';

export default function MockupSystemUi() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">systemUi</span>
        <Mockup device="mobile" width={140}>
          <PhoneScreen />
        </Mockup>
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">systemUi={'{false}'}</span>
        {/* The bars gave their space back rather than uncovering anything — and
            the cut-out stayed, because that one is a hole in the glass. */}
        <Mockup device="mobile" systemUi={false} width={140}>
          <PhoneScreen />
        </Mockup>
      </div>
    </div>
  );
}

scroll

Content taller than the screen is clipped by default, which is what a still picture of a device wants. scroll makes the screen scroll instead.

import { Card, Chip, Mockup, Typography } from 'neba';

const SERVICES = [
  'api-gateway',
  'web-storefront',
  'checkout',
  'search-index',
  'image-resizer',
  'mailer',
  'billing',
  'webhooks',
  'auth',
  'analytics',
  'scheduler',
  'notifications',
  'exports',
  'admin'
];

export default function MockupScroll() {
  return (
    <Mockup device="mobile" size="xs" scroll width={150}>
      <div className="flex flex-col gap-2 p-3">
        {SERVICES.map((service, index) => (
          <Card key={service} size="xs">
            <div className="flex items-center justify-between gap-2">
              <Typography level="caption">{service}</Typography>
              <Chip size="xs" variant="text" color={index % 4 === 1 ? 'info' : 'success'}>
                {index % 4 === 1 ? 'Building' : 'Live'}
              </Chip>
            </div>
          </Card>
        ))}
      </div>
    </Mockup>
  );
}

wallpaper

wallpaper is what sits behind the content: any CSS background value. A colour, a gradient, a url(). It defaults to the page's own surface colour.

import { Mockup } from 'neba';

export default function MockupWallpaper() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <Mockup
        device="mobile"
        width={128}
        wallpaper="linear-gradient(160deg, oklch(62% 0.19 262), oklch(48% 0.16 318))"
      />
      <Mockup
        device="mobile"
        width={128}
        wallpaper="url(/samples/photos/lighthouse-cliff-wildflowers.jpg) center / cover"
      />
      <Mockup
        device="desktop"
        hardware="laptop"
        width={300}
        wallpaper="url(/samples/photos/alpine-lake-dawn.jpg) center / cover"
      />
    </div>
  );
}

elevation

elevation raises the device off the page. The shadow is drawn as a silhouette, so it follows a lid on a neck on a foot rather than the box around them, and it does not shrink when the device is scaled down.

<Mockup device="mobile" elevation={2} width={240} />

Accessibility

• Every part of the device is aria-hidden: the frame, the bars and the cut-out. What a screen reader reaches is children and nothing else, which is what a mockup is: a picture around real content.
• The clock is decoration and is not read out. It is the only text the chrome draws.
• The mockup adds no role and no name of its own. Give it one (aria-label, or a <figure> with a caption through render) when the picture itself carries meaning on the page.
• Content inside stays interactive and focusable. A device scaled to a quarter of its size has controls a quarter of the size, which is worth knowing before putting a form in one.