Job Alerts Signup

Careers37: Job Alerts Signup

A centered card containing a heading with inline <strong> accent, a supporting paragraph, an inline email Input paired with a submit Button, and an optional row of check-marked trust indicators for capturing candidate interest in future openings.

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

Base UI flavor

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

This installs the block to components/beste/block/careers37.tsx, plus the button and input shadcn/ui primitives it uses for the subscribe action and the email field.

Quick start

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

import { Careers37, careers37Demo } from "@/components/beste/block/careers37";

export default function Page() {
  return <Careers37 {...careers37Demo} />;
}

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

import { Careers37 } from "@/components/beste/block/careers37";

export default function Page() {
  return (
    <Careers37
      heading="Get notified about <strong>new roles</strong>"
      description="Subscribe to job alerts and be the first to hear about open positions."
      inputPlaceholder="Enter your email address"
      buttonLabel="Subscribe"
      trustItems={["No spam, ever", "Unsubscribe anytime"]}
    />
  );
}

Props

Behavior notes

• heading is rendered via dangerouslySetInnerHTML, so inline <strong> markup is supported and every <strong> is styled with text-primary and font-semibold; the whole heading is skipped when heading is falsy.
• description and the trustItems row each render only when present: the paragraph is dropped if description is falsy, and the trust row is dropped when trustItems.length is 0.
• The Input is a plain type="email" field with no value, onChange, or ref, and the Button has no onClick, so the form captures and submits nothing: there is no internal state and no callback to wire, leaving all submission handling to the integrator.
• trustItems are keyed by array index, and each item renders a decorative Check icon before its label.
• The card is width-capped by an inner max-w-2xl wrapper and centers all text; the input and button sit in a single flex row where the input takes flex-1 and the button hugs its label.
• className is merged onto the outer <section> via cn, so it composes with the default py-16 md:py-24 w-full spacing rather than replacing it.