shadcn.io is not affiliated with official shadcn/ui
Event Management Sidebar Block for Radix UI
A conference manager in a fixed-height window whose sidebar lists eight sessions with checkboxes that build My agenda, flags overlapping picks with a chip, and draws the day as a timeline with conflicts hatched.
Installation
Overview
Plan your own conference day with this event management sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Eventhollow, a conference manager, with eight sessions over two days. A Checkbox on each adds it to My agenda, a group at the top of the rail that lists what you picked and counts it. Two picked sessions whose times overlap are both kept, and each gets a chip with an icon and the words Overlaps with and the other session. The page draws the chosen day as a timeline of real session names, with the overlapping ones hatched, and a Segment Group in the top bar switches the day. Built from Sidebar, Checkbox, Segment Group, Empty and Guides, with a CSS entrance only. For conference programmes, schedules and any list where picks can clash.
FAQ
How is an overlap found, and why are both sessions kept?
Two sessions overlap when they share a day and each starts before the other ends, from typed start and end times in minutes. The block warns but never refuses, because people do pick clashing talks and then choose between them. Both rows get the chip, both blocks on the timeline are hatched and sit side by side, and the status line names the clash.
How does My agenda behave?
It lists the picked sessions in programme order with their own checkboxes, so you can remove one there or in the day list. The count says, for example, 4 sessions, 1 overlap, and both numbers are derived from the picks. With nothing picked the group says so and the timeline shows an empty state without changing its height.
How is the timeline drawn?
Each picked session is a positioned block from its start and end, one hour being a fixed height, in front of hour lines labelled in text. Overlapping blocks share the width in two lanes. The blocks are an ordered list of real session names, times and rooms, so a screen reader gets the same agenda in time order.
What happens when the sidebar folds to icons?
Folded, the rail is eight calendar icons with tooltips, ticked for the ones you picked. The checkboxes are hidden while it is folded. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The programme is typed at the top of the file and your picks only live in this window. Save the picks to the attendee's account in the pick handler and load the programme from your event system. The rail links are SidebarMenuButtons with asChild around an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Ticking a session leaves the sheet open so you can pick several; choosing a session's name closes it and opens the session's day. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.