Open Roles

Careers40: Open Roles

A studio careers section with a header row (large heading, vertical divider, eyebrow badge, and an open-count label) above a bordered list of open roles, each row linking out to its href and showing the title, a department / location / type meta line separated by dot markers, a salary, and a hover-animated up-right arrow seal.

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

Base UI flavor

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

This installs the block to components/beste/block/careers40.tsx.

Quick start

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

import { Careers40, careers40Demo } from "@/components/beste/block/careers40";

export default function CareersPage() {
  return <Careers40 {...careers40Demo} />;
}

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

import { Careers40 } from "@/components/beste/block/careers40";

export default function CareersPage() {
  return (
    <Careers40
      label="Careers"
      heading="Build the studio behind the work"
      openingsLabel="7 open roles"
      roles={[
        {
          title: "Senior Brand Designer",
          department: "Design",
          location: "New York, NY",
          type: "Full-time",
          salary: "$120k – $150k",
          href: "/jobs/senior-brand-designer",
        },
      ]}
    />
  );
}

Props

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

Behavior notes

• Each role row is a plain <a href={role.href}>; there is no click callback and no target/rel, so navigation is a full-page follow of the raw href.
• The eyebrow label badge and the vertical divider are gated behind the lg breakpoint (hidden lg:flex / hidden ... lg:block), so they never appear on smaller screens even when label is set.
• label and openingsLabel are each conditionally rendered: passing an empty or omitted value drops that element entirely rather than rendering blank space.
• salary is hidden below the sm breakpoint (hidden ... sm:block), so the arrow seal is the only right-side content on narrow viewports.
• Rows are keyed by array index, and the department / location / type dot separators are static decorative spans, not derived from data, so all three meta fields always render even if a value is empty.
• Hover state is scoped per row via the group/careers40 class: the title shifts to text-primary and the arrow seal nudges up and right, but this is presentational only with no active/selected state tracked anywhere.
• There is no internal state, no filtering, and no pagination; the list renders every entry in roles in order with no max-height or scroll container.