KQ-905 · SHARE/FRAME
Share Frame
Your screen, shared. Pressing Share opens the preview in flow, its height measured by a ResizeObserver and glided from zero, while the border grows rather than appearing: one rounded-rect path with a fixed command count drawn by pathLength on glide, retracting on the exit ease when you stop. The surface inside is drawn from a hash of the source's id rather than captured, and choosing another source cross-fades the window under a frame that holds its shape. The sources are a real radiogroup on a roving tabindex.
KQ-905 · SHARE/FRAME
Not sharing
Not sharing · Dispatch board
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/share-frame
Props
- sources
- ShareSource[]
- default —
- What can be shared: an id, a name and an optional kind of screen, window or board, each drawn procedurally from its id.
- sourceId / defaultSourceId
- string
- default —
- Controlled or initial chosen source; defaults to the first one.
- onSourceChange
- (id: string) => void
- default —
- Fires from a chip, from the arrows and from Home and End.
- sharing / defaultSharing
- boolean
- default false
- Controlled or initial sharing state.
- onSharingChange
- (sharing: boolean) => void
- default —
- Fires from the Share and Stop sharing control.
- viewers
- number
- default 0
- How many people are watching; stated in words in the badge and in the frame's label.
- disabled
- boolean
- default false
- Holds every control; a running share keeps its frame.
- label
- string
- default "Screen share"
- Names the group for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| sources | ShareSource[] | — | What can be shared: an id, a name and an optional kind of screen, window or board, each drawn procedurally from its id. |
| sourceId / defaultSourceId | string | — | Controlled or initial chosen source; defaults to the first one. |
| onSourceChange | (id: string) => void | — | Fires from a chip, from the arrows and from Home and End. |
| sharing / defaultSharing | boolean | false | Controlled or initial sharing state. |
| onSharingChange | (sharing: boolean) => void | — | Fires from the Share and Stop sharing control. |
| viewers | number | 0 | How many people are watching; stated in words in the badge and in the frame's label. |
| disabled | boolean | false | Holds every control; a running share keeps its frame. |
| label | string | "Screen share" | Names the group for assistive technology. |