Overview
Columns of task cards with counts and work-in-progress limits; drag cards between columns or move them by keyboard, and add a card inline. It comes from the Kanban kit and also works on its own. Keyboard and screen readers: Each card is a focusable draggable item; arrow keys move between cards and columns, Enter opens the card. Space picks a card up, arrows move it, Space or Enter drops it and Esc puts it back; each step is announced with column and position. Moving past a column's limit is announced, and the count says it is over the limit. Pointer drag starts after a small move with a mouse, or a long press on touch so the page still scrolls. With reduced motion cards jump to their new place; the spring is used only while dragging. Built with React 19 and TypeScript, Tailwind CSS 4, Lucide icons and Motion. 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
