Migration Risk RegisterPRO

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.

Installation

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/onboarding41?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/onboarding41?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/onboarding41.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports onboarding41Demo alongside the block: the exact props behind the preview above. Spread it to get a working register in one line.

import { Onboarding41, onboarding41Demo } from "@/components/beste/block/onboarding41";

export default function RisksPage() {
  return <Onboarding41 {...onboarding41Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Onboarding41 } from "@/components/beste/block/onboarding41";

export default function RisksPage() {
  return (
    <Onboarding41
      badge={{ label: "What could go wrong" }}
      heading="The risk register we would rather you read than discover"
      description="Every one of these has happened to somebody."
      likelihoodLabels={{ likely: "Common", possible: "Occasional", rare: "Rare" }}
      columns={["The risk", "How often", "What we do about it"]}
      risks={[
        {
          risk: "Rooms are named inconsistently across sites",
          likelihood: "likely",
          seen: "7 of the last 10 migrations",
          mitigation: "We reconcile room names on the mapping call rather than at go-live.",
        },
        {
          risk: "Go-live lands in the same week as an inspection",
          likelihood: "rare",
          seen: "1 of the last 10",
          mitigation: "We move the date. There is no commercial pressure to go live that week.",
        },
      ]}
      closingTitle="And if it goes wrong anyway"
      closingBody="You stop, we hand your data back, and you owe nothing."
      button={{ label: "Talk through your risks", href: "/contact" }}
    />
  );
}

Props

type Likelihood = "likely" | "possible" | "rare";

type ActionLink = {
  label: string;
  href: string;
};

type Risk = {
  risk: string;
  likelihood: Likelihood;
  seen: string;
  mitigation: string;
};

Behavior notes

• The colour scale runs the opposite way to most status chips: amber for common and emerald for rare, because here a frequent risk is the warning and a rare one is the reassurance.
• likelihoodLabels falls back to the raw key when a label is missing, so an incomplete record degrades to "likely" rather than rendering blank.
• seen sits under the chip as a hard count, which is what turns a subjective word like "Common" into something checkable.
• mitigation is required on every risk. A register that lists dangers without the response is the thing this block is built against.
• The column header row is hidden md:grid, so on mobile the mitigation cell carries an inline label from columns[2]. Note that label is gated on lg:hidden rather than md:hidden, so it stays visible in the md range where the header is already showing.
• Because that header is hidden below md, its margin would collapse there. The rows container carries mt-12 md:mt-0 to compensate.
• The chip is w-fit, so it hugs its label rather than filling the fixed 10rem grid track.
• Rows use border-b matching the header, and are md:items-start since the first and third cells have different heights.