shadcn.io is not affiliated with official shadcn/ui
Meeting Agenda Carousel Block for React
A seven-item meeting agenda behind a proportional bar whose segments are as wide as each item's minutes and act as the page buttons, each slide showing the kind, presenter, clock span and ask.
Installation
Overview
Show how a meeting's time is spent with this meeting agenda carousel for React with Base UI. Standupkit, a meeting-notes tool, plans a 60-minute planning meeting in seven items. Above the track a bar is split into seven segments, each as wide as the minutes its item gets, and each a button that goes to its item; the item in view is the solid one, and a segment never gets narrower than 20 px. Each slide shows the item's kind as a Badge (Update, Discussion or Decision), its topic, the presenter as an initials Avatar, its minutes, its clock span, worked out from the minutes before it and a typed start of 10:00, and the ask for the room. No timer runs. The foot has the status and the Previous and Next Buttons. The ruled bands come from Guides. It's built from Carousel, Avatar, Badge, Button and Guides, with CSS transitions only. The agenda and the product are made up.
FAQ
How do I use my own agenda?
Edit ITEMS and START. Each item has an id, a topic, a kind word, a presenter's name and initials, minutes and an ask. The bar widths, the total ("60 minutes in all"), every clock span and the end time come from the minutes. START is minutes after midnight.
How does it work with a keyboard?
Tab reaches the seven segments, then Previous and Next. With focus inside the panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last item. Previous and Next stay in the tab order at the ends, marked as unavailable. Items that are out of view are hidden from the tab order and from screen readers.
How are the segment widths worked out?
Each segment grows in proportion to its minutes, so 15 minutes is three times as wide as 5. A segment has a 20 px minimum so it stays pressable, and the flexbox layout shrinks the others by the difference. Each segment is named with its item, place and minutes, such as "Item 3 of 7: Hiring plan, 15 minutes".
What is announced when it moves?
The foot line is the block's one polite live region: after each move a screen reader hears it, for example "Item 3 of 7, 10:15 to 10:30: Hiring plan". The track itself is silent, so the same slide is not read twice.