shadcn.io is not affiliated with official shadcn/ui
Weekly Rhythm Team Block for React
How a week runs at a project-planner company: five day columns in one hairline band, each with a ritual, its time, who hosts it and a length in minutes that counts up once, drawn to the same scale as a short bar.
Installation
Overview
A weekly-rhythm section for React with Base UI, for Fernlea, a project planner. A centred header says how many shared rituals the team has and how many hours they add up to; under it one hairline band runs from rail to rail with five day columns: Monday planning, Tuesday pairing hour, Wednesday demo, Thursday writing hour and Friday retro. Each column has the day, the ritual's name, its time of day, a length in minutes that counts up once as the band scrolls into view with a bar drawn to the same scale, one sentence on what happens and who hosts it. The header's hours are added up from the five rituals and the end time of each is worked out from its start and length. The band ends the block. On a phone the days become rows, with the length beside the name. It's built from Sliding Number, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. The people and the schedule are made up for the example.
FAQ
How do I change the week?
Edit RITUALS at the top of the file. A ritual is a day, a name, a start in minutes after midnight (10 * 60 is ten o'clock), its minutes, a what sentence and a host with a hostRole. The end time, the bar lengths and the "4 hours" in the header are all computed from those numbers. Five columns fill lg; use another count and change lg:grid-cols-5 to match.
What counts, and when?
Each length rolls up from zero once, the first time its column scrolls into view, with the Sliding Number component. Under reduced motion the number is simply there. The final number is read aloud as plain text ("45 minutes"), and the rolling digits are hidden from assistive technology.
Do the numbers move things while they count?
No. The number's final width is reserved before it starts, so nothing around it shifts, and the bar is drawn at its final length from the start: it is a share of the longest ritual, not part of the animation.
Are the times in my time zone?
They are fixed text, in the team's own clock, not converted: a "10:00" is ten o'clock wherever the team sits. If your team is spread out, say which time zone in the sentence under the title.
Related
- Pro
Values Examples Team
Culture and valuesFour company values as vertical tabs in a split; each page says what the value means and lists three real examples of someone doing it, with the year of the company, revealing one after another.
- Pro
Values Accordion Team
Culture and valuesFive working values at an accessibility-audit company as a single-open accordion in a split: each value is a habit you could watch, and opened it shows what it looks like in the work and one teammate's words.
- Pro
Animated Counter Team
Numbers and historyA short strip of four centred people figures that roll up once as they scroll into view, over a closing row with the newest eight people as initials.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Timetable Day in the Life About
Culture and valuesOne person's Tuesday as a timetable: three lanes (Focus, Meetings, Support) over the working day, with blocks you pick to read what each one was for.
- Pro
Slot Picker Office Hours Team
Hours and placesWeekly office hours of a pair-programming service: five day tabs, each with three engineers' half-hour slots as pills, and a single Shine Button that reads 'Book Thu 14:00 with Noor' once a slot is picked.