Skip to main content

Onboarding wizards

Blueprint ships a set of reusable utilities for building multi-step onboarding flows in Next.js apps.

Next.js Wizard​

The onboarding module provides a powerful wizard utility for building multi-step onboarding flows in Next.js. There are two variants available depending on which Next.js router you're using:

Pages Router (createNextWizard)​

For Next.js applications using the Pages Router (pages/ directory):

import { createNextWizard } from '@krakentech/blueprint-onboarding/next-wizard/pages-router';

See the Pages Router code examples and the Pages Router API reference.

App Router (createNextWizard)​

For Next.js applications using the App Router (app/ directory):

import { createNextWizard } from '@krakentech/blueprint-onboarding/next-wizard/app-router';

See the App Router code examples and the App Router API reference.

useWizard (client-side only)​

For examples of how to implement a client-side wizard, with easy config to copy and paste, see the code examples and the API reference.

Here is a simple example to give you an idea:

View Full Story →