shadcn.io is not affiliated with official shadcn/ui
Shuffle Pairs Coffee Match Team Block for Vue
This week's coffee pairs for a team-lunch app: three pairs of six people in cells with overshoot lines, a conversation starter each, and one Shine Button that moves to the next round of a fixed rota, never at random.
Installation
Overview
A coffee-pairing block for Vue with Ark UI, for Gantrill, a team-lunch app. A centred header carries the block's one Shine Button, "Shuffle pairs". Under it, three cells stand apart with + marks and overshoot lines, one per pair: two overlapping initials avatars, a heading ("Amara and Priya"), the two people with their roles and a conversation starter ("What is the best advice you ignored?"). Pressing the button moves to the next round of a fixed rota, worked out from the six people with the circle method, so over five rounds everyone meets everyone else once before it starts again. The starters rotate through a list in a fixed order too. Nothing is random, so the server and the browser draw the same pairs. A line under the cells names the round and the pairs, and says the pairs are examples and no invitations are sent. The cells stack on a phone. It's built from Shine Button, Avatar and Guides, with CSS animation for the new pairs and your theme's tokens for every colour. For a team page, an intranet or a culture page that shows how colleagues get to know each other. The people are invented.
FAQ
Why doesn't Shuffle pairs pick at random?
Random pairings differ between the server and the browser, which makes the page flash and fail to hydrate, and a random shuffle can repeat a pair twice running. The block steps through a fixed rota instead (the circle method): one person stays put and the other five move one place round a ring each round. Over five rounds all fifteen possible pairs happen once, and the sixth press returns to the first round.
How do I change the people and the questions?
Edit PEOPLE and STARTERS at the top of the file. The rota is built for six people and three pairs; the pairs of a round come from pairsOf, and ROUNDS is the number of rounds before the rota starts again (one fewer than the number of people). For a different team size, change both. The starter for each pair comes from starterOf: three a round, so the list's length is best kept off a multiple of three.
Does it send anything?
No. This is a block, not a scheduling tool. The line under the cells says the pairs are examples and no invitations are sent. To use it for real, call your own code from shuffle and replace the rota with pairs from your server.
What does a screen reader hear after I press the button?
A polite status line names the new round and its pairs ("Round 2 of 5: Amara and Jun, Priya and Lucia, Tomas and Kofi."), and the cells change in the same place in the page, so a reader that moves to them finds the new pairs. Each cell is a list item with an h3 for the pair, and its two people in a list; the avatars are decoration.
What moves, and what happens with reduced motion?
When the round changes, the new pairs fade up over a third of a second with a CSS animation. With reduced motion there is no animation and the pairs simply change. The Shine Button's light sweeps once on hover and focus, or fades in under reduced motion. Nothing moves by itself.