'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
DeviceFrame
A preview at a device's width, centred in a soft frame. The width animates when the device changes.
import { DeviceFrame, SegmentedControl } from '@alea/ui';
Examples
Three widths
Switch devices: the frame animates to 1280, 768 or 390 px and stays centred.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-bg…--alea-border…
Radius
--alea-radius-md…
Shadow
--alea-shadow-card…
Motion
--alea-motion-duration-slow…--alea-motion-ease-out…
Props
DeviceFrame props
A preview at a device's width, centred, with a soft frame: pair it with a SegmentedControl of devices.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The page inside: a preview of a site, an email, a component. |
className | string | - | Extra class names for the root element. |
device | "desktop" | "tablet" | "phone" | 'desktop' | desktop (up to 1280 px), tablet (768) or phone (390). The width animates between them. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
devicedesktoptabletphone- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-device-frame- Data attributes
data-device=tabletdata-device=phone
Accessibility
- It adds no semantics: the page inside keeps its own headings.
- The width change is a transition that stops with reduced motion.
Do and don't
Do
- Pair it with a SegmentedControl of devices.
Don't
- Don't use it as decoration around screenshots: use Image.
In Figma
Device frame with Device (desktop, tablet, phone).