@starcier/collab-ui
The visual half of the Starcier collaboration layer: review comments pinned to the page, the comments drawer, guided tours and the workflow selector. It looks and behaves the same in every builder, whatever the builder's own design system.
Most builders do not use this package directly. @starcier/builder-shell mounts it for you.
Reach for it yourself only when your app keeps its own shell; it needs React, but no router.
Install
npm install @starcier/collab-core@next @starcier/collab-ui@next
Until 1.0.0 is released, versions are prereleases (1.0.0-next.N): always install with
@next. Without it, npm installs the first prerelease, not the newest. Requires React 18 or 19,
and @starcier/collab-core, which holds the data.
Use
Mount CollabUiProvider inside CollabProvider, around everything that renders the
collaboration components:
import { CollabProvider } from '@starcier/collab-core';
import { CollabUiProvider } from '@starcier/collab-ui';
<CollabProvider apiBaseUrl={API_BASE_URL} getToken={getAccessToken} tenant={TENANT_SLUG}>
<CollabUiProvider
overlaySelectors={['.my-modal', '.my-drawer']} // your design system's overlay roots
fieldWrapperSelectors={['.my-field']} // wrappers around your form fields
>
{children}
</CollabUiProvider>
</CollabProvider>
Both selector lists are optional. They keep recorded tour steps stable, including tours that open a dialog.
Dialogs cannot be reviewed. Review mode never places a comment inside an element matched by
overlaySelectors; a click there reaches the dialog. Comments go on the page itself.
Stacking order
The collaboration layer draws between z-index 9140 (the review highlight) and 10000 (the tour
tooltip). Keep your own modals, drawers and popovers below 9140, so comments and tours always
appear above them.
The collaboration layer uses its own fixed colours and system fonts, so it reads as a tool on
top of your product rather than part of it. The BuilderPalette type exported here is the
contract for a builder's chrome — the catalogue and sign-in pages — which
@starcier/builder-shell draws from your design tokens.
License
MIT