Data Import Selector

Onboarding26: Data Import Selector

Import-source picker listing platform cards (Trello, Asana, Jira, Notion, …), an "or" divider, and two tiles for uploading a file or starting manually, all three groups sharing one selection state so only a single option can be active across the whole screen.

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

Base UI flavor

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

This installs the block to components/beste/block/onboarding26.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Onboarding26, onboarding26Demo } from "@/components/beste/block/onboarding26";

export default function OnboardingPage() {
  return <Onboarding26 {...onboarding26Demo} />;
}

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

import { Database } from "lucide-react";
import { Onboarding26 } from "@/components/beste/block/onboarding26";

export default function OnboardingPage() {
  return (
    <Onboarding26
      badge={{ label: "Import", variant: "secondary" }}
      heading="Bring your data"
      description="Import existing data from another platform or start fresh."
      sources={[
        {
          id: "trello",
          icon: <Database className="size-5" />,
          title: "Trello",
          description: "Import boards, lists, and cards",
        },
        {
          id: "notion",
          icon: <Database className="size-5" />,
          title: "Notion",
          description: "Import pages and databases",
        },
      ]}
      primaryButton={{ label: "Continue", href: "/setup/next" }}
      secondaryButton={{ label: "Start from scratch", href: "/dashboard" }}
    />
  );
}

Props

type ImportSource = {
  id: string;
  icon: React.ReactNode;
  title: string;
  description: string;
};

Behavior notes

• selected is one shared useState<string | null> across all three groups: platform sources, the "upload" tile, and the "manual" tile. Picking a source deselects any active tile and vice versa, only one item on the whole screen can be active at a time.
• Clicking a platform source, the upload tile, or the manual tile all just call setSelected(id); there is no file picker or dialog wired to the "Upload a file" tile, it behaves as a selectable card like any other.
• primaryButton is disabled (disabled={!selected}) until something is chosen, and its click handler runs a hard window.location.href = primaryButton.href navigation rather than rendering a <Link>, so it's a full-page redirect, not client-side routing.
• secondaryButton ("Start from scratch" in the demo) is always enabled and renders as a normal <Link>, bypassing the selection requirement entirely.
• currentStep/totalSteps only feed the static "Step of " label; there is no internal step or wizard progression in this block.