shadcn.io is not affiliated with official shadcn/ui
Volunteer Hours Ring Team Block for React
A ring of 1,200 of 1,500 volunteer hours with a band of totals, next to eight activity rows showing the organisation, the volunteers as overlapping initials and the hours, all added up from the data.
Installation
Overview
A community-hours section for React with Base UI, written for Greenhead, a fictional volunteering app. A split with a divider that runs from the top rule to the foot. At the start a header ("Greenhead's volunteers gave 1,200 hours"), a ring that fills to the hours given against the year's goal ("1,200 of 1,500 hours"), and a band of three totals: volunteers, activities and hours each. At the end the eight activities as rows, most hours first, each with + marks on its top rule: the activity and the organisation it was for, the volunteers as overlapping initials and the hours. Every figure, the ring included, is added up from the rows. The ring sweeps in once on load; under reduced motion it is drawn at once. On a phone the ring comes first, above the rows. It is built from Circular Progress, Avatar and Guides with your theme's tokens. The activities and people are made up for the example.
FAQ
How do I change the activities and the goal?
Edit ACTIVITIES (a name, an organisation, the hours and the volunteers' names) and GOAL at the top of the file. The header's hours, the ring's percentage, the count of volunteers (each person once, however many activities they joined) and the hours each are all worked out from the list, so the rows always add up to the ring.
How is the ring drawn, and what does a screen reader hear?
The ring is the catalog's Circular Progress, drawn in the foreground colour and hidden from assistive technology. Its meaning is in the text beside it: "1,200 of 1,500 hours" and "80% of the way to the year's goal". The ring and its caption are one figure.
How are the volunteers shown, and read?
As overlapping initials, hidden from assistive technology; each row also carries an unseen line with the names ("Volunteers: Marta Kowalska, Kofi Mensah, ..."), so nobody is only a circle.
How is the divider drawn, and what happens on a phone?
The column has no vertical padding of its own; its parts carry it, so the divider runs from the top rule to the block's end. Below lg the divider becomes a rule between the two parts, and the ring comes first with the totals band under it, then the rows. The hours sit at the end of each row, and the initials on a line of their own under the name.
Related
- 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
Maintainers Table Team
Projects and workloadA table of an open-source project's six maintainers and contributors with their repositories, a twelve-week contribution strip and a button that opens their good first issues in place under the row.
- Pro
Goal Ring Tiles Stats
Goals and progressFour goal tiles for an OKR tool, each a thin ring with the part done drawn solid, the part today's pace will add drawn lighter after it and a tick for the target, with the projected finish in words.
- Pro
Tick Dial Hero Metric Stats
Hero metricA hero figure for a crowdfunding page as a dial of sixty radial ticks, the share raised drawn at full weight, with the amount raised in the middle and the percent funded beside it.
- Pro
Ranked Winners Team
RecognitionA hackathon's three judged places as ranked rows with a big place numeral, the project, its team and judges' score, plus a people's-choice band with a vote toggle and its count.