Careers Job Alerts

ComingSoon69: Careers Job Alerts

A Polaris hiring coming-soon section (single accent color, square eyebrow) that centers an eyebrow, a heading, and a description over a working job-alert email form, then lists upcoming roles with their team and employment type below.

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/comingsoon69?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { ComingSoon69, comingsoon69Demo } from "@/components/beste/block/comingsoon69";

export default function Page() {
  return <ComingSoon69 {...comingsoon69Demo} />;
}

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

import { ComingSoon69 } from "@/components/beste/block/comingsoon69";

export default function Page() {
  return (
    <ComingSoon69
      label="We're Hiring Soon"
      heading="Our careers page is on its way. So are the roles."
      description="We're growing the team this quarter across product, design, and engineering."
      roles={[
        { title: "Senior Product Designer", team: "Design", type: "Full-time" },
        { title: "Frontend Engineer", team: "Engineering", type: "Full-time" },
        { title: "Product Manager", team: "Product", type: "Full-time" },
      ]}
      labels={{
        rolesTitle: "Roles opening first",
        placeholder: "Enter your email",
        success: "You're set. We'll email you the moment roles go live.",
      }}
    />
  );
}

Props

type RoleItem = {
  title: string;
  team: string;
  type: string;
};

type ComingSoon69Labels = {
  rolesTitle?: string;
  placeholder?: string;
  success?: string;
};

Behavior notes

• The job-alert form owns its email state; handleSubmit calls preventDefault and only flips to the success panel when the trimmed email is non-empty, so there is no external callback to wire.
• On submit the form swaps for a bordered success capsule with a Check icon and the success string; the input is not restored without a reload.
• The roles list renders only when roles is non-empty, each row a bordered card showing the title with the team and type joined by a small dot separator.
• Every region is optional: the eyebrow, heading, description, and roles list each render only when their prop is present.
• The header cluster and form are centered in a max-w-3xl column, and the roles list opens under a top border with its own centered caption.
• No inline markup is parsed: every string renders as plain text, so HTML passed in shows as escaped text.