Hiring Process Timeline

Careers10: Hiring Process Timeline

A centered, single-column hiring timeline: an optional badge, <strong>-aware heading, and lead paragraph sit above a vertical list of numbered stages, each drawing a circular index marker, a title, an optional description, and a connector line to the next step.

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

Base UI flavor

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

This installs the block to components/beste/block/careers10.tsx, plus the badge shadcn/ui primitive it uses for the section eyebrow.

Quick start

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

import { Careers10, careers10Demo } from "@/components/beste/block/careers10";

export default function Page() {
  return <Careers10 {...careers10Demo} />;
}

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

import { Careers10 } from "@/components/beste/block/careers10";

export default function Page() {
  return (
    <Careers10
      badge={{ label: "Our Process", variant: "secondary" }}
      heading="How we <strong>hire</strong>"
      description="A transparent, respectful hiring process from application to onboarding."
      items={[
        { title: "Application Review", description: "We respond within 5 business days." },
        { title: "Intro Call", description: "A 30-minute call with our recruiter." },
        { title: "Offer & Onboarding", description: "Receive your offer and start onboarding." },
      ]}
    />
  );
}

Props

type StepItem = {
  title: string;
  description?: string;
};

Behavior notes

• The whole header block (badge, heading, description) is conditionally rendered and only appears when at least one of badge, heading, or description is set; with all three omitted the timeline renders alone.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> markup is honored and styled text-primary; pass only trusted strings since raw HTML is not sanitized.
• badge.variant falls back to "default" when omitted (badge.variant ?? "default"), while badge.label is required whenever a badge object is present.
• Step numbers are derived from the array index (index + 1), not from any field on StepItem, so ordering is purely positional.
• The vertical connector line is rendered for every step except the last (index < items.length - 1), so a single-item list shows no connector.
• Each item's description is optional and skipped entirely when absent, leaving just the title next to its numbered marker.
• The block is presentational only: there are no callbacks, no internal state, and no interactive elements, so it renders identically on every pass.