Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA modern tablet drawn in CSS with an aluminum frame, thin bezel, front camera, status bar and home indicator, in landscape or portrait. Children render as the screen at tablet resolution, scaled to fit.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { TabletFrame } from "@/components/ui/tablet-frame"<TabletFrame screenWidth={1180} className="max-w-2xl">
<Dashboard />
</TabletFrame><TabletFrame orientation="portrait" src="/reader.png" alt="Reading view" />| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Screen content, laid out below the status bar. Ignored when src or videoSrc is set. |
orientation | "landscape" | "portrait" | "landscape" | Which way the tablet is held. |
variant | "auto" | "silver" | "black" | "auto" | Finish. "auto" is silver in light mode and space black in dark mode. |
src | string | - | Image shown on the screen, cropped to fill it. |
alt | string | "" | Alternative text for src. |
videoSrc | string | - | Muted, looping video shown on the screen. Paused under reduced motion. |
poster | string | - | Poster image for videoSrc. |
screenWidth | number | - | Lays children out at this width in CSS pixels, then scales them to fit. |
statusBar | boolean | true | Shows the status bar (time, date, Wi-Fi, battery). |
time | string | "9:41 AM" | Time shown in the status bar. |
date | string | "Thu Oct 1" | Date shown next to the time. |
homeIndicator | boolean | true | Shows the home indicator at the bottom of the screen. |
screenClassName | string | - | Class names for the screen. Use "dark" to give the screen its own theme. |
Also accepts all <div> props.