shadcn.io is not affiliated with official shadcn/ui
Timetable Day in the Life About Block for Solid
One person's Tuesday as a timetable: three lanes (Focus, Meetings, Support) over the working day, with blocks you pick to read what each one was for.
Installation
Overview
A day in the life for Solid with Ark UI, written for Dayloom, a fictional support platform, and told through one person, Mara, a support lead, on one ordinary Tuesday. It is drawn as a timetable in a framed figure: an hour axis from 9:00 to 17:00 and three lanes, Focus, Meetings and Support, with the day's six blocks sitting at their times. Each block is a choice in one group of radio buttons, so you can click one or walk the day with the arrow keys; the chosen block is inverted, and its note is written under the timetable with its time and lane. Every note is stacked unseen under the open one, so picking a block never moves the page. On a phone the timetable keeps its width and scrolls sideways inside its frame, with the lane names pinned to the start. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, with native radio buttons, CSS for the entrance and your theme's tokens for every colour. For about pages and careers pages that want to show how time is spent, not who is on the team. The day and its notes are example data.
FAQ
How do I change the day, the lanes and the blocks?
The lanes are LANES and the blocks are BLOCKS at the top of the file. A block has a title, a lane, its start and end as text, a note, and where it sits: from is the first half-hour column it covers, counted from 9:00, and span is how many half-hours it covers. The timetable has 16 half-hour columns; change HOURS and DAY_END with it if your day is longer.
Why are the blocks radio buttons?
Choosing one block out of several, with exactly one chosen at a time, is what a radio group is. It gives the keyboard for free: Tab enters the group, the arrow keys move through the blocks in reading order, and a screen reader hears each block's name and "1 of 6". The radio itself is visually hidden and the block is its label, so the whole block is the target.
How is this different from a team block?
A team block is the people, with a control to pick among them. This is about time: one person's day laid out against the clock, so the story is how a day is balanced between focus, meetings and support, not who works here. See the team category for people-first blocks.
What happens in a right-to-left layout?
A clock runs the same way for everyone, so the timetable keeps its direction (dir="ltr") and the hours still read left to right; the header, the note and the rest of the page follow the page's direction. Times are isolated so a colon-separated time keeps its order.