Every dashboard, design system, or documentation site needs to show real, interactive content inside a mockup frame — a browser window, device bezel, or minimal chrome. Without it, you either render unstyled content or reach for complex iframe solutions with cross-origin message overhead. FauxClient solves this by composing real React children (a full page, a component, any interactive UI) inside a frame, scaling them to fit any container size while keeping them fully interactive.

FauxClient is a forward-ref container with three chrome variants: "browser" (macOS chrome with address bar, traffic-light dots, and meta text), "device" (thick rounded bezel), and "bare" (minimal border). When a logical width is provided, children render at that width and scale via CSS transform with scale="fit" (responsive to the frame) or a fixed number. The bar and content areas are themeable via barClassName and bodyClassName.

Import from @particle-academy/react-fancy, wrap your content in <FauxClient variant="browser" width={1440} scale="fit">, and pass any JSX as children. The content stays fully interactive (events fire, hooks run) and scales responsively. For unscaled chrome around natural-size content, omit width and scale.