Device Mockups

Phone and browser frames for showcasing app screenshots and videos

CrystalDevicePhone

Default (Dark Frame)

Light Frame

Custom Color

With Custom Children

Custom Content

CrystalDeviceWindow

NEW

Generic OS window frame with traffic lights - simpler than Browser (no URL bar). Perfect for dashboards, app interfaces, and settings panels.

Muted Traffic Lights (Default)

Dashboard

Colorful Traffic Lights

Terminal

$ pnpm --filter crystal-ui dev

Starting development server...

Ready on http://localhost:3200

Without Title

CrystalDeviceBrowser

Browser window frame with traffic lights + URL bar. Use when showcasing websites.

With URL Bar

https://artasce.com

Without URL

https://

With Custom Children

https://example.com

Custom Content

Phone Props

Prop	Type	Default	Description
src	string	-	Image source URL
videoSrc	string	-	Video source URL (takes precedence)
frameColor	string	#1a1a1a	Frame border color
children	ReactNode	-	Custom content for the screen
autoPlay	boolean	true	Video autoplay
loop	boolean	true	Video loop

Usage

Phone Examples

import { CrystalDevicePhone } from '@artasce/crystal-ui';

// With image
<CrystalDevicePhone
  src="/screenshots/app-home.png"
  alt="App home screen"
/>

// With video
<CrystalDevicePhone
  videoSrc="/videos/app-demo.mp4"
  poster="/screenshots/app-home.png"
/>

// Custom frame color
<CrystalDevicePhone
  frameColor="#ff7c0a"
  src="/screenshot.png"
/>

// Custom children
<CrystalDevicePhone>
  <div className="bg-gradient-to-b from-blue-500 to-purple-600">
    Custom content
  </div>
</CrystalDevicePhone>

Browser Examples

import { CrystalDeviceBrowser } from '@artasce/crystal-ui';

// With URL and image
<CrystalDeviceBrowser
  url="https://artasce.com"
  src="/screenshots/landing.png"
/>

// With video
<CrystalDeviceBrowser
  url="https://app.example.com"
  videoSrc="/videos/dashboard-demo.mp4"
/>