Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Slot Picker Office Hours Team Block for Svelte

Weekly office hours of a pair-programming service: five day tabs, each with three engineers' half-hour slots as pills, and a single Shine Button that reads 'Book Thu 14:00 with Noor' once a slot is picked.

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

Overview

An office-hours picker for Svelte with Ark UI, for Pellway, a pair-programming service. A split puts the copy and the booking at the start and the week at the end, divided by a hairline. The week is five flat day tabs, Mon to Fri, each with its slot count, over three engineers with a focus each (backend, frontend, mobile) and their half-hour slots in UTC as a row of pill buttons. Picking a slot enables the block's one Shine Button, which reads "Book Thu 14:00 with Noor"; pressing it notes the request in a polite line that says nothing is sent from this preview. Every day's panel stays in one grid cell, so switching days never moves the page. On a phone the parts stack: header, slots, then the booking. It's built from Tabs, Toggle Group, Shine Button, Avatar and Guides, with your theme's tokens for every colour. For a support page, a mentoring programme or a team page that offers time with its people. The people and the slots are invented.

FAQ

How do I change the hosts, days and slots?

Edit HOSTS, DAYS and SLOTS at the top of the file. A host is a name and a focus; SLOTS has one entry per day and host with a list of start times ("14:30") in UTC. The tab counts ("9 slots") are worked out from the list. To book for real, call your booking tool from request, where choice holds the picked slot ("thu/noor/14:00").

How does the keyboard work?

Tab reaches the day tabs and then each engineer's row of slots. The arrow keys, Home and End move along the tab list and open the tab that has focus. In a row of slots the arrow keys move between the pills and Space or Enter picks one; Enter or Space on the picked pill clears it, which disables the Shine Button again. Only one slot can be picked across all rows.

What does the confirmation say, and is anything booked?

Nothing is booked or sent: this is a block, not a booking system. The line under the button names exactly what you picked ("Requested Thu 14:00 UTC with Noor Haddad.") and says plainly that nothing is sent from the preview. Replace that sentence with whatever your system really does, such as "Check your inbox for the invite".

Why are the times in UTC?

The slots belong to engineers in different countries, so the block states one time zone, UTC, in the header and in each row's name. To show the visitor's own time, convert in the browser after the page loads; the block doesn't read the clock while it renders.

Why doesn't the page move when I switch days?

An unseen copy of every day's panel sits in the same grid cell as the open one, so the cell is always as tall as the tallest day. The copies are hidden from the keyboard and assistive technology.

All 126 team blocks