shadcn.io is not affiliated with official shadcn/ui
UX Researcher Studies Profile Block for React
A UX researcher profile as a research repository: four studies in an accordion with method and participants, a method filter that dims the others, and for the open study three insights each graded for impact with the evidence and one verbatim quote.
Installation
Overview
Keep what a researcher learned where the team can read it, with this UX researcher profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the researcher: initials, name, role and city, and a badge that counts the studies, participants and insights that are lit, worked out from the data. A Toggle Group (All, Qualitative, Quantitative) narrows the list by dimming the other studies, not by removing them, so the list never moves. The studies are rows in an Accordion, one open at a time: each shows its name, its method, how many people took part and when it ran. The open study lists its three insights as cards: one line, an impact grade drawn as five pips and read in words ("Impact 4 of 5"), the evidence ("from 6 of 8 sessions") and one verbatim quote with its participant code. It's built from Accordion, Toggle Group, Badge, Avatar and Guides with CSS only. The researcher, the studies and the quotes are invented. For a research repository, a design team's wiki or any profile of a researcher's findings.
FAQ
How do I fill it with my own studies?
Edit STUDIES in the Ark file: each study has a name, a method (qual or quant), how the research was run, its participants and the unit its evidence counts (sessions, responses, diaries or tasks), when it ran and its insights. An insight has a line of text, an impact from one to five, how many units showed it, a verbatim quote and who said it. The counts in the badge and the status line are worked out from those.
How is the impact grade shown?
As five pips, filled up to the grade, with the grade written beside them ("Impact 4 of 5") and the evidence after it. The pips are hidden from assistive technology because the words say the same. A grade is a judgement the researcher makes, so the block shows it as typed and counts how many insights are four or five in the status line.
What does the method filter do?
It dims the studies of the other method to a quieter text tone and updates the counts above for the studies that are lit; no row is removed, so the list and the panel keep their height. Dimmed studies can still be opened. The status line says how many studies are lit and how many insights are impact 4 or 5.
How do I use the accordion with a keyboard?
Tab moves between the study rows and Enter or Space opens one; exactly one stays open, so pressing the open row does nothing. On this base the arrow keys do not move between rows: use Tab. Closed studies keep their text in the page.
Is it accessible, and what about right-to-left?
Each row is a heading with a button, the open study is announced as expanded, and the quotes are real block quotes. Names, counts and quotes are isolated so mixed text keeps its order in a right-to-left layout, and the quote bar sits on the start side. Nothing relies on colour; the status line is a polite live region present from the start, and the entrance is a CSS fade that stops under reduced motion.
What stays local, and how do I wire it to real data?
Everything is typed sample data, and opening a study or filtering only changes the page and the status line; no participant, quote or finding is real. To wire it up, load your studies and insights from your repository into STUDIES, keep the counting helpers, and link each insight to its recording or notes if you have consent to share them.