fast-kanban is a TypeScript library for creating Kanban boards without struggling with the complex logic behind the UI (e.g. drag-and-drop).
- Good abstraction of logic: You will never struggle with drag-and-drop libraries.
- Customizable: fast-kanban allows you to use your own format of Kanban card, Column and Kanban Board.
- Modern UI: Fast Kanban uses shadcn/ui for its base component.
- Accessibility: Fast Kanban uses dnd-kit for its base component, then it inherits some good features of dnd-kit like accessibility.
npm install fast-kanban
https://sp-yduck.github.io/fast-kanban/
You can find all the sample codes here.
// simple example implementation
function App() {
return (
<KanbanProvider>
<DefaultKanban />
</KanbanProvider>
)
}
export function DefaultKanban() {
return (
<Kanban>
<KanbanHeader>
<KanbanTitle>Kanban Board</KanbanTitle>
</KanbanHeader>
<KanbanContent>
<SortableColumnsContainer
columnRenderFunc={renderColumn}
/>
</KanbanContent>
</Kanban>
);
}
function renderColumn(id: UniqueIdentifier, column_id: UniqueIdentifier) {
return (
<Column key={id} id={id}>
<ColumnHandler>
<ColumnHeader>
<ColumnTitle>{id}</ColumnTitle>
</ColumnHeader>
</ColumnHandler>
<ColumnContent>
<KanbanCardsContainer column_id={id} cardRenderFunc={renderKanbanCard} />
</ColumnContent>
</Column>
);
}
function renderKanbanCard(id: UniqueIdentifier) {
return (
<KanbanCard key={id} id={id}>
<KanbanCardHandler>
<KanbanCardHeader>
<KanbanCardTitle>ID: {id}</KanbanCardTitle>
</KanbanCardHeader>
<KanbanCardContent>kanban card content for {id}</KanbanCardContent>
</KanbanCardHandler>
</KanbanCard>
);
}