Overview
Everything about one task in a side sheet: title, status, priority, assignees, labels, dates, description, checklist and comments. It comes from the Kanban kit and also works on its own. Keyboard and screen readers: The sheet is a modal dialog named after the task key; focus is trapped inside and Esc closes it. After closing, focus returns to the card or button that opened it, even when the card moved column. Status, priority and labels are menus with radio or checkbox items; the trigger reads its label and current value. Checklist items are real checkboxes with labels; the delete button names the item it removes. Ctrl or Cmd + Enter sends a comment. With reduced motion the sheet appears without sliding. Built with React 19 and TypeScript, Tailwind CSS 4, Base UI and Lucide icons. Light and dark themes come from CSS variables you can edit, and every demo uses believable sample data you replace with your own. Included: the component source, its sample data, light and dark theme variables, a runnable demo page, and setup guides for people and for AI coding agents.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
