Skip to content

fast-kanban is a TypeScript library for creating Kanban boards without struggling with the complex logic behind the UI (e.g. drag-and-drop).

Notifications You must be signed in to change notification settings

sp-yduck/fast-kanban

Repository files navigation

Fast Kanban

fast-kanban is a TypeScript library for creating Kanban boards without struggling with the complex logic behind the UI (e.g. drag-and-drop).

Features

  • 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.

Installation

npm install fast-kanban

Examples

Demo site

https://sp-yduck.github.io/fast-kanban/

Sample codes

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>
  );
}

About

fast-kanban is a TypeScript library for creating Kanban boards without struggling with the complex logic behind the UI (e.g. drag-and-drop).

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published