Tablet framePro

A generic tablet mockup in portrait and landscape, with an optional keyboard case and safe area insets for the content.

Markdown

On this page

ProA landscape tablet in a keyboard case, running a chat in a reading width column.

Installation

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

Usage

tsx

import { TabletFrame } from "@/components/ui/chatcn/pro/tablet-frame"

<TabletFrame width={640} orientation="landscape" keyboard>
  <YourApp />
</TabletFrame>

The screen exposes its safe area as --chatcn-safe-top, --chatcn-safe-right, --chatcn-safe-bottom and --chatcn-safe-left, in viewport px, the way env(safe-area-inset-*) reads on the device. Pad with pt-(--chatcn-safe-top) and friends.

Examples

Orientation and keyboard case

The keyboard case only fits in landscape. It is drawn the way product shots show it from the front: the tablet floats on its hinge and the case is a thin slab under it.

ProPortrait and landscape, with the keyboard case on or off.

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`
`orientation`	`"portrait" \| "landscape"`	Default portrait
`keyboard`	`boolean`	Keyboard case under the tablet. Landscape only
`statusBar`	`boolean \| ReactNode`	Clock and date at the start, glyphs at the end
`homeIndicator`	`boolean`	Default true
`buttons`	`boolean`	Default true

Keyboard

The frame adds nothing to the tab order.

Accessibility

Hardware, the keyboard case and the status bar are aria-hidden.

Motion

Orientation changes turn the tablet a quarter turn over 300 ms, or fade for 150 ms under reduced 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.