Department-Grouped Positions

Careers3: Department-Grouped Positions

A centered careers section that renders an optional badge, heading, and description above a vertical stack of departments, each showing its title over a bordered, divided list of job rows that surface an optional location (pin icon) and type (clock icon) and, when a job has an href, a ghost "Apply" button linking out via next/link.

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

Base UI flavor

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

This installs the block to components/beste/block/careers3.tsx, plus the badge and button shadcn/ui primitives it uses for the section eyebrow and the per-job "Apply" action.

Quick start

The installed file exports careers3Demo alongside the block: the exact props behind the preview above. Spread it to get a working department-grouped job board in one line.

import { Careers3, careers3Demo } from "@/components/beste/block/careers3";

export default function CareersPage() {
  return <Careers3 {...careers3Demo} />;
}

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

import { Careers3 } from "@/components/beste/block/careers3";

export default function CareersPage() {
  return (
    <Careers3
      badge={{ label: "Open Positions", variant: "secondary" }}
      heading="Find your place on <strong>our team</strong>"
      description="Browse open roles by department and apply today."
      departments={[
        {
          title: "Engineering",
          jobs: [
            { title: "Senior Frontend Engineer", location: "Remote", type: "Full-time", href: "/jobs/frontend" },
            { title: "Backend Engineer", location: "San Francisco, CA", type: "Full-time", href: "/jobs/backend" },
          ],
        },
      ]}
    />
  );
}

Props

type JobItem = {
  title: string;
  location?: string;
  type?: string;
  href?: string;
};

type Department = {
  title: string;
  jobs?: JobItem[];
};

Behavior notes

• The entire header block (badge, heading, description) only renders when at least one of badge, heading, or description is truthy; otherwise the section jumps straight to the department list.
• heading is injected via dangerouslySetInnerHTML, and any inline <strong> inside it is recolored to text-primary by a [&>strong] selector, so pass trusted markup only.
• Departments are keyed by array index and jobs by jobIndex, not by any stable id, so reordering or splicing lists mid-render can desync React keys.
• A job's location and type render independently: each is shown with its own icon only when present, and a job missing both leaves an empty metadata row.
• The "Apply" button renders only when job.href is set; a job without an href shows just its title and metadata with no action, and there is no click handler beyond the plain next/link navigation.
• Each job row is a group/careers3 hover target: hovering shifts the "Apply" arrow right and tints the row background bg-muted/50, purely decorative CSS with no state.
• The layout is fixed to a single centered column capped at max-w-3xl; rows stack vertically on mobile and switch to a spaced two-column row at the md breakpoint.