Staaarter

Bento Launch Grid

A bento grid coming-soon layout: a large panel with a wordmark, monospace eyebrow, heading, and a working email-notify form spans the top, with a photo tile and a dark tile showing an overlapping avatar stack and a static waitlist count filling the row below.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/bento-launch-grid.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon48.tsx instead.

Usage

The file also exports comingsoon48Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon48, comingsoon48Demo } from "@/components/blocks/coming-soon/comingsoon48";

export default function Page() {
  return <ComingSoon48 {...comingsoon48Demo} />;
}

Props

PropTypeDefaultDescription
wordmarkstring"Acme"Small wordmark above the eyebrow.
eyebrowstring"(coming soon)"Monospace parenthetical eyebrow.
headingstring"Something new is on the way"Main heading in the large panel.
descriptionstring"We're putting the finishing touches..."Supporting copy under the heading.
imageMediaSlotImagenonePhoto for the image tile, falls back to a placeholder.
waitlistCountstringnoneStatic waitlist size shown in the dark tile, e.g. "4,820+".
waitlistMembersWaitlistMember[]nonePeople shown as an overlapping avatar stack in the dark tile.
classNamestringnoneExtra classes for the outer section element.

Types

export interface WaitlistMember {
  name: string;
  avatar?: { src: string; alt: string };
}

Behavior notes

  • The email form is real client state: submitting sets `submitted` and swaps the form for a success message, nothing is sent over the network.
  • The avatar stack and waitlistCount are static demo data, not derived from any real signup count.
  • Each avatar falls back to initials (via AvatarFallback/initialsFromName) if no photo is supplied or the image fails to load.