Kanban Board
Kanban / Task Board component with draggable columns and cards for project management apps.
Basic Usage
Backlog
2Research design system usage
Interview 8 designers and audit current UI library.
Research
Outline migration strategy
Define phased rollout and communication plan.
Planning
In Progress
2Implement navigation updates
Refine responsive behavior and micro-interactions.
Frontend
UX
Polish dark theme states
Adjust contrast and state transitions for dark mode.
Design
Review
1Accessibility audit
Validate focus states, contrast, and semantics.
QA
Accessibility
Done
1Launch design tokens v2
Ship core palette and spacing refresh.
Launch
Design
tasks = [
%{
id: "task-1",
name: "Project Planning",
start_date: ~D[2024-01-01],
end_date: ~D[2024-01-05],
progress: 30
}
]
<.gantt id="project-timeline" tasks={@tasks} />
With Custom Date Range
<.gantt
id="project-timeline"
tasks={@tasks}
start_date={~D[2024-01-01]}
end_date={~D[2024-12-31]}
/>
Features
- Draggable tasks to adjust dates
- Resizable task bars
- Dependency lines between tasks
- Progress indicators
- Customizable colors and styling
- Auto-calculated date ranges