Data Import Split

Onboarding32: Data Import Split

Two-column split layout with a floating live import dropzone over a background photo on one side, and an eyebrow, light heading, three monospace-numbered steps, and a CTA button on the other. Static content, the only "live" piece is the embedded dropzone component.

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

Base UI flavor

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

This installs the block to components/beste/block/onboarding32.tsx, the badge23 and button21 components it renders (the eyebrow pill and the accent CTA button), the upload32 piece embedded in the demo as the floating import dropzone, and its dependencies.

Quick start

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

import { Onboarding32, onboarding32Demo } from "@/components/beste/block/onboarding32";

export default function OnboardingPage() {
  return <Onboarding32 {...onboarding32Demo} />;
}

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

import { Onboarding32 } from "@/components/beste/block/onboarding32";
import { Upload32 } from "@/components/beste/piece/upload32";

export default function OnboardingPage() {
  return (
    <Onboarding32
      badge={{ label: "Bring your data" }}
      heading="Your records move over in one drop"
      description="Export from whatever you use today, drop the file in, and we map the fields."
      steps={[
        { title: "Export what you have", description: "A CSV from your old system." },
        { title: "Drop it in", description: "We detect the columns and match them." },
        { title: "Review and go live", description: "Confirm the preview and go." },
      ]}
      button={{ label: "Start your import", href: "https://beste.co" }}
      media={
        <Upload32
          title="Import member records"
          hint="Drop a CSV or browse"
          file={{ name: "members.csv", percent: 40 }}
        />
      }
      image={{
        src: "https://images.unsplash.com/photo-1699391202824-247ed6fbc484?w=1200&h=900&fit=crop",
        alt: "Deep green gradient backdrop",
      }}
    />
  );
}

Props

type Badge = { label: string };
type ActionLink = { label: string; href: string };
type Step = { title: string; description: string };
type TileImage = { src: string; alt: string };

Behavior notes

• media is typed as a plain React.ReactNode, not the image | video | component discriminated union used elsewhere in this registry for media slots; the demo fills it with a live <Upload32 /> piece instance directly, so swapping the media means passing different JSX rather than a different data shape.
• image only renders when media is also set, both the background <img> and the media node live inside the same {media && (...)} conditional block, so passing only image without media renders neither the photo nor the dropzone column.
• When media is omitted, the two-column grid (md:grid-cols-2) collapses to a single rendered child: the text column becomes the grid's only item and occupies the first track, leaving the second column blank on desktop instead of stretching to fill the row.
• When present, image fills the tile edge-to-edge (absolute inset-0 object-cover) behind media, which is layered on top via relative z-10, so any live piece placed in media needs its own opaque chrome to stay legible over the photo.
• Steps are numbered from the array index the same way as onboarding31 (padStart(2, "0")), and the CTA (Button21) sits below the steps in the text column rather than beside the media tile.