Shadcn.io is not affiliated with official shadcn/ui
Team Office Hours
React team availability schedule with weekly time slots, day filters, and booking integration using Next.js, shadcn/ui, and Tailwind CSS
A team availability block built with React, Next.js, and TypeScript that displays office hours for meetings and pairing sessions. Each row shows Avatar initials, name, role, and time slot Badge components organized by day using shadcn/ui Button filters and Tailwind CSS. The header summarizes total weekly slots with ClockIcon from Lucide React. Perfect for engineering teams, mentorship programs, and customer success availability pages.
Related Components
Team Block Compact List
Dense list with department chips and tight spacing
Team Block Locations
Team members grouped by office location
Team Block Department Tabs
Filter team members by department with tabs
Team Block Interactive Directory
Searchable filterable team directory
Team Block Speaking Events
Conference talks and speaking engagements
Team Block Accordion Profiles
Expandable rows with full bio reveal
FAQ
Was this page helpful?
Sign in to leave feedback.