20% offProwith

Buy now
Detent

FlowPro

Onboarding

shadcn add @detent-pro/onboarding
Detent

Wire it up

All optional. With none, it plays exactly as it does here and hands over to whoever touches it.

Usage
<Onboarding
  tools={tools}
  teammates={teammates}
  product={product}
  onConnect={(tool) => {}}
  onInvite={(emails) => {}}
  onComplete={(setup, tools, invited, agent) => {}}
/>

Your data

tools

The tools on offer, each with the account it connects to.

Tool[]
Default—
teammates

People suggested for an invite, e.g. from the GitHub organization.

Teammate[]
Default—
product

The product being set up.

string
Default'Detent'
assistant

What the first agent is called.

string
Default'Detent'
workspace

The workspace being set up, named in the preview.

string
Default'Harbor'

What it tells you

onConnect

Called with a tool’s id when a person connects it.

(tool: App) => void
Default—
onInvite

Called with the addresses a person invites.

(emails: string[]) => void
Default—
onComplete

Called when setup finishes, with what was connected, who was invited and the agent created.

(setup: { tools: App[]; invited: string[]; agent: string }) => void
Default—

Every block also takes accent, the one colour everything in it derives from; autoplay, which plays the demo until someone touches it; and className.

More in Flows

All blocks