Job Listings List

Careers1: Job Listings List

A centered careers section that renders an optional badge, heading, and description above a bordered, row-divided list of job openings, each showing a title, inline department/location/type metadata with icons, an optional description, and an "Apply" button linking to the role's URL.

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

Base UI flavor

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

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

Quick start

The installed file exports careers1Demo alongside the block: the exact props behind the preview above. Spread it to get a working job listings section in one line.

import { Careers1, careers1Demo } from "@/components/beste/block/careers1";

export default function CareersPage() {
  return <Careers1 {...careers1Demo} />;
}

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

import { Briefcase } from "lucide-react";
import { Careers1 } from "@/components/beste/block/careers1";

export default function CareersPage() {
  return (
    <Careers1
      badge={{ label: "We're Hiring", variant: "secondary" }}
      heading="Join our <strong>growing team</strong>"
      description="Explore our open positions and find your next opportunity."
      items={[
        {
          title: "Senior Frontend Engineer",
          department: "Engineering",
          location: "Remote",
          type: "Full-time",
          description: "Build and maintain our React-based web applications.",
          href: "https://beste.co",
          icon: Briefcase,
        },
      ]}
    />
  );
}

Props

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

Behavior notes

• The entire header block (badge, heading, description) is only rendered when at least one of badge, heading, or description is present; otherwise the list renders on its own.
• heading is injected via dangerouslySetInnerHTML, and any inline <strong> inside it is recolored to text-primary, so pass trusted markup only.
• badge.variant falls back to "default" when omitted; the badge itself is skipped entirely if badge is undefined.
• Each job row conditionally renders its department, location, and type metadata (with Briefcase, MapPin, and Clock icons respectively), so any missing field simply drops out of the inline row.
• The JobItem.icon field is part of the type but is never read by the component; the metadata icons are hardcoded, so setting icon has no visual effect.
• The "Apply" button only renders when item.href is set, wraps a next/link to that URL, and its trailing ArrowRight nudges right on row hover; there is no onClick callback.
• Rows are keyed by array index rather than a stable id, so reordering or filtering items can confuse React's reconciliation.