Hiring Process

Careers43: Hiring Process

A four-column hiring-process section that renders an optional eyebrow badge, a heading, and an intro paragraph above a connected flow of numbered steps, each node showing an index badge, title, duration, and description, joined by a connector rail that runs vertically down the column on mobile and horizontally between nodes on desktop.

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

Base UI flavor

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

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

Quick start

The installed file exports careers43Demo alongside the block: the exact props behind the preview above. Spread it to get a working hiring-process flow in one line.

import { Careers43, careers43Demo } from "@/components/beste/block/careers43";

export default function Page() {
  return <Careers43 {...careers43Demo} />;
}

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

import { Careers43 } from "@/components/beste/block/careers43";

export default function Page() {
  return (
    <Careers43
      label="Hiring at Polaris"
      heading="How we get to know your craft"
      intro="About 2 weeks, 4 steps of real conversations about the work."
      steps={[
        {
          title: "Intro call",
          description: "A relaxed talk with a studio lead about your story.",
          duration: "30 min",
        },
        {
          title: "Craft session",
          description: "A paid, collaborative working session on a real brief.",
          duration: "3 hrs",
        },
      ]}
    />
  );
}

Props

type ProcessStep = {
  title: string;
  description: string;
  duration: string;
};

Behavior notes

• The component is purely presentational: it exposes no callbacks, no internal useState, and no interactive elements, so all content is driven entirely by props.
• label is only shown when truthy, and it is passed to the Badge6 component rather than rendered as raw text; heading and intro are likewise conditionally rendered only when non-empty.
• Steps are keyed by array index, and the visible node number is index + 1, so reordering the steps array renumbers the flow.
• Text fields (title, description, duration, intro) render as plain React children with no dangerouslySetInnerHTML, so inline HTML like <strong> in these strings would be escaped, not parsed.
• The connector rail is decorative (aria-hidden) and layout-aware: the last step hides both its mobile vertical rail (index === steps.length - 1) and its desktop horizontal rail, so no dangling line trails past the final node.
• The desktop grid is fixed at md:grid-cols-4, so the layout is tuned for four steps; passing more or fewer changes the column packing and can leave uneven rows.
• An empty or omitted steps array renders the header block alone with an empty flow grid below it.