Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Volunteer Hours Ring Team Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A community-hours section for Solid with Ark 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.

What moves, and what happens with reduced motion?

On load the content fades in and the ring's arc sweeps from empty to its value. With reduced motion everything is simply drawn.

Does it work right to left?

Yes. The split and the rows follow the page direction. The ring is drawn clockwise from the top in every language, like a clock, and every number is wrapped in bdi.

All 126 team blocks