Device Mockups
Phone, browser, window, and code editor frames for showcasing content.
Crystal provides four device mockup components for displaying screenshots, videos, or live content within realistic device frames.
Components
| Component | Frame Type | Features |
|---|---|---|
CrystalDevicePhone | iPhone-style | Camera notch, image/video/children |
CrystalDeviceBrowser | Browser window | Traffic lights, address bar, URL display |
CrystalDeviceWindow | OS window | Traffic lights, title bar, icon |
CrystalDeviceCode | Code editor | Terminal/VS Code/minimal variants, line numbers |
Import
import {
CrystalDevicePhone,
CrystalDeviceBrowser,
CrystalDeviceWindow,
CrystalDeviceCode,
} from '@artasce/crystal-ui';CrystalDevicePhone
Open in Storybook→Renders a phone frame with camera notch. Supports images, video, or arbitrary children.
<CrystalDevicePhone src="/screenshots/mobile-app.png" alt="Mobile app" />
<CrystalDevicePhone videoSrc="/demo.mp4" poster="/poster.jpg" />CrystalDevicePhone Props
| Token | Variable | Value |
|---|---|---|
src | string | — |
videoSrc | string | — |
poster | string | — |
alt | string | 'Phone screenshot' |
children | ReactNode | — |
frameColor | string | '#1a1a1a' |
autoPlay | boolean | true |
loop | boolean | true |
muted | boolean | true |
Values update live with theme changes. Click any row to copy the CSS variable.
CrystalDeviceBrowser
Open in Storybook→Browser window with macOS-style traffic lights and optional URL bar.
<CrystalDeviceBrowser src="/screenshots/landing.png" url="artasce.com" />CrystalDeviceBrowser Props
| Token | Variable | Value |
|---|---|---|
src | string | — |
videoSrc | string | — |
url | string | — |
alt | string | 'Browser screenshot' |
children | ReactNode | — |
bgColor | string | '#1e1e1e' |
Values update live with theme changes. Click any row to copy the CSS variable.
CrystalDeviceWindow
Open in Storybook→Generic OS window frame with optional title and icon. Simpler than Browser (no URL bar).
<CrystalDeviceWindow title="Dashboard" icon={<LayoutDashboard size={14} />}>
<DashboardContent />
</CrystalDeviceWindow>CrystalDeviceWindow Props
| Token | Variable | Value |
|---|---|---|
title | string | — |
icon | ReactNode | — |
src | string | — |
children | ReactNode | — |
trafficLightStyle | 'colorful' | 'muted' | 'muted' |
bgColor | string | '#1e1e1e' |
contentBgColor | string | '#ffffff' |
Values update live with theme changes. Click any row to copy the CSS variable.
CrystalDeviceCode
Code editor/terminal mockup for showcasing code snippets with syntax context.
<CrystalDeviceCode
variant="vscode"
filename="page.tsx"
language="typescript"
code={`export default function Home() {\n return <CrystalNav links={links} />;\n}`}
showLineNumbers
/>CrystalDeviceCode Props
| Token | Variable | Value |
|---|---|---|
code | string | — |
children | ReactNode | — |
variant | 'terminal' | 'vscode' | 'minimal' | 'default' | 'default' |
title | string | — |
filename | string | — |
language | string | — |
color | 'dark' | 'light' | 'amethyst' | 'amethyst' |
showLineNumbers | boolean | false |
maxHeight | string | — |
Values update live with theme changes. Click any row to copy the CSS variable.