Staaarter

Framed Editorial Launch

A split-screen coming-soon screen with an editorial feel: a vertical monospace edge label runs alongside an oversized wordmark, tagline, and a working email-notify form on one side, while the other side shows a portrait photo set inside a padded, bordered frame.

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/framed-editorial-launch.json

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

Usage

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

export default function Page() {
  return <ComingSoon49 {...comingsoon49Demo} />;
}

Props

PropTypeDefaultDescription
edgeLabelstring"(coming soon)"Vertical monospace label on large screens, shown inline above the wordmark on small screens.
wordmarkstring"Acme"Oversized wordmark heading.
taglinestring"A new way to work, launching soon..."Supporting copy under the wordmark.
portraitMediaSlotImagenoneFramed portrait photo, falls back to a placeholder.
classNamestringnoneExtra classes for the outer section element.

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 vertical edge label uses [writing-mode:vertical-rl] and is purely decorative typography, it has no interactive behavior.
  • The framed portrait column is hidden below the lg breakpoint (hidden lg:flex); on small screens the edge label instead renders inline (lg:hidden) above the wordmark so the label is never lost.