Kanban Board
A drag-and-drop kanban board for project management and task tracking. Supports multiple columns with color-coded headers, draggable cards with labels, assignees, and due dates. Features cross-column drag and drop, WIP limit enforcement, card count badges, and collapsible columns.
Preview & Code
_kanban_board.html.erb
███
██████ █████ █████████
█████████
████████ █████ ██ ██████ ██████ ████ █████
█████████
█████████████████ ███████ ███ █████ ███ ██████ ████ █ ██████████
████████████ ███████ ██ ██████ ██████ ███████████████ █████████ ██████
██████ ██████████ ███ ███████
kanban_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ███████
██████ ██████ █ █ ███████████████ ██████ █
█████████ █
████████████████ █ ████
█
kanban_board_component.html.erb
████ ██████████ █████████████ ███ ███ ████████████████████ ██████████████ ███
██ ████████████ ██ ████████ ██
██ █████████ █ ███████████████ ██ ███████████████ ██
████ ██████████ █████████████████████████ ███
███████████████████ ███████████ ███
████████████████████████████
███ ██████ ██████ ██
████ ██████████ █████████████████████ ████
████ ███████████ ████████████ ███████
kanban_board_component.rb
█ ██████████████████████ ████
█████ ████████████████████ █ ███████████████████
█████████████ █ █
██████ █████████████████████
█████ ████████████████████
██████ █████████████████████
███████ ██████████████████████
████ ███████████████████
███████ █████████████████████
kanban_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ███████
██████ ██████ █ █ ███████████████ ██████ █
█████████ █
████████████████ █ ████
█
Changelog
- v1.0.0: Initial release
- Cross-column drag and drop via HTML Drag & Drop API
- WIP limit enforcement with visual warning
- Card count badges per column
- Collapsible columns
- Color-coded column headers
- Card labels, assignees, and due dates
- Dispatches kanban:move and kanban:card-click events
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now