shadcn.io is not affiliated with official shadcn/ui
Employee Satisfaction Dashboard Block for Ark UI
An employee Net Promoter Score by department as diverging bars sorted by score, with quarter tabs, the company score and its change on the quarter before, and a privacy rule that hides departments with fewer than five responses.
Installation
Overview
See how people feel about work, department by department, with this employee satisfaction panel for React with Ark UI. A hairline frame with a plus mark on each corner opens with Moodring's company eNPS for the quarter in one large figure and its change on the quarter before. Under it, each of seven departments is a diverging bar around its passives: detractors run to the start, promoters to the end, in foreground weights, and the rows are sorted by their score, which is worked out from the counts. A department with fewer than five responses reads "Too few to show" in a dashed box and sorts last, and the foot says why. Tabs in the header switch between Q1, Q2 and Q3 2026. The bars are drawn by hand in a left-to-right box with an sr-only table behind them. It's built from Tabs and Guides. For people teams and survey tools.
FAQ
How do I fill it with my survey?
Edit QUARTERS: each has an id, a label, the closed date and rows, one per department made with row(id, name, promoters, passives, detractors). The company score, each department's score, the sort order, the bar widths, the change on the previous quarter and the header sentence are all worked out from those counts.
How is the score worked out?
It is the share of promoters minus the share of detractors, as a whole number from minus 100 to plus 100, rounded. The company score uses every response, including those from departments too small to show. The change is the difference in points from the quarter before, and the first quarter says it is the first in the view.
What is the privacy rule?
A department with fewer than MIN_RESPONSES responses (five) never shows a score, a bar or its counts, in the chart or in the table for screen readers, so nobody can be picked out of a small team. Change the constant to match your own threshold.
What stays local, and how do I wire it for real?
Everything: the counts are typed and no survey is run or read. To make it real, feed rows from your survey results, keep the minimum in one place on the server so a small team is never sent to the page, and decide how long a closed quarter stays available.
How is the chart read without seeing it?
Each bar is hidden from assistive technology and a table with a caption sits behind it, giving each department's responses, promoters, passives, detractors and score. The tabs change the table too, and the foot's polite status line announces the quarter you switched to.