Most of this is ours. The column on the left is everything your team actually has to do, with an honest estimate against each one.
Before we start
Export from your current system
Whatever it will give you, in whatever shape. We do not need it tidied first.
Name a decision maker
One person who can settle a field-mapping question without convening a meeting about it.
Read the export and flag the mess
We open every column and come to the mapping call with the problems listed.
During the migration
The mapping call
Agreeing what each old field becomes. The only meeting in the whole process.
Load the dry run
Your real data into a private workspace, then a second pass after your notes.
Poke at the dry run
Two or three people using it like a normal day and telling us what looks wrong.
Configure rooms, rota, and roles
We set it up from the mapping call and you confirm it looks like your week.
Going live
Run a normal morning
Your team works as usual while two of us sit on a call and stay quiet.
Fix what the morning surfaced
Anything awkward gets changed the same day rather than filed as a ticket.
Sign off and take the keys
Admin access, the audit log, and the written list of what we changed for you.
About 90 minutes
of your team's time, across the whole fortnight
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.
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.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/onboarding40?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/onboarding40?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/onboarding40.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.
The installed file exports onboarding40Demo alongside the block: the exact props behind the preview above. Spread it to get a working table in one line.
import { Onboarding40, onboarding40Demo } from "@/components/beste/block/onboarding40";
export default function ResponsibilitiesPage() {
return <Onboarding40 {...onboarding40Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Onboarding40 } from "@/components/beste/block/onboarding40";
export default function ResponsibilitiesPage() {
return (
<Onboarding40
badge={{ label: "Who does what" }}
heading="The division of labour, written down before you agree to it"
description="Most of this is ours."
youLabel="You"
usLabel="Us"
effortLabel="Effort"
phases={[
{
label: "Before we start",
tasks: [
{
task: "Export from your current system",
detail: "Whatever it will give you, in whatever shape.",
owner: "you",
effort: "10 minutes",
},
{
task: "Read the export and flag the mess",
detail: "We open every column and come to the call with the problems listed.",
owner: "us",
effort: "Two days, ours",
},
],
},
{
label: "During the migration",
tasks: [
{
task: "The mapping call",
detail: "Agreeing what each old field becomes.",
owner: "both",
effort: "One hour",
},
],
},
]}
totalValue="About 90 minutes"
totalLabel="of your team's time, across the whole fortnight"
button={{ label: "Book the mapping call", href: "/migrate" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
youLabel | string | "You" | Column heading and mobile label for the customer column |
usLabel | string | "Us" | Column heading and mobile label for the vendor column |
effortLabel | string | "Effort" | Column heading and mobile label for the effort column |
phases | TaskPhase[] | [] | Task groups, each with its own banner label |
totalValue | string | – | The headline total of customer time |
totalLabel | string | – | What that total covers |
button | { label: string; href: string } | – | Closing action |
className | string | – | Extra classes for the outer section |
type Owner = "you" | "us" | "both";
type ActionLink = {
label: string;
href: string;
};
type Task = {
task: string;
detail: string;
owner: Owner;
effort: string;
};
type TaskPhase = {
label: string;
tasks: Task[];
};owner value fills both columns. The internal marker helper checks owner === side || owner === "both", so "both" renders a check in each column and there is no way for the two to contradict each other.aria-hidden, and on mobile every cell carries an inline text label, so the ownership still reads without the icons.bg-muted banner rows rather than headings above the table, which keeps the four columns aligned straight through the groups.hidden md:grid and opens with an empty aria-hidden span so the three labels sit over their own tracks.mt-12 md:mt-0 to compensate.md, so a stacked row still says which column each mark belongs to. That was the fix for an earlier version where the mobile view showed bare checks with no context.totalValue is the point of the block. It is deliberately a rounded phrase like "About 90 minutes" rather than a computed sum, since the block never adds up the effort strings.border-b matching the header, so the rules read as one continuous table.onboarding43
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.
onboarding41
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.
onboarding33
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.
onboarding6
Vertical timeline layout with step indicators, descriptions, and a connecting progress line. Perfect for workspace setup flows with detailed step explanations.