shadcn.io is not affiliated with official shadcn/ui
Feedback Themes Team Block for React
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 Base UI, 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.
Related
- Pro
Kudos Wall Team
RecognitionTwelve kudos notes in hairline cells with a Thanks, Shipped and Helped picker that dims the rest, and a cheer button on each note that adds one to its count and takes it back.
- Pro
Badge Tracker Team
RecognitionOne person's eight badges in hairline cells, earned ones solid and locked ones dashed outlines, beside the person and a bar to the next badge: 7 of 10 reviews to Reviewer II.
- Pro
Quarter Goals Team
Learning and mentoringOne person's quarter for a project tracker: an objective with its overall completion and three key results as rows, each with a bar and a tick for how far the quarter has gone, an owner, a status word with an icon, and notes that open in place.
- Pro
Goal Rings Team
Learning and mentoringFour goal rings for a quarterly-planning tool in cells that share their hairlines: each ring fills to the goal's progress with a tick where the quarter stands, so ahead and behind read at a glance, over a band that counts goals done, in progress and blocked.
- Pro
Journey Steps Mentorship Pair Team
Learning and mentoringOne mentoring pair of a leadership program and where they are on their journey: the mentor and mentee, their cadence and topics, and four read-only steps with the week of each, two done, one current and one to come.
- Pro
Awards Table Team
RecognitionA table of eight awards for a field-notes app: the winner, the category with a small drawn mark, the company year, and a button that opens the citation in place under the row.