Device Frame

Monochrome hardware so the screen is the subject, with an optional tilt toward the pointer. Live components, not only screenshots.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add device-frame

Example

import { DeviceFrame } from "@/components/galactrex/device-frame";

<DeviceFrame device="phone"><AppScreen /></DeviceFrame>

Installs to components/galactrex/device-frame.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Screen content.
`device`	`"phone" \| "tablet" \| "laptop" \| "watch"`	`"phone"`	Device.
`tilt`	`boolean`	`true`	Tilt toward the pointer.
`className`	`string`	—	Extra classes for the outer element.