Staaarter

Image Notify Bar

A full-bleed image hero fills the top of the section with a bottom gradient and light-colored eyebrow, heading, and supporting line laid over it. Below the photo, a solid bordered card holds a working email notify form with a success state.

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

npx shadcn add https://staaarter.com/r/image-notify-bar.json

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

Usage

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

export default function Page() {
  return <ComingSoon55 {...comingsoon55Demo} />;
}

Props

PropTypeDefaultDescription
imageMediaSlotImagenoneFull-bleed hero photo for the top of the section.
eyebrowstring"Coming soon"Small label over the photo.
headingstring"A brand new way to shop, launching soon"Large heading over the photo.
descriptionstring"We're rebuilding the experience from the ground up. Be the first to know when we open the doors."Supporting line under the heading, over the photo.
classNamestringnoneExtra 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 hero photo, its bottom gradient, and the overlaid eyebrow/heading/description are static and non-interactive.
  • The photo and the signup card stack in a single column at every breakpoint, the card sits in its own solid-background area below the image rather than overlapping it.