Published Pay BandsPRO

Careers55: Published Pay Bands

A pay transparency table whose track pills swap the band column while the levels, their scope and the headcount at each stay in place, closing on the written rules that govern the numbers beside a soft panel carrying the call to action.

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

Base UI flavor

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

This installs the block to components/beste/block/careers55.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Careers55, careers55Demo } from "@/components/beste/block/careers55";

export default function PayPage() {
  return <Careers55 {...careers55Demo} />;
}

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

import { Careers55 } from "@/components/beste/block/careers55";

export default function PayPage() {
  return (
    <Careers55
      badge={{ label: "What we pay" }}
      heading="Every band, every level, published and not negotiable"
      description="The number on the advert is the number you get."
      tracks={["Engineering", "Operations"]}
      columns={["Level", "Scope", "Band", "People here"]}
      levels={[
        {
          level: "L1",
          title: "Joining",
          scope: "Works on a defined piece with review.",
          bands: { Engineering: "£52,000", Operations: "£38,000" },
          people: "2",
        },
        {
          level: "L3",
          title: "Senior",
          scope: "Owns a system and is trusted on a migration call alone.",
          bands: { Engineering: "£92,000 to £108,000", Operations: "£58,000 to £66,000" },
          people: "7",
        },
      ]}
      rulesTitle="The rules around it"
      rules={[
        "One band per level, with a range only where the level spans two jobs.",
        "Location does not change the band.",
      ]}
      ctaTitle="Know the number before you apply"
      ctaBody="Every open role carries its band in the advert."
      button={{ label: "See open roles", href: "/careers" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Level = {
  level: string;
  title: string;
  scope: string;
  bands: Record<string, string>;
  people: string;
};

Behavior notes

• bands is keyed by track name, so every entry in tracks needs a matching key on every level. A missing key renders an em dash rather than breaking the row.
• Only the band column changes when the track switches. Level, scope and headcount are shared, which is the point: the tracks are two pay scales over one ladder, not two different ladders.
• The column header row is hidden md:grid, so on mobile the labels come from columns[2] and columns[3] rendered inline inside the band and headcount cells instead. Passing fewer than four column labels leaves those mobile labels blank.
• Because the header row is hidden on mobile, its margin would collapse there. The rows container carries mt-8 md:mt-0 to compensate, so the spacing above the table is correct at both widths.
• Rows use border-b rather than border-t, matching the header's border-b, so the rules read as one continuous table.
• Figures use tabular-nums in both the band and headcount columns, so they stay optically aligned across different digit counts.
• The track pills are real button elements with aria-pressed and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.
• The closing panel is flex flex-col justify-center, so its content stays vertically centered against the rules list beside it however long that list runs.