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 Aria

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 React Aria, 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.

All 126 team blocks