Features
- Multiple Columns: Create unlimited categories/stages
- Drag & Drop Cards: Move tasks between columns
- Drag & Drop Columns: Reorder columns
- Color Coding: Customize column colors
- Task Management: Add, edit, and delete tasks
- Scrollable Columns: Handle many tasks per column
- Horizontal Scrolling: Support for many columns
- Touch Support: Full mobile/tablet functionality
Setup
Creating Columns
Column Colors
Choose from 24 vibrant colors:- Red: Knallrot (#FF4C4C)
- Orange: Helles Orange (#FF914D), Apricot (#FFAB76)
- Yellow: Sattgelb (#FFC300), Sonnengelb (#FFDE59), Zitronengelb (#FFFF8F)
- Green: Neongrün (#90EE02), Mintgrün (#8CFF98), Sanftgrün (#C1FFD7)
- Cyan: Türkis (#00E0B8), Neon-Aqua (#00FFAB), Eisgrün (#A1E3D8)
- Blue: Himmelsblau (#00BFFF), Klares Blau (#4B7EFF), Babyblau (#85E3FF)
- Purple: Violett (#A066FF), Flieder (#B28DFF), Lavendel (#D0AAFF)
- Pink: Knallpink (#FF66C4), Rosé (#FF8FAB), Zuckerwatte (#FFB5E8)
- Pastels: Various soft colors
Managing Tasks
Adding Tasks
Deleting Tasks
- Hover over a task card
- Click the trash icon that appears
- Task is removed immediately
Moving Tasks Between Columns
Drag tasks to different columns:- Click and hold on a task card
- Drag to the target column
- Release to drop
- Task updates automatically
- Dragged card becomes semi-transparent (50% opacity)
- Cursor changes to grabbing hand
- Drop zones highlighted
Drag & Drop Details
Moving Tasks Within a Column
- Reorder tasks by priority
- Drag up or down within the same column
- Visual feedback during drag
- Auto-saves new order
Moving Tasks Between Columns
- Drag from any column to any other column
- Drop above, below, or at the end of a column
- Task moves to new column instantly
- Previous column updates automatically
Reordering Columns
- Click and drag column headers
- Horizontal drag motion only
- Reorder workflow stages
- All cards move with the column
Touch Support
Mobile & Tablet:- Long-press (250ms) to start dragging
- 5px movement tolerance
- Smooth dragging experience
- Works for both cards and columns
Column Management
Deleting Columns
Column Styling
Each column displays:- Title: Column name in colored text
- Color Border: Bottom border in selected color
- Background: Translucent color background (20% opacity)
- Cards: Matching colored borders and backgrounds
Card Styling
Tasks inherit column colors:- Border: Matching column color (30% opacity)
- Background: Matching column color (20% opacity)
- Text: Primary theme color
- Delete Button: Appears on hover
Scrolling Behavior
Vertical Scrolling
Each column scrolls independently:- When cards exceed column height
- Custom scrollbar styling
- Smooth scrolling
Horizontal Scrolling
The board scrolls horizontally:- When columns exceed widget width
- Minimum 320px width maintained
- Custom scrollbar styling
- Touch-friendly scrolling
Common Workflows
Basic To-Do Board
- Create columns: “To Do”, “In Progress”, “Done”
- Add tasks to “To Do”
- Drag tasks through workflow stages
- Archive completed tasks
Agile Sprint Board
- Columns: “Backlog”, “To Do”, “In Progress”, “Review”, “Done”
- Color code by priority or type
- Track sprint progress visually
- Reorder by priority
Project Stages
- Columns represent project phases
- Tasks are deliverables or milestones
- Move tasks as project progresses
- Multiple projects in different columns
Storage
The Kanban board stores:- Columns: Array of column objects
- Column Properties: ID, title, color, cards array
- Card Properties: ID, title
- Order: Preserved exactly as displayed
Performance
Optimized for:- Many Columns: Up to 20+ columns
- Many Cards: Hundreds of cards total
- Smooth Dragging: Optimized React rendering
- Fast Updates: Efficient state management
Troubleshooting
Drag Issues
Mouse:- 10px activation threshold
- Must drag slightly before it activates
- 250ms long-press required
- 5px tolerance for accidental movement
Visual Issues
If colors aren’t showing:- Refresh the page
- Check that a color was selected
- Try recreating the column
Keyboard Shortcuts
- Enter: Submit new task
- Escape: (Within form) Clear input
Integration Possibilities
While not currently integrated, the Kanban board structure could support:- Import from Trello, Asana, or Linear
- Sync with project management tools
- Export to other formats
- Collaboration features
Widget Sizes
- Desktop: 2 columns × 2 rows
- Tablet: 2 columns × 2 rows
- Mobile: 1 column × 2 rows
The larger size (2×2) gives the Kanban board room to display multiple columns side-by-side. On mobile, the horizontal scroll ensures all columns remain accessible.