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.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.
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.
onboarding34
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.
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.