Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Journey Steps Mentorship Pair Team Block for React

One mentoring pair of a leadership program and where they are on their journey: the mentor and mentee, their cadence and topics, and four read-only steps with the week of each, two done, one current and one to come.

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 mentoring journey for React with Base UI, for Foxcombe, a leadership program. A split with a hairline divider shows one pair. At the start, a header ("Week 8 of 16, and the midpoint review is next"), the mentor and the mentee as initials avatars with their roles, how often they meet ("Every other Thursday, 45 minutes") and the topics they chose as chips. At the end, the catalog's Steps drawn read-only as four milestones: Kickoff, Goals set, Midpoint and Review, each with its week and a line about what happens at it. The first two are ticked, the Midpoint carries a halo as the one the pair is at, and the Review waits. The steps run across the end cell from lg, with the marker and rail on one line and the words under it, and down it on a phone with a rail between the markers. It's built from Steps, Badge, Avatar and Guides, with your theme's tokens for every colour. For a leadership programme, a mentoring scheme or a member page that shows one pair at a time. The people are invented.

FAQ

How do I change the pair, the milestones and where they are?

Edit MENTOR, MENTEE, TOPICS and MILESTONES at the top of the file. A milestone is a title, a week and a note. AT is the index of the step the pair is at: the steps before it are drawn as done, that one as current and the rest as up next. Change AT and the markers, rails and spoken states all follow. If you add or remove a milestone, change the four-column grid of the list to match.

Are the steps buttons?

No. The markers are not interactive: the journey shows where a pair is, it doesn't move them. Each list is a plain list of four items, the current one marked as the current step, and each name is preceded by hidden text that says "Done:", "Where they are now:" or "Up next:", so the state isn't carried by the marker alone.

Why are the steps in the page twice?

The steps run across at lg and down below it, and Steps has one orientation at a time, so the block holds two lists with the same content and CSS shows the one that fits. The other is hidden from the keyboard and from assistive technology, so nothing is read twice.

Does it follow right-to-left languages?

Yes. The markers and rails run from the end of the page's reading direction, the vertical rail is positioned with logical offsets so it stays under the markers, and the weeks are wrapped so "Week 8" keeps its order.

Why are the steps not in the primary colour?

Steps default to the theme's primary, but this block keeps the primary for your own main action, so the done and current markers and the rails take the foreground tone and the current one gets a soft halo.

Why are the dates weeks and not days?

A pair's calendar is theirs, and a date typed into a block goes stale. "Week 8" says where they are in a programme of any start date.

  • 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

    Matching Diagram Mentors Team

    Learning and mentoring

    A framed matching diagram for a skills marketplace: six tradespeople in a column at the start, six learners at the end in another order, a hairline curve joining each pair, and the pair you hover, focus or press kept while the rest recede.

  • Pro

    Buddy Page Team

    Hiring and onboarding

    A buddy page for an expense-report tool: the new hire and their buddy side by side with a link between them, a five-day first-week list, and three people to ask, each with what to ask them about.

  • 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

    Quarter Goals Team

    Learning and mentoring

    One person's quarter for a project tracker: an objective with its overall completion and three key results as rows, each with a bar and a tick for how far the quarter has gone, an owner, a status word with an icon, and notes that open in place.

  • Pro

    Mentorship Match About

    Careers

    Two sides of a mentorship match for a mentoring-software company, joined by a connector, with three steps underneath for how a match is made.

All 126 team blocks