shadcn.io is not affiliated with official shadcn/ui
Feedback Themes Team Block for React Aria
What one person heard in a review cycle: three themes as rows with a count and a bar as long as the count, and the two latest notes in a collapsible, on a split with a solid divider.
Installation
Overview
A feedback section about one person for React with React Aria, written for Sedgewren, a fictional performance-review tool. The split's start holds the header ("What Hana heard this cycle"), the person and two figures counted from the themes: mentions and colleagues. At the end, past a solid divider, three themes share hairline rows: the theme ("Clear writing"), a word for whether it is a strength or something to grow, its count, and a bar as long as the count against the biggest theme. Under them a collapsible opens the two latest notes, each a quote with who wrote it and when, in words like "Last week". It starts open and folds with one press. On a phone the end column follows the person: bars first, notes under them. It is built from Avatar, Badge, Progress, Collapsible and Guides with your theme's tokens. The person and the notes are made up for the example.
FAQ
How do I change the themes and the notes?
Edit THEMES (a label, a count, and whether it is a strength or to grow) and NOTES (who wrote it, the quote and when, in words) at the top of the file. The mention total and the bar lengths are worked out from the themes; the colleague count is its own number, COLLEAGUES.
How are the bars read?
The label, the word and the count are text ("Clear writing, strength, mentioned in 9 notes"); the bar repeats the count as a drawing and is hidden from assistive technology so it isn't announced twice. A strength and something to grow are told apart by a word in a small badge, not by colour.
How does the notes panel behave?
The heading holds a button with aria-expanded; the notes open and fold in place. The notes contain no links or buttons, so nothing focusable hides inside a closed panel.
A closed Collapsible keeps its notes in the page, hidden until it opens.
Why are the notes' times words?
"Last week" and "Two weeks ago" are true whenever the block is read, while a date would go stale. If you show real timestamps, format them where you render the notes.