Career Growth Ladder

Careers12: Career Growth Ladder

A vertical career-ladder section: an optional centered badge, heading, and description sit above a connected timeline of level rows, each pairing a circular level badge (linked by a vertical rule) with a role title, description, and a bulleted skills list, closed by a centered prompt and a row of link buttons.

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

Base UI flavor

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

This installs the block to components/beste/block/careers12.tsx, plus the badge and button shadcn/ui primitives it uses for the eyebrow badge and the closing action buttons.

Quick start

The installed file exports careers12Demo alongside the block: the exact props behind the preview above. Spread it to get a working career ladder in one line.

import { Careers12, careers12Demo } from "@/components/beste/block/careers12";

export default function CareersPage() {
  return <Careers12 {...careers12Demo} />;
}

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

import { Careers12 } from "@/components/beste/block/careers12";

export default function CareersPage() {
  return (
    <Careers12
      badge={{ label: "Growth", variant: "secondary" }}
      heading="Build your <strong>career path</strong> with us"
      description="A clear framework for growth, from your first day to the most senior levels."
      items={[
        {
          level: "L1",
          title: "Junior Engineer",
          description: "Begin your career with mentorship and structured learning.",
          skills: ["Code reviews", "Feature implementation", "Testing fundamentals"],
        },
        {
          level: "L2",
          title: "Mid-Level Engineer",
          description: "Own features end-to-end and contribute to technical decisions.",
          skills: ["System design basics", "Project ownership"],
        },
      ]}
      buttons={[{ label: "View Open Positions", href: "/careers" }]}
    />
  );
}

Props

type LevelItem = {
  level: string;
  title: string;
  description?: string;
  skills?: string[];
};

Behavior notes

• The entire header block (badge, heading, description) is only rendered when at least one of those three props is present, so a bare items-only ladder skips the top section.
• heading is injected via dangerouslySetInnerHTML, and its inline <strong> is recolored to text-primary, which is the only markup styled; pass trusted strings only.
• The connecting vertical rule is drawn only between rows: the last item skips it via the index < items.length - 1 check, so a single-item ladder shows no line.
• item.level is rendered verbatim inside the circular badge (e.g. "L1"); it is a display string, not a computed index, so ordering and labeling are entirely your responsibility.
• Each row's skills list renders only when item.skills is non-empty, and each skill is prefixed with a literal • bullet character rather than a real list marker.
• The buttons are next/link anchors wrapped in Button, with no onClick or callback wiring; navigation is pure href, and the whole call-to-action block (including the "Ready to start your journey?" prompt) is hidden when buttons is empty.
• The layout is width-capped at max-w-3xl, so the ladder stays a single narrow column at every breakpoint with no multi-column or horizontal-scroll behavior.