Onboarding Mosaic shadcn/tailwind block

About this block

Onboarding MosaicPRO

A six-column bento for getting started: a wide card floating a live step tracker, a numbered week list on hairlines, an inverted quote tile, and a capture card holding a working email row.

Bento13: Onboarding Mosaic

A six-column bento for getting started: a wide card floating a live step tracker, a numbered week list on hairlines, an inverted quote tile and a capture card holding a working email row.

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.

Upgrade Now

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

bash

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

Base UI flavor

bash

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

This installs the block to components/beste/block/bento13.tsx, the form36 capture and progress16 tracker pieces it floats on two tiles (installed to components/beste/piece/{name}.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

tsx

import { Bento13, bento13Demo } from "@/components/beste/block/bento13";

export default function Page() {
  return <Bento13 {...bento13Demo} />;
}

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

tsx

import { Bento13 } from "@/components/beste/block/bento13";
import { Form36 } from "@/components/beste/piece/form36";
import { Progress16 } from "@/components/beste/piece/progress16";

export default function Page() {
  return (
    <Bento13
      badge={{ label: "Your first fortnight" }}
      heading="Everything you need to start, in one place"
      description="No implementation partner and no discovery phase."
      button={{ label: "Start a migration", href: "/migrate" }}
      progress={{
        kicker: "Live tracker",
        title: "You always know which step you are on",
        description: "Migration is a tracked sequence rather than a thread in someone's inbox.",
        media: (
          <Progress16
            title="Migration"
            steps={["Export", "Map fields", "Review", "Go live"]}
            activeIndex={2}
            caption="Review finishes today."
          />
        ),
        image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
      }}
      steps={{
        title: "What each week holds",
        steps: [
          "Send whatever your current system exports",
          "One hour agreeing what each field becomes",
          "A private dry run on your own data",
        ],
      }}
      quote={{
        quote: "Week one is dull and week two is fast. We would rather you knew that in advance.",
        attribution: "Priya Nandan, migration engineer",
      }}
      capture={{
        title: "Get the migration guide",
        media: (
          <Form36
            label="Send me the guide"
            placeholder="you@practice.com"
            submitLabel="Send"
            finePrint="One email with the guide attached."
          />
        ),
      }}
    />
  );
}

Props

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
`button`	`{ label: string; href: string }`	–	Action under the paragraph in the header
`progress`	`AssetTile`	–	Wide card carrying the tracker and its copy
`steps`	`StepTile`	–	Two-column tile holding the numbered list
`quote`	`QuoteTile`	–	Inverted two-column tile with a pull quote
`capture`	`CaptureTile`	–	Wide card holding the email row
`className`	`string`	–	Extra classes for the outer `section`

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

type TileImage = {
  src: string;
  alt: string;
};

type AssetTile = {
  kicker: string;
  title: string;
  description: string;
  media: ReactNode;
  image?: TileImage;
};

type StepTile = {
  title: string;
  steps: string[];
};

type QuoteTile = {
  quote: string;
  attribution: string;
};

type CaptureTile = {
  title: string;
  media: ReactNode;
  image?: TileImage;
};

Behavior notes

The step numbers are computed, not authored: the block renders String(index + 1).padStart(2, "0"), so the list always reads 01, 02, and so on. Reordering the array renumbers it automatically, unlike the index fields elsewhere in the set.
The section is bg-muted and the tiles are bg-background, which inverts the usual relationship so the mosaic reads as raised against a soft page.
Quotation marks around quote.quote are added by the block as entities, so pass plain text. Wrapping it in quotes yourself will double them.
The capture card insets its tile with a margin rather than padding, so the image tile keeps a visible border of card surface around it while the title above sits flush in the padded area.
Tile spans are 4, 2, 2 and 4 across six columns, so the mosaic resolves into two rows on desktop. Omitting one tile leaves a hole rather than reflowing the rest.
The numbered list closes with last:border-b, so it reads as a small table rather than an open list.

Wiring the form up

The email row inside the capture tile is a presentational piece with no submit handling of its own. When you connect it to a real list, the patterns in React Hook Form, TanStack Form, and Formisch cover validation and submission for this shape of single-field form.

More Bento blocks

View all Bento

PRO

bento12

Evidence Mosaic

A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card, and a soft note on method.

PRO

bento11

Product Surface Mosaic

A six-column bento mixing a lead card whose image tile floats a live metrics panel, a soft statement tile, an inverted figure tile, a second asset tile carrying an uptime strip, a hairline inclusion list, and a captioned photograph.

PRO

bento3

Selected Work Bento

Work mosaic on a six-column track mixing photographic tiles that carry their caption inside on a gradient scrim with a soft statement tile and an inverted figure tile, the lead project spanning four columns and two rows.

PRO

bento15

Practice Bento

One mosaic of six tiles: a large photograph that drifts inside its tile, an ink quote tile with film grain, a serif figure that counts up, a small photograph, an hours sheet and a call-to-action tile with a sliding-marker pill, each rising into view in turn.

PRO

bento14

Publication Hub Mosaic

A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.

PRO

bento4

Service Bento With Figure

Service mosaic whose lead tile floats a photo-strip media piece over a dotted field between its eyebrow and statement, beside a photographic tile captioned on its scrim, an inverted figure tile and three soft icon tiles.