Device switcherPro

Responsive sizes for a live preview: device presets, rotate, typed width and height, and handles that resize from the center over a breakpoint ruler that shows which breakpoint is active. A Pro variant of the free preview toolbar.

Markdown

On this page

ProThe booking page on a tablet. Pick a device, rotate it, type a width or drag a handle and watch the breakpoint ruler.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/device-switcher

Usage

tsx

import { DeviceSwitcher } from "@/components/ui/chatcn/pro/device-switcher"

<DeviceSwitcher defaultSize={{ width: 390, height: 844 }} onSizeChange={(size, preset) => save(size)}>
  <GeneratedApp />
</DeviceSwitcher>

The page renders at the real width and scales down to fit, so the percentage tells you how far. Content inside is real DOM, not an iframe: give it container queries so it reflows with the frame. Pass an iframe as the child to use real media queries.

Examples

States

ProPhone, landscape, a custom width between breakpoints, nothing built yet and disabled.

Props

Prop	Type	Notes
`size`, `defaultSize`, `onSizeChange`	`{ width, height }`	The callback also gets the matching preset id or null
`presets`	`DevicePreset[]`	Desktop 1440, laptop 1280, tablet 820, phone 390 by default
`breakpoints`	`{ name, width }[]`	Ruler marks; the Tailwind defaults by default
`minWidth`, `maxWidth`	`number`	Default 320 and 1920
`height`	`number \| string`	Stage height. Default 560
`actions`, `disabled`, `emptyState`

Keyboard

Key	Action
Arrow keys on a handle	Resize 10 px, `Shift` 100
`Home` `End` on a handle	Minimum and maximum width
`ArrowUp` `ArrowDown` in W or H	Step the size; `Enter` commits a typed value

Accessibility

Presets are a radio group. Handles are separators with the width as their value. The final size is announced when a resize ends.
The breakpoint ruler is a group of buttons that jump to each breakpoint, and the active one is pressed.

Motion

Sizes change instantly: a resize is direct manipulation. While dragging, the bezel drops away and a width chip shows the value and breakpoint.