Album Release Pre-Order

ComingSoon68: Album Release Pre-Order

A monochrome Auralis music-release section (oversized editorial type, a monospace parenthetical eyebrow) that sets a square cover image beside an artist name, an eyebrow, an oversized title, a release-date line, a working pre-order email form, and a numbered tracklist.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon68?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon68?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon68.tsx.

Quick start

The installed file exports comingsoon68Demo alongside the block: the exact props behind the preview above. Spread it to get a working pre-order page in one line.

import { ComingSoon68, comingsoon68Demo } from "@/components/beste/block/comingsoon68";

export default function Page() {
  return <ComingSoon68 {...comingsoon68Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon68 } from "@/components/beste/block/comingsoon68";

export default function Page() {
  return (
    <ComingSoon68
      artist="Halloway"
      badge={{ label: "Out this fall" }}
      heading="Northern Lines"
      image={{ src: "/cover.jpg", alt: "Abstract album cover artwork" }}
      tracks={[
        { title: "Long Way Down", length: "3:42" },
        { title: "Coastlines", length: "4:08" },
        { title: "Northern Lines", length: "5:01" },
      ]}
      labels={{
        releaseLabel: "Release",
        releaseValue: "October 3, 2026",
        tracklistTitle: "Tracklist",
        placeholder: "[email protected]",
        success: "You're on the list. Pre-order opens to you first.",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

type ImageItem = {
  src: string;
  alt: string;
};

type TrackItem = {
  title: string;
  length: string;
};

type ComingSoon68Labels = {
  releaseLabel?: string;
  releaseValue?: string;
  tracklistTitle?: string;
  placeholder?: string;
  success?: string;
};

Behavior notes

• The pre-order form owns its email state; handleSubmit calls preventDefault and only flips to the success capsule when the trimmed email is non-empty, so there is no external callback to wire.
• On submit the pill-shaped form swaps for a bg-muted success capsule with a Check icon and the success string; the input is not restored without a reload.
• The tracklist renders only when tracks is non-empty, numbering each row by its index plus one with tabular-nums for the number and length columns.
• The artist line and the eyebrow share a row, and the release block renders whenever either releaseLabel or releaseValue is set.
• Both the badge eyebrow and the tracklistTitle render through Badge7, sharing the monospace parenthetical treatment.
• No inline markup is parsed: every string renders as plain text, so HTML passed in shows as escaped text.