Introducing Kanban primitives
Build interactive Kanban boards with Saas UI Pro
Posted by
Eelco Wiersma
@eelcodotdev
I'm excited to announce that the Kanban primitives are now available in Saas UI Pro. Kanban boards are an essential tool in any kind of business software. They allow you to visualize processes and optimize workflows, like tasks, issues, or sales pipelines.
Kanban primitives
The Kanban primitives are a set of components that allow you to build interactive Kanban boards with ease. The primitives are unstyled and allow for maximum customization. They are built on top of the Dnd kit library and work really well together with Tanstack React table.
Some of the features of the Kanban primitives are:
- Drag and drop items between columns
- Drag and drop columns
- Drag and drop items within a column
- Customizable drag overlay
- Customizable column headers and cards
- Remove cards from the board with drag and drop
- Show / hide columns
You can see the Kanboard in action on the contacts page of the Saas UI Pro demo.
Live Example
Building something with the Kanban primitives is really easy.
import { Card, CardBody } from '@chakra-ui/react'
import {
Kanban,
KanbanColumn,
KanbanColumnHeader,
KanbanColumnBody,
KanbanColumnHandle,
KanbanCard,
KanbanDragOverlay,
} from '@saas-ui-pro/kanban'
const columnDefs: Record<string, { title: string }> = {
todo: {
title: 'Todo',
},
doing: {
title: 'Doing',
},
done: {
title: 'Done',
},
}
export default function Basic() {
return (
<Kanban defaultItems={kanbanItems}>
{({ columns, items, activeId }) => {
return (
<>
{columns.map((columnId) => (
<KanbanColumn id={columnId} minWidth="200px">
<KanbanColumnHeader>
{columnDefs[columnId]?.title} ({items[columnId]?.length})
</KanbanColumnHeader>
<KanbanColumnBody>
{items[columnId].map((itemId) => {
return (
<KanbanCard id={itemId}>
<Card minHeight="80px" w="full" fontSize="sm">
<CardBody>{itemId}</CardBody>
</Card>
</KanbanCard>
)
})}
</KanbanColumnBody>
</KanbanColumn>
))}
<KanbanDragOverlay>
{activeId ? (
<KanbanCard id={activeId}>
<Card
minHeight="80px"
w="full"
fontSize="sm"
cursor="grabbing"
>
<CardBody>{activeId}</CardBody>
</Card>
</KanbanCard>
) : null}
</KanbanDragOverlay>
</>
)
}}
</Kanban>
)
}We'd love to see what you've built with the Kanban primitives. Feel free to share your creations on X or join us on Discord.