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.
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.
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/bento13?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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."
/>
),
}}
/>
);
}| 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;
};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.bg-muted and the tiles are bg-background, which inverts the usual relationship so the mosaic reads as raised against a soft page.quote.quote are added by the block as entities, so pass plain text. Wrapping it in quotes yourself will double them.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.
bento11
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.
bento12
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.
bento3
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.
bento4
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.