Introduction
What shadcn-scheduler is, who it's for, and why it exists.
Introduction
shadcn-scheduler is a free, open-source scheduling grid for React built on shadcn/ui and Tailwind CSS. It gives you a production-ready component for workforce rosters, TV/EPG guides, conference schedules, healthcare rotas, Gantt charts, venue bookings, and more — without paying a seat license or fighting a foreign design system.
Why it exists
Most scheduling components either:
- Cost hundreds of dollars per month and lock features behind enterprise plans
- Are toy demos that break under real workloads
- Come with their own CSS framework that clashes with your design system
shadcn-scheduler is different. It's built on the same CSS variables and Tailwind tokens you already use. If you're on shadcn/ui, it looks like it belongs there — because it does.
Who it's for
Product engineers building SaaS apps that need scheduling UI — workforce management, broadcasting, event planning, healthcare, project management, or any domain where resources are scheduled across time.
Design systems teams who want a single, themeable scheduling component that matches their shadcn/ui + Tailwind stack without a separate design system.
Open-source builders who want to ship scheduling features without a commercial dependency.
What it can do
- Drag and drop — 2D free drag, blocks lift out of their row and follow your cursor across the entire grid
- 200+ staff — TanStack virtual rendering, only visible rows render
- 6 view types — Day, Week, Month, Year, List, Timeline
- Right-click context menu — Edit, Copy, Cut, Delete on any block
- Smart hover popover — Name, category, time range, duration, conflict warnings
- Resize handles — Drag left/right edges to adjust shift start/end times
- Draft & publish workflow — Mark shifts as draft, publish when ready
- Conflict detection — Red ring on blocks that overlap for the same employee
- Row modes — Category mode (stacked) or individual mode (one row per employee)
- Resizable sidebar — Drag to resize, click to collapse
- Dark mode — Automatic via shadcn CSS variables
- Keyboard navigation — Arrow keys to move blocks, Delete to remove
- TypeScript — End-to-end types for blocks, categories, employees
How it compares
| Feature | shadcn-scheduler | FullCalendar | Bryntum |
|---|---|---|---|
| Price | Free / MIT | Freemium | Paid |
| shadcn/ui native | ✅ | ❌ | ❌ |
| Resource scheduling | ✅ | Partial | ✅ |
| 200+ staff | ✅ (virtualised) | ❌ | ✅ |
| Domain presets | ✅ 7 | ❌ | Limited |
| TypeScript | ✅ | ✅ | ✅ |
| Open source | ✅ | Partial | ❌ |
Modular packages
Starting in v0.5, shadcn-scheduler also ships as a monorepo of 22 focused packages under the @shadcn-scheduler/* scope. Install only what your app needs:
# Full calendar with audit trail — nothing else
npm install @shadcn-scheduler/core @shadcn-scheduler/shell \
@shadcn-scheduler/view-month @shadcn-scheduler/plugin-audit| Package group | What it does |
|---|---|
@shadcn-scheduler/core | Pure-TS types, constants, utilities — no React |
@shadcn-scheduler/shell | React context provider for all view packages |
@shadcn-scheduler/view-* | 7 view packages — month, year, list, day, week, timeline, kanban |
@shadcn-scheduler/plugin-* | 7 plugin packages — audit, recurrence, export, markers, dependencies, histogram, availability |
@shadcn-scheduler/preset-* | 3 preset configs — tv, healthcare, conference |
@shadcn-scheduler/scheduler | Fat bundle (all of the above, backward-compatible) |
License
MIT. Use it in personal or commercial projects. Modify it. Ship it. No attribution required. No seat fees.