Roles By Department

Careers44: Roles By Department

A centered careers section that groups open roles into department tabs: a header with an optional badge eyebrow, heading, and description sits above a shadcn Tabs bar whose first tab flattens every department's roles into one "All" list and whose remaining tabs each show a single department, with every role rendered as a bordered row showing title, location • type, and an arrow apply 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/careers44?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/careers44.tsx, plus the tabs shadcn/ui primitive it uses for the department filter bar.

Quick start

The installed file exports careers44Demo alongside the block: the exact props behind the preview above. Spread it to get a working department-tabbed roles list in one line.

import { Careers44, careers44Demo } from "@/components/beste/block/careers44";

export default function CareersPage() {
  return <Careers44 {...careers44Demo} />;
}

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

import { Careers44 } from "@/components/beste/block/careers44";

export default function CareersPage() {
  return (
    <Careers44
      eyebrow="Open Roles"
      heading="Build the studio with us"
      description="Find your department below."
      allLabel="All"
      departments={[
        {
          tabLabel: "Design",
          roles: [
            {
              title: "Senior Brand Designer",
              location: "Brooklyn, NY",
              type: "Full-time",
              href: "/jobs/senior-brand-designer",
            },
          ],
        },
      ]}
    />
  );
}

Props

type Role = {
  title: string;
  location: string;
  type: string;
  href: string;
};

type Department = {
  tabLabel: string;
  roles: Role[];
};

Behavior notes

• The first tab always uses allLabel for both its trigger label and its value; Tabs opens on defaultValue={allLabel}, so if allLabel is unset the default value is undefined and no tab is initially active.
• The "All" tab content is built by departments.flatMap((d) => d.roles), so it lists every role across every department in department order; adding a role to a department automatically adds it to the All list.
• Each remaining tab renders one department by its tabLabel, which is used as the TabsTrigger and TabsContent value, so two departments sharing a tabLabel would collide.
• Roles have no client state or callbacks: each row's apply control is a plain <a href={role.href}>, so navigation is native and there is no onSelect-style handler to intercept.
• The apply link carries aria-label={Apply for $} and animates its ArrowUpRight icon on hover; the location and type are joined by a literal • bullet.
• Nothing scrolls internally: the role lists grow to their full height, so long department lists extend the page rather than clipping to a fixed max-height.