Components
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 |
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' |
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' |
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 | — |
Click any row to copy the CSS variable.