Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Accordion Mentorship Team Block for Vue

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.

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 mentorship section for Vue with Ark UI, for Beechcombe, a coding bootcamp. A start-aligned header says how many pairs there are and how many of the cohort's planned sessions have been held, both worked out from the data. Under it, hairline rows run from rail to rail and end the block. Each row joins two initials avatars with an arrow (a solid one for the mentor, a pale one for the mentee, and the arrow mirrors in right-to-left layouts) beside "Jun Watanabe mentors Olu Adeyemi" and what the pair works on. Opening a row shows the goal, both roles, a quiet bar with the sessions held written out beside it ("6 of 8 held") and when they meet. One row is open at a time, and the first is open on load. It's built from Accordion, Progress, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For a bootcamp, a mentoring programme or an internal growth page. The people, goals and session counts are invented.

FAQ

How do I change the pairs?

Edit PAIRS at the top of the file. A pair is an id, a mentor and a mentee (each a name and a role), a focus for the row, a goal, how many sessions are held and when the pair meets. TOTAL is the number of sessions every pair plans, and OPEN_PAIR names the row that is open on load. The header's counts are added up from the pairs, so they always agree with the rows.

Does the arrow flip in right-to-left languages?

Yes. The two avatars and the arrow sit in one row that follows the page direction, so the mentor is at the start and the arrow points at the mentee in either direction; the arrow also mirrors. Screen readers hear "Jun Watanabe mentors Olu Adeyemi", because the word is written out between the names; the avatars and the arrow are decoration.

How do I let several rows stay open?

Add multiple to the Accordion.

How does it work with a keyboard?

Each pair is a button inside its own h3 under the section's h2. Tab moves from row to row, and Enter or Space opens and closes one. The Up and Down arrows also move between rows, and Home and End jump to the first and last.

Are the closed panels in the page's markup?

Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every goal renders from the start, hidden until its row opens.

Is the sessions bar readable without seeing it?

The bar is decoration. The count beside it, "6 of 8 held", carries the number as text. The bar is the block's foreground colour rather than the theme's primary, so the primary colour stays free for your own main action.

How does it fit on a phone?

All six rows show, because they are short. The panel's text starts at the row's edge instead of lining up under the names, and its four parts stack one above the other, so nothing scrolls sideways at 320 pixels.

All 126 team blocks