shadcn.io is not affiliated with official shadcn/ui
Weekly Rhythm Team Block for Ark UI
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 Ark 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.