Locked Product Preview

A split-screen coming-soon layout: one side carries an eyebrow, heading, description, and an email notify form with a success state, the other shows a browser-window mockup with a blurred, locked preview of the product UI underneath a lock badge.

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 dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/locked-product-preview.json

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

Usage

The file also exports comingsoon54Demo, 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 { ComingSoon54, comingsoon54Demo } from "@/components/blocks/coming-soon/comingsoon54";

export default function Page() {
  return <ComingSoon54 {...comingsoon54Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	"Coming soon"	Small label above the heading.
heading	string	"Your new dashboard is almost ready"	Main heading on the form side.
description	string	"We're putting the finishing touches on a faster, more powerful workspace. Leave your email and we'll let you know the moment it's live."	Supporting sentence under the heading.
browserUrl	string	"app.yourproduct.com"	URL text shown in the mock browser address bar.
className	string	none	Extra classes for the outer section element.

Behavior notes

The email form is a real controlled input with a submit handler that flips local state to a success message, nothing is sent over the network.
The browser-window mockup, its address bar, the blurred placeholder UI behind it, and the lock badge are all static and non-interactive, hand-rolled with divs rather than a real screenshot.
Below the lg breakpoint the two-column grid collapses to a single stacked column, the form appears above the locked preview.

More Coming Soon Blocks

View all →

countdown-timer-launch

Countdown Timer Launch

A centered launch page with a live days/hours/minutes/seconds countdown to a target date.

development-progress-milestones

Development Progress Milestones

A centered launch page with an overall progress bar and a milestone tracker list with status badges.

social-connect-launch

Social Connect Launch

A centered coming-soon page with pill-style outline buttons linking out to Twitter, GitHub, LinkedIn, and email.

animated-icons-preview

Animated Icons Preview

A centered coming-soon page with a row of bobbing icon tiles and a pulsing build-status indicator.

sneak-peek-feature-grid

Sneak Peek Feature Grid

A centered coming-soon page with a grid of blurred feature cards teased behind a lock icon overlay.

waitlist-with-avatars

Waitlist with Avatars

A centered coming-soon page with a working waitlist signup form, stacked subscriber avatars, and a live join count.