Pipecat UI
Components

User Screen Control

Screen-share toggle with a preview tile while sharing.

Open in Storybook

Installation

pnpm dlx shadcn@latest add @pipecat/user-screen-control

Usage

import { UserScreenControl } from "@/components/pipecat/user-screen-control";

<UserScreenControl activeText="Stop sharing" inactiveText="Share screen" />;

Renders a plain button while idle and expands into a preview tile while sharing. The connected component disables itself until the transport is connected, since screen share can only start on a live session.

Key props

PropTypeDescription
noPreviewbooleanNever show the tile, even while sharing
noIconbooleanHide the monitor icon
loadingTextReactNodeText next to the spinner while loading (spinner only by default)
videoPropsPipecatClientVideo propsPassed to the underlying video element
activeText / inactiveTextReactNodeToggle labels

On this page