Device

A versatile component for displaying device mockups (mobile or browser) with screenshots or custom content. Useful for showcasing apps, landing pages, portfolios, and responsive previews. Supports dark mode, alignment, custom sizing, and both image and custom children content.

---

Import

import { Device, MobileDevice, BrowserDevice } from '@odyssee/components';

---

Examples

Mobile Device Mockup

Code Éditable

Résultat

---

MobileDevice Shorthand

Code Éditable

Résultat

---

Browser Device Mockup

Code Éditable

Résultat

---

Browser Without Controls

Code Éditable

Résultat

---

BrowserDevice Shorthand

Code Éditable

Résultat

---

Alignment

Code Éditable

Résultat

---

Custom Content

Code Éditable

Résultat

---

Custom Sizes

Code Éditable

Résultat

---

Use Case: App Showcase

Code Éditable

Résultat

---

Props

Prop	Type	Default	Description
variant	"mobile" | "browser"	— (required)	Type of device mockup to render.
src	string	—	Image URL to display inside the device frame.
alt	string	"Device screenshot"	Alt text for the image.
children	HTMLElement | HTMLElement[] | string	—	Custom content to render inside the device (overrides src if provided).
url	string	"www.preline.com"	URL bar text (browser variant only).
showControls	boolean	true	Show macOS-style window controls (browser variant only).
maxWidth	string	"w-60" (mobile), "max-w-3xl" (browser)	Tailwind width class for sizing the device.
align	"left" | "center" | "right"	"center"	Horizontal alignment of the device mockup.
className	string	—	Additional CSS classes for the outer container.
imageClassName	string	—	Additional CSS classes for the <img> element.
frameClassName	string	—	Additional CSS classes for the device frame.
id	string	auto-generated	HTML id attribute.
style	string	—	Inline styles.

---

Shorthand Components

• MobileDevice: <MobileDevice {...props} /> is equivalent to <Device variant="mobile" {...props} />
• BrowserDevice: <BrowserDevice {...props} /> is equivalent to <Device variant="browser" {...props} />

---

Use Case: Landing Page Preview

Code Éditable

Résultat

---

Implementation Notes

• Variants: Use variant="mobile" for a phone mockup, variant="browser" for a browser window. Prefer the shorthand components for clarity.
• Image vs. Custom Content: If src is provided, the image is displayed. If children is provided, it overrides the image and renders custom content.
• Dark Mode: Fully supports dark mode via Tailwind and system preferences.
• Sizing: Use Tailwind width classes (e.g., w-48, w-80, max-w-xl, max-w-6xl) for maxWidth.
• Alignment: Use align prop to left, center, or right align the device in its container.
• Accessibility: Always provide a meaningful alt for images. Custom content should be accessible and readable.

---

Accessibility

• The device frame is a semantic <figure>.
• The image uses alt text for screen readers.
• Custom content should be keyboard accessible and readable.
• Ensure color contrast for custom backgrounds/content.
• The browser variant's URL bar is visually distinct for context.

---

Best Practices

• Use the shorthand components (MobileDevice, BrowserDevice) for clarity and less boilerplate.
• Always provide alt text for images.
• For responsive demos, use maxWidth to control the device size.
• Use align to match your layout needs (e.g., left for feature lists, center for hero sections).
• For custom content, ensure it fits visually within the device frame and remains accessible.
• Test in both light and dark modes for visual consistency.

---

Related

• Tailwind CSS width utilities
• Pulse Framework

---