Blocks/Onboarding(44)

Onboarding pages and flows.

PRO

onboarding44

Setup Checklist

A setup checklist with a sticky left column: serif headline that settles in word by word, an intro, a large done count over a hairline progress bar that grows as steps are ticked, and a sliding-marker pill. On the right a ruled list of steps, each with a round check button, a serif title that strikes through when done, a description and an optional link.

FREE

onboarding43

Guided Workspace Setup

A two-column setup section: the pitch and what each answer changes on the left, and a one-question-at-a-time wizard on the right that ends in a review of everything it is about to create.

PRO

onboarding42

Training Resources

A learning section leading with an image tile that floats a live help centre search, then listing the videos, guides, and sessions behind it as linked hairline rows across two columns.

PRO

onboarding41

Migration Risk Register

A candid onboarding section listing what tends to go wrong on hairline rows, each with a tone-coded frequency chip, how often it has been seen, and the mitigation already in place.

PRO

onboarding40

Division Of Labour Table

A responsibility table grouping migration tasks into phases on hairline rows, marking each as yours, ours, or shared with a check or a dash, and totalling the customer's time in one light figure.

PRO

onboarding39

Thirty Day Milestones

An onboarding section setting out four dated milestones as bordered cards, each closing on the figure it should hit, above a soft panel that floats a live progress metric on an image tile.

PRO

onboarding38

Data Import Reassurance

An import section leading with an image tile that floats a live upload dropzone, then setting out the formats that are read and the records that come across as two checked hairline lists.

PRO

onboarding37

Invite Your Team

A team setup section pairing a soft panel with a working invite row, a role picker, and a plain-language table of what each role can reach, with a bordered list of who is already on the account and whether they have accepted, closing on a seat meter that fills one tick per seat taken.

FREE

onboarding36

Go-Live Day Agenda

A first-day agenda held in one bordered panel, with timestamped hairline rows naming what happens, who is needed, how long it takes, and which parts are optional.

PRO

onboarding35

Tracked Setup Sequence

A setup section listing four numbered steps with who owns each one, against a column that sticks while they scroll and floats a live step tracker on an image tile.

PRO

onboarding34

Role Based Getting Started

A getting-started section whose role pills swap a sticky summary column and the numbered steps beside it, each step carrying its own title, explanation, and honest time estimate.

PRO

onboarding33

Interactive Setup Checklist

A setup panel pairing a soft progress column, where an oversized percentage and accent bar react to what is ticked, with hairline checklist rows that each carry a description and a jump-in link.

PRO

onboarding32

Data Import Split

A reversed split with an image tile floating a live import dropzone on the left, and an eyebrow, light heading, three monospace-numbered steps, and an accent button on the right.

PRO

onboarding31

Three Step Getting Started

A getting-started section with an eyebrow over a hairline rule, a two-column heading, three monospace-numbered steps under their own hairlines, and an accent button.

PRO

onboarding30

Feature Tour Carousel

Onboarding screen with navigable feature highlight cards, dot indicators, and back/next buttons. Perfect for introducing key platform features during the first-time user experience.

PRO

onboarding29

Company Info Form

Onboarding screen for collecting company information including name, team size selector chips, and industry dropdown. Perfect for B2B SaaS apps that need organizational context during setup.

PRO

onboarding28

Billing Setup with Cycle Toggle

Onboarding screen for choosing a billing cycle (monthly/yearly) with savings badge, payment method selection, and optional coupon code input. Perfect for SaaS apps that collect payment during onboarding.

PRO

onboarding27

Attribution Survey

Onboarding screen with a quick survey asking how the user discovered the product, with selectable options and an optional text input. Perfect for marketing attribution during signup.

PRO

onboarding26

Data Import Selector

Onboarding screen with import options from other platforms, CSV upload, and manual entry. Perfect for SaaS migration flows that help users bring existing data into the platform.

PRO

onboarding25

Theme and Appearance Picker

Onboarding screen for choosing theme mode (light, dark, system) and accent color. Perfect for apps that offer visual customization as part of the onboarding experience.

PRO

onboarding24

Keyboard Shortcuts Cheat Sheet

Onboarding screen displaying essential keyboard shortcuts in a grouped grid layout with key badges. Perfect for productivity tools that want to accelerate user adoption.

PRO

onboarding23

Security Setup

Onboarding screen for configuring account security including two-factor authentication, recovery email, and backup codes. Perfect for apps that prioritize security during onboarding.

PRO

onboarding22

Plan Overview with Usage Limits

Onboarding screen showing current plan details with visual usage bars for storage, seats, and API calls. Perfect for SaaS post-signup flows that introduce plan limits and upgrade paths.

PRO

onboarding21

Onboarding Completion Screen

Completion screen shown after finishing onboarding with a summary of what was configured and quick-start action links. Perfect for ending the setup flow with clear next steps.

Markdown version