shadcn.io is not affiliated with official shadcn/ui
Meeting Agenda Task List Block for Ark UI
A timeboxed meeting agenda with speakers, notes, move up and down, a total and finish time worked out from the minutes, and one Start meeting button that runs a countdown for each item.
Installation
Overview
Run a meeting to its clock, with this meeting agenda to-do list block for React with Ark UI. Six items list a speaker avatar, minutes and a start and end time that are worked out from the order, so moving an item with its Move up or Move down button re-times every row, and the footer's total and finish time ("55 min in all, ends 10:55") follow. Each item has a notes disclosure built on Collapsible, and a "Last time" line shows how long the item took before and by how much it ran over. One Shine Button is the only primary: it starts the meeting, then becomes Next item and finally End meeting, and the current item is marked as the current step while the Timer counts down its minutes. Items that have started stay where they are. Guides rule the bands. For team syncs, planning calls and any meeting with a hard stop.
FAQ
How are the start and end times worked out?
The meeting starts at the constant STARTS (10:00), and each row starts when the rows above it end. Change the minutes or the order and every time, the total and the finish time recompute, so the page never states a time that is out of step with the minutes.
How does the countdown work?
Start meeting begins the first item and the timer counts down its minutes. Next item starts the next item's countdown, and Pause and Resume stop and restart the clock. When it reaches zero the footer says "Time is up. Move on when ready."; the clock does not run on past it and nothing moves by itself.
Which items can I move?
Any item that hasn't started. Once the meeting is running, the current item and the finished ones can't move, and their buttons stay focusable and answer in the status line.
What stays local, and how do I save for real?
The order, the notes and the timer live in the page and reset on reload; no calendar or chat is touched. In your app write the new order from move, store the minutes each item actually took, and use them for the "Last time" line.
Is it accessible?
The agenda is an ordered list, the current item is marked aria-current="step" and also announced as "current item", the move buttons name their item, and the countdown digits are hidden from screen readers in favor of the status messages ("Next item: Importer fix demo", "Time is up for ...").