One React component. Drag-and-drop shifts. 200+ staff. Zero paywalls. Built on shadcn/ui so it looks like the rest of your product.
Seven domains. One component.
Workforce Roster
HR & Ops
Shift scheduling, availability, and staff allocation
Open demo →TV Guide / EPG
Broadcasting
Electronic programme guides and channel scheduling
Open demo →Conference
Events
Session, speaker, and room booking management
Open demo →Festival
Music
Stage, artist, and set-time scheduling across days
Open demo →Healthcare Rota
Medical
Ward, shift, and on-call rota management
Open demo →Gantt / Projects
Planning
Task dependencies and milestone tracking
Open demo →Venue Bookings
Hospitality
Room, table, and facility reservation
Open demo →Kanban Board
Workforce
Day/Week/Month/Year kanban with accordion categories, drag-and-drop, and timeline drill-down
Open demo →Built for production
Not a toy demo. Not a stripped-down calendar. A full scheduling engine with the flexibility of shadcn.
Blocks lift out of their row and follow your cursor freely. Drop anywhere — across rows, days, views.
200+ staff with zero jank. TanStack virtualizer renders only visible rows at 60fps.
Context menu with Edit, Copy, Cut, Delete. Rubber-band select multiple blocks and bulk move, publish or delete.
Day, Week, Month, Year, List, Timeline, Kanban. Multi-level zoom headers. Each view fully interactive.
Week grid with accordion category rows, compact shift cards, hover popover, and one-click drill-down to Day timeline.
Daily, weekly, monthly recurrence with RRULE-compatible rules. Edit single occurrence or all future.
SVG arrows connect related shifts. Draggable vertical markers for deadlines and milestones.
Get running fast
Already on shadcn/ui? The scheduler uses your existing CSS variables and Tailwind setup. No new design system. No configuration files. Just install and render.
Install the package
npm install @sushill/shadcn-schedulerImport the component
import { Scheduler } from '@sushill/shadcn-scheduler'Drop it in your page
<Scheduler categories={...} employees={...} shifts={...} />import { Scheduler } from '@sushill/shadcn-scheduler'
export default function App() {
const [shifts, setShifts] = useState([])
return (
<div className="h-[600px]">
<Scheduler
categories={categories}
employees={employees}
shifts={shifts}
onShiftsChange={setShifts}
initialView="week"
/>
</div>
)
}Most scheduling components ask for hundreds of dollars per month or lock key features behind enterprise plans. shadcn-scheduler is MIT licensed, open source, and free to use in any project — commercial or otherwise.
Use it in commercial products. Modify it. Ship it. No attribution required.
Works for 5 employees or 5,000. The license doesn't change based on your team size.
Open source on GitHub. File issues, send PRs, shape the roadmap.
MIT licensed. No lock-in. Works with your existing shadcn setup today.