Maquetación

DeviceFrame

Una vista previa al ancho de un dispositivo, centrada en un marco suave. El ancho se anima al cambiar de dispositivo.

import { DeviceFrame, SegmentedControl } from '@alea/ui';

Ejemplos

Tres anchos

Cambia de dispositivo: el marco se anima a 1280, 768 o 390 px y queda centrado.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

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

Una vista previa al ancho de un dispositivo, centrada, con un marco suave: combínala con un SegmentedControl de dispositivos.

Prop	Tipo	Por defecto	Descripción
`children`obligatoria	`ReactNode`	-	La página de adentro: la vista previa de un sitio, un correo, un componente.
`className`	`string`	-	Clases extra para el elemento raíz.
`device`	`"desktop" \| "tablet" \| "phone"`	`'desktop'`	desktop (hasta 1280 px), tablet (768) o phone (390). El ancho se anima entre ellos.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: devicedesktoptabletphone
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-device-frame
Atributos data: data-device=tabletdata-device=phone

No agrega semántica: la página de adentro conserva sus propios títulos.
El cambio de ancho es una transición que se detiene con movimiento reducido.

Qué hacer y qué evitar

Hacer

Combínalo con un SegmentedControl de dispositivos.

Evitar

No lo uses como decoración alrededor de capturas: usa Image.

En Figma

Device frame con Device (desktop, tablet, phone).