Tablet
tabletFrames content inside a tablet device mockup.
Usage
Basic usage
iPad is a tablet casing that wraps the screen content. The default model is iPad Pro 11.
<Tablet>
<img src="/app.png" alt="" />
</Tablet>Select model
model Switch the default model and determine the default width and body ratio.
<Tablet model="ipad-pro-13">
<img src="/app.png" alt="" />
</Tablet>Custom width
width When passed in explicitly, priority will be given to overwriting the model's default width (the body proportions will still depend on the model).
<Tablet model="ipad-mini" width={200}>
<img src="/app.png" alt="" />
</Tablet>Picture content
Pass imageSrc and directly render the App screenshot (priority to children).
<Tablet model="ipad-pro-11" imageSrc="/app.png" />When to Use
Wrap app/webpage screenshots into iPad series tablet body frames for display, covering iPad Pro/Air/mini series models (the aspect ratios of each model are different). For the phone body, use iPhone/Android, and for the browser window frame, use Safari/Chrome.
Import
import { Tablet, TABLET_MODELS } from "@hulianui/ui"Props
Inherited from ComponentPropsWithoutRef<"div">. TABLET_MODELS export model→{ width, aspectRatio } mapping constant.
| Name | Type | Default | Description |
|---|---|---|---|
| model | "ipad-pro-13" | "ipad-pro-11" | "ipad-air-11" | "ipad-10" | "ipad-mini" | — | Optional model used to select a predefined width and aspect ratio; the showcase uses "ipad-pro-11" |
| width | number | Model width or 320 | Device width in pixels; an explicit value overrides the selected model's width |
| imageSrc | string | — | Screen image URL; takes precedence over children |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom screen content |
Usage Guidelines
- Unlike iPhone and Android frames, tablet models use different aspect ratios selected by
model. An explicitwidthchanges only the width; the aspect ratio still follows the model. Withoutmodel, the width falls back to 320 and no model-specific ratio is applied. - When both
imageSrcandchildrenare provided,imageSrctakes priority.
Related
Playground
<Tablet model="ipad-pro-11">
<img src="/app.png" />
</Tablet>