@starcier/builder-shell
A whole Starcier prototype builder around your prototypes: sign-in, the catalogue, the prototype routes, the password-share and invite pages, and the collaboration layer (comments and guided tours). You supply your palette, your prototypes and your configuration; nothing here knows your design system.
Install
npm install @starcier/collab-core@next @starcier/collab-ui@next @starcier/builder-shell@next react-router @auth0/auth0-react
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,
react-router 7 or 8, and @auth0/auth0-react 2.
Use
Render it inside your router:
import { BuilderShell } from '@starcier/builder-shell';
<BrowserRouter>
<BuilderShell
palette={palette} // a BuilderPalette resolved from your design tokens
prototypes={prototypes} // [{ slug, title, component }, …]
apiBaseUrl={API_BASE_URL} // the API origin, without /v1
tenant={TENANT_SLUG} // your builder's tenant slug
auth={{ domain, clientId, audience }}
/>
</BrowserRouter>
Leave out apiBaseUrl and auth to run against localStorage, with no sign-in and no backend
— useful for design work. Keep tenant set even then: it keeps this builder's local comments
and tours apart from other builders on the same origin, such as localhost. Auth0's code is
loaded only when auth is set.
The shell serves /share/:id and /invite/:token, so your host must send unknown paths to
index.html, as for any single-page app.
Stacking order
z-index | What |
|---|---|
| 200 | The shell's top bar |
| 9140–10000 | Comments and tours |
Give your own modals and drawers a z-index between the two: above the bar, so a dialog covers
it, and below 9140, so comments and tours appear above your dialogs.
The Review toggle lives in the bar, so it is out of reach while a dialog is open. That matches what review mode can do: dialog content cannot be reviewed, and comments go on the page itself.
On a Next.js app, or one with its own router and sign-in, use @starcier/collab-core and
@starcier/collab-ui directly instead.
License
MIT