Perks & Open Positions

Careers4: Perks & Open Positions

A complete career-page section that stacks a centered heading block, a two-column grid of perk cards (each with an optional icon, title, and description), and a bordered, divided list of open positions where every row shows the job title with Briefcase/MapPin/Clock metadata and an "Apply" button linking to the role.

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

Base UI flavor

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

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

Quick start

The installed file exports careers4Demo alongside the block: the exact props behind the preview above. Spread it to get a working perks-and-positions section in one line.

import { Careers4, careers4Demo } from "@/components/beste/block/careers4";

export default function CareersPage() {
  return <Careers4 {...careers4Demo} />;
}

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

import { HeartPulse, MapPin, Wifi } from "lucide-react";
import { Careers4 } from "@/components/beste/block/careers4";

export default function CareersPage() {
  return (
    <Careers4
      badge={{ label: "Careers", variant: "secondary" }}
      heading="Why you'll <strong>love working</strong> here"
      description="Explore our perks and open roles below."
      perks={[
        { icon: Wifi, title: "Remote Work", description: "Work from anywhere in the world." },
        { icon: HeartPulse, title: "Health Insurance", description: "Medical, dental, and vision from day one." },
      ]}
      items={[
        { title: "Senior Frontend Engineer", department: "Engineering", location: "Remote", type: "Full-time", href: "/jobs/frontend" },
      ]}
    />
  );
}

Props

type PerkItem = {
  icon?: LucideIcon;
  title: string;
  description?: string;
};

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

Behavior notes

• The entire header block is conditionally rendered: the centered wrapper only mounts when at least one of badge, heading, or description is truthy, and each of the three renders independently inside it.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> markup is honored and recolored to text-primary; any other HTML you pass is rendered unescaped too.
• badge.variant falls back to "default" when omitted, unlike the demo which passes "secondary".
• Perk cards render their icon block only when perk.icon is set and the description paragraph only when perk.description is set; the title always renders. The grid is one column on mobile and two columns from sm: up.
• Job rows are keyed by array index, and their metadata spans (department, location, type) each render only when present, so a row with just a title collapses to a single line.
• The "Apply" button renders only when item.href is set; it is a real next/link anchor to that URL (no click handler or callback), and its arrow nudges right on row hover via the group/careers4 hover group.
• There is no internal state, no selection tracking, and no scroll cap: every perk and every job is always laid out in full.