shadcn.io is not affiliated with official shadcn/ui
Spectrum Work Style Preferences Team Block for Radix UI
How one person likes to work as four five-step spectra in hairline cells, each with her answer as a solid dot, the team's median as a hollow ring and the same facts in words under the track.
Installation
Overview
A work-style section for React with Radix UI, for one person: Selin Aydin, coaching lead at Cawood, a coaching app. A header names her and says what the block is for, and under it four cells share their hairlines (a column on a phone, two by two from md). Each cell asks one question (when I do my best work, how I like to talk, how I look at a problem, how I like to build) and draws a five-step line between two ends, such as Early bird and Night owl, with her answer as a solid dot and the team's median as a hollow ring. The median is worked out from eight teammates' answers in the data. Under each line the same facts are text: her answer in words, the median and how many steps apart they are. There is no score, no type and no colour: an answer is a place on a line, never better or worse. It's built from Avatar and Guides with your theme's tokens. For profile pages and onboarding pages, where "how do you like to work?" saves a week of guessing. The person and the answers are made up.
FAQ
How do I change the questions and the answers?
Edit SPECTRA at the top of the file. A spectrum has a question, two ends, five steps (the words for 1 to 5), her answer as mine and a list of the team's answers. The median, the dot and the ring positions, the words in the text and the "steps from the median" sentence are all worked out from those numbers. An even number of teammates can give a median half a step between two answers, which is drawn between two ticks and read as "Between … and …".
Why is there no score or personality type?
A score turns a preference into a ranking, and a type turns it into a label somebody lives with. Four lines with a dot and a ring only say where this person is and where the team is, so a teammate can choose a meeting time or a way to give feedback. The copy says so out loud in the header.
How is it read by a screen reader?
The drawn tracks are hidden from assistive technology; every cell carries the same facts as visible text: the question as a heading, her answer in words with its number ("Mostly async (2 of 5)"), the team median and the gap. Nothing needs a mouse or a keyboard, because nothing is interactive.
Why isn't it a Slider?
A slider invites you to move it, and this line is a record, not a control: a focusable, adjustable track would imply that the answer can be changed. The line is drawn with a solid dot and a hollow ring in plain elements, and the text beside it is the accessible version.
Does it work right to left?
Yes. The line and its two end labels sit in one box that keeps its own reading direction, so "Early bird" stays at the end that matches the dot's position; the question and the text under it follow the page's direction, and each "2 of 5" is wrapped so its digits stay together.