Salary Bands Table

Careers35: Salary Bands Table

A pay-transparency section that renders an optional centered header (badge, <strong>-aware heading, description) above a list of engineering levels shown as a bordered desktop table and a stacked mobile card layout, each row pairing a level badge, role name, a $XXK – $YYK salary range with a proportional range bar scaled against the highest band, and an optional equity string, closed by an optional fine-print note.

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

Base UI flavor

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

This installs the block to components/beste/block/careers35.tsx, plus the badge shadcn/ui primitive it uses for the header eyebrow and the per-row level tag.

Quick start

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

import { Careers35, careers35Demo } from "@/components/beste/block/careers35";

export default function CareersPayPage() {
  return <Careers35 {...careers35Demo} />;
}

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

import { Careers35 } from "@/components/beste/block/careers35";

export default function CareersPayPage() {
  return (
    <Careers35
      badge={{ label: "Pay Transparency", variant: "secondary" }}
      heading="Open and <strong>transparent</strong> pay"
      description="Every offer falls within these published ranges."
      items={[
        { level: "L1", role: "Junior Engineer", salaryMin: 85000, salaryMax: 110000, equity: "0.01% – 0.03%" },
        { level: "L2", role: "Mid-Level Engineer", salaryMin: 110000, salaryMax: 145000 },
      ]}
      note="Ranges reflect base salary for US-based roles."
    />
  );
}

Props

type SalaryBand = {
  level: string;
  role: string;
  salaryMin: number;
  salaryMax: number;
  equity?: string;
};

Behavior notes

• The header block only renders when at least one of badge, heading, or description is present; with all three omitted the section starts directly at the table.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> is styled with text-primary; any HTML you pass is rendered raw and unsanitized.
• The range bar is scaled against globalMax = Math.max(...items.map(i => i.salaryMax), 1), the largest salaryMax across all rows, so every band's bar is positioned relative to the top of the whole set, not each row independently.
• Salary figures are formatted with formatSalary, which divides by 1000 and rounds to a whole number, rendering e.g. $85K; sub-thousand precision is lost.
• The component renders two full copies of the data: a bordered table hidden below the md breakpoint and a stacked card list hidden at and above it; both are always in the DOM.
• Desktop rows use a fixed grid-cols-[60px_1fr_1fr_140px] layout with zebra striping on odd rows (bg-muted/30) and a bottom border on every row except the last.
• Rows are keyed by array index, and a missing equity value falls back to a literal em-dash character; there are no interactive elements, callbacks, or internal state in this block.