Introducing Kanban primitives

Build interactive Kanban boards with Saas UI Pro

Eelco Wiersma / 10/06/2023
2 min read

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.

What's next#

Was this helpful?