Setup Checklist with Progress
The get-started card that ships with its first item already ticked, a native <progress> element rather than a div bar, and a dismiss control that appears only once there is nothing left to abandon.
Import or Start Empty
The empty product’s real first question. Sample data is offered with equal weight rather than as grey small print, every connector names its scope before the redirect, and each option carries the honest duration.
216 lineslucide-reactAdded 27 Aug 2026Updated 10 Sept 2026
- onboarding
- import
- csv
- connectors
- sample data
What's included
components/onboarding-import-data.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add onboarding-import-data
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
Step 2 of 4
Bring your data across
Or don't — a sample workspace is a perfectly good way to look around first, and nothing here is permanent.
You can add or change a source at any time in Settings — this is not a one-off decision.
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/onboarding-import-data.tsx
'use client'
/**
* <OnboardingImportData> — the empty product's real first question.
*
* Onboarding had the checklist, the wizard, the invite step, the coach
* mark and the role picker. Every one of them is about configuring an
* account. None of them faces the thing that actually decides whether a
* new customer stays: the product is empty, their data is somewhere else,
* and moving it is the work they are dreading.
*
* THE ONE THING THIS GETS RIGHT THAT MOST DO NOT
*
* "Start from scratch" is offered with equal weight, not as grey small
* print under three logos. A person evaluating a tool on a Tuesday
* afternoon frequently does not want to connect their production CRM to
* something they are trying out, and an import screen that treats that as
* the failure path pushes them into either an abandoned signup or a
* connection they regret. Sample data is a legitimate answer and is
* labelled as one, with the sentence that makes it safe: it can be
* removed in one click later.
*
* A CONNECTOR SAYS WHAT IT WILL READ
*
* Every option names its scope before it is chosen — "read-only, contacts
* and companies" — because permission scopes shown after the OAuth
* redirect are shown too late to influence the decision. The one that
* writes back says so, in the same place, in the same voice.
*
* TIME IS PART OF THE CHOICE
*
* A CSV is instant, a full CRM sync is twenty minutes. Someone with ten
* minutes before a meeting is choosing on that number, and hiding it is
* how an import gets abandoned halfway.
*
* ACCESSIBILITY: a radiogroup, because these are mutually exclusive and
* arrow keys should move between them; each option is labelled by its
* name and described by its scope line; the continue button says which
* option it will act on rather than "Continue".
*/
import * as React from 'react'
import { Check, Clock, Database, FileSpreadsheet, ShieldCheck, Sparkles, Upload } from 'lucide-react'
export interface ImportOption {
id: string
name: string
/** What it reads or writes, stated before the redirect, not after. */
scope: string
/** Honest estimate for the whole import. */
duration: string
icon: React.ComponentType<{ className?: string }>
/** Marks the "no thanks" path, which is deliberately not diminished. */
standalone?: boolean
}
export interface OnboardingImportDataProps {
options?: ImportOption[]
className?: string
}
const DEFAULT_OPTIONS: ImportOption[] = [
{
id: 'hubspot',
name: 'HubSpot',
scope: 'Read-only · contacts and companies. Nothing is written back.',
duration: 'About 20 minutes for 50,000 contacts',
icon: Database,
},
{
id: 'csv',
name: 'Upload a CSV',
scope: 'You choose the file and map the columns before anything is created.',
duration: 'Under a minute',
icon: FileSpreadsheet,
},
{
id: 'salesforce',
name: 'Salesforce',
scope: 'Read and write · keeps both sides in sync, so edits here reach Salesforce.',
duration: 'About 40 minutes for the first sync',
icon: Upload,
},
{
id: 'sample',
name: 'Start with sample data',
scope: 'A worked example workspace. Remove it in one click when you are done.',
duration: 'Instant',
icon: Sparkles,
standalone: true,
},
]
export function OnboardingImportData({
options = DEFAULT_OPTIONS,
className = '',
}: OnboardingImportDataProps) {
const [chosen, setChosen] = React.useState(options[0]?.id ?? '')
const selected = options.find((o) => o.id === chosen)
return (
<section className={`mx-auto w-full max-w-2xl px-4 py-16 sm:px-6 ${className}`}>
<div className="rounded-2xl border border-border bg-card p-5 sm:p-6">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Step 2 of 4
</p>
<h2 className="mt-1 text-xl font-semibold tracking-tight text-foreground">
Bring your data across
</h2>
<p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
Or don't — a sample workspace is a perfectly good way to look around
first, and nothing here is permanent.
</p>
<div
role="radiogroup"
aria-label="How to add data"
className="mt-5 space-y-2.5"
>
{options.map((option) => {
const active = option.id === chosen
const Icon = option.icon
return (
<div key={option.id}>
{/*
A button with role=radio rather than a styled input: the
option is a whole card with two lines of description, and
a label wrapping a card is a much larger click target
than it appears to be for a keyboard user.
*/}
<button
type="button"
role="radio"
aria-checked={active}
aria-describedby={`${option.id}-scope`}
onClick={() => setChosen(option.id)}
className={`flex w-full items-start gap-3 rounded-xl border p-4 text-start transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ${
active
? 'border-primary bg-primary/5'
: 'border-border bg-background hover:border-primary/40'
}`}
>
<span
className={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
active ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'
}`}
>
<Icon aria-hidden className="h-4.5 w-4.5" />
</span>
<span className="min-w-0 flex-1">
<span className="flex flex-wrap items-center gap-2">
<span className="text-sm font-semibold text-foreground">
{option.name}
</span>
{/* The no-thanks path, named rather than hidden. */}
{option.standalone ? (
<span className="rounded-md bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground">
No connection needed
</span>
) : null}
</span>
<span
id={`${option.id}-scope`}
className="mt-1 block text-xs leading-relaxed text-muted-foreground"
>
<ShieldCheck aria-hidden className="me-1 inline h-3 w-3 align-[-2px]" />
{option.scope}
</span>
{/* The number people actually choose on. */}
<span className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
<Clock aria-hidden className="h-3 w-3" />
{option.duration}
</span>
</span>
{active ? (
<Check aria-hidden className="mt-1 h-4 w-4 shrink-0 text-primary" />
) : null}
</button>
</div>
)
})}
</div>
<div className="mt-5 flex flex-wrap items-center gap-3">
<button
type="button"
className="inline-flex h-10 items-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
{/* Says what it will do, not "Continue". */}
{selected?.standalone
? 'Create a sample workspace'
: selected
? `Connect ${selected.name}`
: 'Continue'}
</button>
<button
type="button"
className="rounded text-sm font-medium text-muted-foreground underline-offset-4 transition hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
Skip for now
</button>
</div>
<p className="mt-3 text-xs text-muted-foreground">
You can add or change a source at any time in Settings — this is not a
one-off decision.
</p>
</div>
</section>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Install: npm i lucide-react
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/onboarding-import-data.tsx and import it where you need the section:
import { OnboardingImportData } from '@/components/onboarding-import-data'Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
options | ImportOption[] | DEFAULT_OPTIONS |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.
onboarding-import-data.html
<!--
Import or Start Empty — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block is interactive in React and the handlers are NOT here.
Buttons, toggles and menus render in their initial state and do
nothing until you wire them up.
-->
<section class="mx-auto w-full max-w-2xl px-4 py-16 sm:px-6 ">
<div class="rounded-2xl border border-border bg-card p-5 sm:p-6">
<p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Step 2 of 4</p>
<h2 class="mt-1 text-xl font-semibold tracking-tight text-foreground">Bring your data across</h2>
<p class="mt-1.5 text-sm leading-relaxed text-muted-foreground">Or don't — a sample workspace is a perfectly good way to look around first, and nothing here is permanent.</p>
<div role="radiogroup" aria-label="How to add data" class="mt-5 space-y-2.5">
<div>
<button type="button" role="radio" aria-checked="true" aria-describedby="hubspot-scope" class="flex w-full items-start gap-3 rounded-xl border p-4 text-start transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background border-primary bg-primary/5">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database h-4.5 w-4.5" aria-hidden="true">
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
<path d="M3 12A9 3 0 0 0 21 12"></path>
</svg>
</span>
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2">
<span class="text-sm font-semibold text-foreground">HubSpot</span>
</span>
<span id="hubspot-scope" class="mt-1 block text-xs leading-relaxed text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check me-1 inline h-3 w-3 align-[-2px]" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>Read-only · contacts and companies. Nothing is written back.</span>
<span class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>About 20 minutes for 50,000 contacts</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check mt-1 h-4 w-4 shrink-0 text-primary" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</button>
</div>
<div>
<button type="button" role="radio" aria-checked="false" aria-describedby="csv-scope" class="flex w-full items-start gap-3 rounded-xl border p-4 text-start transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background border-border bg-background hover:border-primary/40">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-spreadsheet h-4.5 w-4.5" aria-hidden="true">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M8 13h2"></path>
<path d="M14 13h2"></path>
<path d="M8 17h2"></path>
<path d="M14 17h2"></path>
</svg>
</span>
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2">
<span class="text-sm font-semibold text-foreground">Upload a CSV</span>
</span>
<span id="csv-scope" class="mt-1 block text-xs leading-relaxed text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check me-1 inline h-3 w-3 align-[-2px]" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>You choose the file and map the columns before anything is created.</span>
<span class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>Under a minute</span>
</span>
</button>
</div>
<div>
<button type="button" role="radio" aria-checked="false" aria-describedby="salesforce-scope" class="flex w-full items-start gap-3 rounded-xl border p-4 text-start transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background border-border bg-background hover:border-primary/40">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload h-4.5 w-4.5" aria-hidden="true">
<path d="M12 3v12"></path>
<path d="m17 8-5-5-5 5"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
</svg>
</span>
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2">
<span class="text-sm font-semibold text-foreground">Salesforce</span>
</span>
<span id="salesforce-scope" class="mt-1 block text-xs leading-relaxed text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check me-1 inline h-3 w-3 align-[-2px]" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>Read and write · keeps both sides in sync, so edits here reach Salesforce.</span>
<span class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>About 40 minutes for the first sync</span>
</span>
</button>
</div>
<div>
<button type="button" role="radio" aria-checked="false" aria-describedby="sample-scope" class="flex w-full items-start gap-3 rounded-xl border p-4 text-start transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background border-border bg-background hover:border-primary/40">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-4.5 w-4.5" aria-hidden="true">
<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
<path d="M20 3v4"></path>
<path d="M22 5h-4"></path>
<path d="M4 17v2"></path>
<path d="M5 18H3"></path>
</svg>
</span>
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2">
<span class="text-sm font-semibold text-foreground">Start with sample data</span>
<span class="rounded-md bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground">No connection needed</span>
</span>
<span id="sample-scope" class="mt-1 block text-xs leading-relaxed text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check me-1 inline h-3 w-3 align-[-2px]" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>A worked example workspace. Remove it in one click when you are done.</span>
<span class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>Instant</span>
</span>
</button>
</div>
</div>
<div class="mt-5 flex flex-wrap items-center gap-3">
<button type="button" class="inline-flex h-10 items-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Connect HubSpot</button>
<button type="button" class="rounded text-sm font-medium text-muted-foreground underline-offset-4 transition hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Skip for now</button>
</div>
<p class="mt-3 text-xs text-muted-foreground">You can add or change a source at any time in Settings — this is not a one-off decision.</p>
</div>
</section>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Onboarding
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse OnboardingShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Onboarding blocks
View categoryGuided Setup Wizard
A choice-driven wizard with a persistent side rail, real radio groups in a fieldset so arrow keys work, and visited steps navigable while steps ahead stay out of the tab order.
Team Invite Step
The onboarding step where a product becomes multiplayer: pasted addresses split into chips, typos marked rather than dropped, and an honest way to skip.
Product Tour Coach Mark
A tour step anchored to the control it explains, with a spotlight cut by one spread shadow, a visible step count and focus that follows the step.
Role Picker
The "what best describes you" step, asked honestly — every option states what it actually changes, the skip is visible and names what you get instead, and the choice is reversible.
Workspace Setup Form
The first screen after signup, asking only the two things that cannot be changed silently later.
Data Migration Split
What a migration actually moves and what it cannot, stated before the switch rather than discovered after it.