Staaarter

New Location Opening

A two-column pre-opening announcement for a new physical location. One side shows a badged photo tile of the storefront, the other carries the city heading, supporting copy, a ruled details grid of the address, opening date, and hours, and a notify-me button.

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

npx shadcn add https://staaarter.com/r/new-location-opening.json

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

Usage

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

export default function Page() {
  return <ComingSoon40 {...comingsoon40Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
badgeLabelstring"New location"Badge overlaid on the photo tile.
headingstring"Opening in Austin, TX"Main heading, typically the city name.
descriptionstring"We're bringing our full store experience to a new neighborhood..."Supporting copy under the heading.
detailsLocationDetail[]noneRuled label/value rows, e.g. address, opening date, hours.
notifyLabelstring"Notify me"Label for the call-to-action button.
imageMediaSlotImagenonePhoto tile shown on the opposite side.
classNamestringnoneExtra classes for the outer section element.

Types

export interface LocationDetail {
  label: string;
  value: string;
}

Behavior notes

  • Fully static Server Component, no client state anywhere.
  • The "Notify me" button is decorative with no onClick handler, it's a placeholder call-to-action rather than a working form.
  • The photo tile uses the shared `MediaSlot` helper and falls back to a placeholder if no image is supplied.