iPad Frame

Installation

npx shadcn@latest add @blank/ipad-frame

Usage

import { IPadFrame } from "@/components/ui/ipad-frame"

<IPadFrame orientation="landscape" src="/tablet.png" alt="Mail app" />

orientation is written to data-orientation, which swaps the aspect ratio and turns the side buttons with the device. Bezels and radii are measured from the short side, so they stay the same thickness in either orientation. Each orientation has its own default width; a width class replaces it.

Examples

Landscape