Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Tabbed Ladder Career Paths Team Block for React

Three career tracks as flat tabs, each a five-rung ladder drawn upward on a rail: the level, the title, one line on what it expects and the people who are on it today.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A career ladder for React with Base UI, for Merrowfield, a talent platform. A start-aligned header sits over three flat tabs (Engineering, Design and Product), each with its head count worked out from the data. Every track is a ladder of five rungs with the top level at the top and a rail behind round level badges (L1 to L5) that joins them. Each rung is a band with its own top rule and + marks: the title, one line on what the level expects, and the people who stand on it today as overlapping initials avatars with their names beside them. A level with no one on it says so. The lowest rung ends the block. Every track's ladder is held in the open one's cell, so switching tabs never moves the page. On a phone the people move under the text and the tabs scroll sideways if they have to. It's built from Tabs, Avatar and Guides, with your theme's tokens for every colour. For a careers page, an engineering handbook or any team page that shows how people grow. Levels, expectations and names are invented example data.

FAQ

How do I change the tracks, levels and people?

Edit TRACKS at the top of the file. A track is an id, a label and its levels from the first level up; a level is a title, an expects line and a list of people. The badge numbers, the head counts on the tabs and the spoken level ("Level 3: Senior engineer") all come from the order of the list. A track can have any number of levels, but the rail and the badges are drawn for a ladder of about five.

Why does the list read from the lowest level when the top level is shown first?

The ladder is a list in the order of the levels, lowest first, and CSS draws it upward (flex-col-reverse). A screen reader hears Level 1 to Level 5, the order that matters; sighted visitors see the top of the ladder first. The list is named "Engineering levels, lowest first" so the direction is stated.

How does it work with a keyboard?

Tab reaches the tab list; the arrow keys, Home and End move along it and open the tab that has focus. The ladder itself has nothing to operate, so Tab then moves on past it.

Why doesn't the page move when I switch tracks?

An unseen copy of every ladder sits in the open one's cell, so the cell is always as tall as the tallest track. The copies are hidden from assistive technology and the keyboard, and take no clicks.

Is it showing real people's levels?

No. The names, levels and expectations are invented example data. A real version would take its list from your HR system; before showing who stands on which level, check that your colleagues agree to it.

How does it fit on a phone?

A rung becomes the badge and the text in one row with the people underneath, aligned to the text. The three tabs fit side by side at 320 pixels, and scroll sideways if you add more. The people's names wrap rather than truncate.

  • Pro

    Skill Bars Team

    Skills and expertise

    A picker of five e-learning specialists beside a framed figure of five skill bars: choosing a person fills the bars to their scores, each with its number and a tick for the team average on its track.

  • Pro

    Expertise Matrix Team

    Skills and expertise

    Eight CI-platform engineers down a table, four skills across with five-level dots, pill tabs to switch the skill group and a last row for the team average, running rail to rail and scrolling sideways on a phone.

  • Pro

    Accordion Mentorship Team

    Learning and mentoring

    Six mentoring pairs of a coding bootcamp as hairline accordion rows, each joining two avatars with an arrow beside the pair's names; opening a row shows the goal, the roles, the sessions held on a bar and when they meet.

  • Pro

    Progress Tracker Learning Goals Team

    Learning and mentoring

    A team learning tracker in a split: a completion ring worked out from five goals with four counted facts at the start, and a row per person at the end with their goal, a progress bar, the quarter it is due and details that open in place.

  • Pro

    Course Steps Learning Path Team

    Learning and mentoring

    One person's study path for a certification as read-only vertical steps: five courses in hairline rows, ticked when done, a halo on the one in progress, each with a quiet bar and the hours to go.

  • Pro

    Featured role salary About

    Careers

    A careers close for a hiring marketplace: culture figures and a link to the open roles beside one featured role, its salary drawn as a band on a market scale.

All 126 team blocks