Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Meeting Agenda Task List Block for Solid

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Run a meeting to its clock, with this meeting agenda to-do list block for Solid 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 ...").

How does it look on a phone?

The speaker, times and minutes stay on the row, the "Last time" line is hidden to save space, and the notes disclosure sits under the title. The agenda scrolls inside a named region.