Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Slot Picker Office Hours Team Block for React

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 React with Base 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.

  • Pro

    Hour Scrubber Team

    Hours and places

    A framed slider over the 24 hours of the day in UTC, above nine people in rows that show who is working at that hour with their local time, a day strip and a live count.

  • Pro

    Hybrid Week Desks Team

    Hours and places

    A coworking company's hybrid week as a table: eight people by Monday to Friday, each cell a desk code like BER-214 or Remote, a who-is-in count under each day and a select to look at one office.

  • Pro

    Status Filter Team

    Hours and places

    A live-chat widget's eight people in rows under a ruled pill filter (All, Online, Away, Busy) with counts, each row showing a presence dot, what they are doing and when they were last seen.

  • Pro

    Shuffle Pairs Coffee Match Team

    Culture and values

    This week's coffee pairs for a team-lunch app: three pairs of six people in cells with overshoot lines, a conversation starter each, and one Shine Button that moves to the next round of a fixed rota, never at random.

  • Pro

    Time Zone Axis Team

    Hours and places

    Ten people of a remote-first payroll company laid along an axis of UTC offsets, each office with its avatars, a live local time and a shaded band where it is working time, over six cells that list the same zones.

  • Pro

    Stylist Booking Contact

    Visits and services

    A salon booking that starts with the person: three stylists in hairline cells, each with their next three openings as chips, a live appointment line, and a form that checks itself and confirms in place.

All 126 team blocks