69 components available
Proximity Navigation

Onboarding Tasks

A stacked card queue for onboarding steps or pending actions — the cards behind peek out a few pixels so users can see how much is left, and completing or deferring a task advances the stack.
Playground
<OnboardingTasks
  direction="top"
  tasks={[
    {
      id: 'reports',
      description:
        'Turn your lists and records into rich visuals — fully customizable charts and metrics',
      cta: 'Explore reports',
      media: (
        <DitheredWaves
          height="100%"
          colors={['#0870e8', '#539cf2', '#8bc0fc', '#ffffff']}
        />
      ),
    },
    {
      id: 'integrations',
      description:
        'Hook your workspace up to 30+ apps — from forms to call transcripts to keeping your data in sync.',
      cta: 'Browse integrations',
      media: (
        <DitheredWaves
          height="100%"
          colors={['#6d28d9', '#a78bfa', '#ddd1ff', '#ffffff']}
        />
      ),
    },
    {
      id: 'email',
      description:
        'Link your email account and watch the people and companies in your network import themselves.',
      cta: 'Connect email',
      media: (
        <DitheredWaves
          height="100%"
          colors={['#c2410c', '#fb923c', '#fed7aa', '#ffffff']}
        />
      ),
    },
  ]}
/>
Source Code