device-imac
import { Device } from "@/components/ui/mockups/device"
export function Component() {
return (
<div className="relative">
<Device variant="imac" width={400} src="/images/device/display.jpg" />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/device-imac.json"device-macbook
import { Device } from "@/components/ui/mockups/device"
export function Component() {
return (
<div className="relative">
<Device variant="macbook" width={400} src="/images/device/macbook.jpg" />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/device-macbook.json"device-ipad
import { Device } from "@/components/ui/mockups/device"
export function Component() {
return (
<div className="relative">
<Device variant="ipad" width={400} src="/images/device/ipad.jpg" />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/device-ipad.json"device-iphone
import { Device } from "@/components/ui/mockups/device"
export function Component() {
return (
<div className="relative">
<Device variant="iphone" width={400} src="/images/device/iphone.png" />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/device-iphone.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/device.json
Usage
import { Device } from "@/components/ui/device"<Device variant="macbook" src="/screenshot.png" className="text-gray-900" />
<Device variant="imac" src="/screenshot.png" />
<Device variant="iphone" src="/mobile-preview.png" />
<Device variant="ipad" src="/tablet-preview.png" />API Reference
Device
The main Device component. It renders a selected device frame and optionally displays an image inside it.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "macbook" | "imac" | "iphone" | "ipad" | "macbook" | Defines the device frame to render. |
src | string | undefined | Image source URL to display inside the device screen. |
...props | SVGProps<SVGSVGElement> | – | Any additional props forwarded to the <svg> element. |