shadcn.io is not affiliated with official shadcn/ui
Career Ladder Timeline Block for Ark UI
A five-level career ladder where each rung is indented one step further than the last, with a tenure bar in months, time in level counted from the dates, and a Compare with select that ticks the typical time in level on every bar.
Installation
Overview
Show how long each step of a career took, and how that compares, with this career ladder timeline for React with Ark UI. It is written for Rungwise, a fictional talent-records tool. A hairline frame with a plus mark on each corner holds one vertical rail with a numbered node for each level, from support engineer to staff engineer, and every rung is indented one step further than the one below it. Each rung has its dates, its "Time in level" worked out from the typed months, and a bar drawn to a shared scale of 40 months. The header derives "Promoted every 1 y 11 m on average" from the four finished levels. A Native Select "Compare with" offers Nobody and Typical: Typical draws a tick on each bar at the typical time in level and adds a line that says how far over or under the rung ran, and the status line counts how many finished levels ran over. A dashed row under the current level is the gap to the next one at the typical pace. The panel keeps its height for both choices. For talent records, performance reviews and any page about growth over time. The data is example data.
FAQ
How do I change the roles?
Edit ROLES at the top of the file, oldest first. Each has an id, a title, a level from 1 to 5, a start month from as "YYYY-MM" and the typical months people spend at that level. The end of a role is the start of the next one, and the last role runs to AS_OF, so the tenure bars, the average and the "to go" figure are all derived and never typed twice.
How is the bar scale chosen?
SCALE is the number of months a full bar stands for (40). Every bar and every tick uses it, so a rung that ran twice as long has a bar twice as long. Raise it if a level can last longer than that. The indent is a fixed list by level and is halved on a phone, so a deep rung never pushes its text off the screen.
What does Typical mean here?
It is a typed median for each level, kept next to the role. The block does not compute it from other people. In your product, load the median for each level from your own records and keep the same field.
What stays in the page, and how do I use real records?
Only the comparison choice, which is local state. Nothing is requested or saved. To use real data, map your records to the Role shape with ISO months and keep the helpers: they use no time library and no locale, so the server and every browser write the same text.
Is it accessible?
The ladder is an ordered list and each rung has a heading. The bars and ticks are decoration and are hidden from screen readers; the same facts are in the text beside them ("Time in level", "2 m over the typical 1 y 6 m"). When Typical is off the comparison line is hidden from assistive technology but keeps its space. The status line is a polite live region that announces the new count when the choice changes.