shadcn.io is not affiliated with official shadcn/ui
Matching Diagram Mentors Team Block for Svelte
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.
Installation
Overview
A matching diagram for Svelte with Ark UI, for Quarrywood, a skills marketplace that pairs learners with people who work in a trade. A start-aligned header sits over a framed figure with + marks on its corners. Six tradespeople stand in a column at the start and six learners in a column at the end, in a different order, and a hairline curve joins each pair, so the curves cross. Hover, focus or press a person and their curve turns solid and thick while every other curve, name and avatar fades back; pressing pins the pair and a line under the diagram says what it works on and how many sessions it has had. On a phone the diagram gives way to a plain list of the same six pairs, each with the two avatars joined by an arrow, and the list ends the block. It's built from Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For a marketplace, a coaching network or any programme that matches two groups. The people are invented.
FAQ
How do I change the pairs?
Edit PAIRS at the top of the file: each pair is an id, a mentor and a mentee (a name and a role each), a focus and the sessions held so far. The mentors keep that order; MENTEE_ORDER is where each pair stands in the learners' column (the pair's position in PAIRS at each row), and the curves are drawn from the two positions, so changing the order redraws them. Keep the list at about six: each person has a 56 pixel row.
What does a screen reader hear?
The people are buttons in two lists. Each one's name ends with who they are matched with ("Tariq Mansour, Cabinet maker, Mentors Eun-ji Park"), and a button says whether it is pressed. The curves and the diagram's title are hidden from assistive technology: everything the lines show is already in the names. Pinning a pair is announced through a polite status line under the diagram.
How does it work with a keyboard?
Tab moves from person to person through the mentors and then the learners, and each focused person draws their pair, so the diagram follows focus the way it follows the pointer. Enter or Space pins the pair, and again unpins it. A pinned pair stays drawn when nothing else is focused or hovered.
Does the diagram flip in right-to-left languages?
Yes. The columns swap sides with the page direction, so the mentors are still at the start, and the drawing is mirrored so each curve still runs from a mentor to their learner.
What moves, and what happens with reduced motion?
When you follow a pair, the curves change weight and the other avatars and names fade to a quieter colour, over a third of a second, and the block fades up once on load. With reduced motion these are instant changes and the block simply appears. Nothing moves by itself.
Why is there no diagram on a phone?
The two columns and the space between them need about 700 pixels, and a diagram that scrolls sideways can't be read at a glance. Below md the block shows a list of the same pairs: the avatars with an arrow, the names, the focus and the number of sessions. Both versions are in the page, and only the one that fits is shown.