Monitor framePro

Studio monitor and all-in-one desktop mockups with a stand, rendering a full app at a real desktop viewport.

Markdown

On this page

ProA full chatcn app on a studio display: the thread sidebar and the chatbot block.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/monitor-frame

Usage

tsx

import { MonitorFrame } from "@/components/ui/chatcn/pro/monitor-frame"

<MonitorFrame width={800} variant="all-in-one">
  <YourApp />
</MonitorFrame>

The screen shows a real 2560 x 1440 layout, the way a 5K display runs at 2x, so a full app fills it at true density. Pass a smaller viewport to make the UI larger. The stand is one bent sheet: the neck sits in the display's shadow and turns into a foot drawn from slightly above, with a floor shadow.

A screen scaled far below 1x shrinks its controls under the 24 px minimum target. When a frame is a picture (a hero, a gallery card), pass inert to the frame: the content stays visible but leaves the tab order and the accessibility tree. Leave it off and the screen stays fully live.

Examples

All-in-one and no stand

ProThe all-in-one silhouette with its chin, next to a black display without a stand.

Props

Prop	Type	Notes
`width`	`number`	Rendered width in px. Everything scales from it. Capped at the container
`finish`	`"auto" \| "silver" \| "graphite" \| "black" \| "white"`	Hardware material. `auto` is silver in light, graphite in dark. `light` and `dark` still work as aliases for silver and graphite
`shading`	`boolean`	Metal sheen, specular edges, chamfer and glass reflection. `false` draws flat tones. Default true
`shadow`	`boolean`	Layered contact shadow, plus a floor shadow under upright devices. Default true
`glare`	`boolean`	A soft diagonal reflection on the screen glass. Default false
`viewport`	`number`	CSS width the content renders at before it scales. Smaller makes the UI larger
`screenClassName`	`string`	Class names for the screen, for example `dark`
`variant`	`"monitor" \| "all-in-one"`	A thin display, or a chin under the glass
`stand`	`boolean`	Default true

Keyboard

The frame adds nothing to the tab order.

Accessibility

Hardware and stand are aria-hidden.

Motion

Frames are static. Nothing animates on hover.
Under forced-colors: active, the shell and the screen get a system color outline, so the silhouette survives without fills.