Kanban

A Kanban is a type of project management tool that helps teams visualize work, limit work-in-progress, and maximize efficiency. The Kanban component from pol-ui comes with a set of props that allows you to customize the component to fit your needs.

import { Kanban } from "pol-ui";

Default Kanban

Kanban

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Props

The Kanban component has the following props:

Prop nameTypeDefaultDescription
dragablebooleantrueIf the cards can be dragged or not
columnsstring[]The columns of the kanban
cardsKanbanCardProps[]The cards of the kanban
setCards(value: KanbanCardProps[]) => voidThe function to set the cards of the kanban
deleteButton(dragging: boolean) => React.ReactNodeThe function to render the delete button
deletePositionY'top' | 'bottom'The position of the delete button in the Y axis
deletePositionX'left' | 'right' | 'center'The position of the delete button in the X axis
deleteDelaynumber300The delay to delete the card
onReorder({ cards, cardId, before, newColumn, isSameColumn }: OnReorder) => voidThe function to reorder the cards
onCreate({ column, title }: { column: string; title: string }) => voidThe function to create a new card
onDelete(cardId: KanbanCardProps['id']) => voidThe function to delete a card
classNamestringThe class name of the kanban
columnClassNamestringThe class name of the columns
columnsClassNamestringThe class name of the columns container
indicatorClassNamestringThe class name of the indicator
titleClassesstring[]The class names of the titles
labels{ add?: string; cancel?: string; placeholder?: string }The labels of the kanban
themeKanbanThemeThe theme of the kanban

Examples

Delete on top

Delete on top

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      deletePositionY="top"
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Delete on left

Delete on left

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      deletePositionX="left"
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Delete on right

Delete on right

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      deletePositionX="right"
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Instant delete delay

Instant delete delay

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      setCards={setCards}
      columns={columns}
      deleteDelay={0}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Long delay to delete

Custom labels

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      setCards={setCards}
      columns={columns}
      deleteDelay={2000}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Custom labels

Custom labels

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      labels={{
        add: "Afegir",
        cancel: "Cancelar",
        placeholder: "Afegir nova tasca...",
      }}
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Deleteable disabled

Deleteable disabled

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
 
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      setCards={setCards}
      columns={columns}
    />
  );
};
export default KanbanComponent;

Dragable Disabled

Dragable Disabled

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      setCards={setCards}
      dragable={false}
      columns={columns}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Event On Reorder

Event On Reorder

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
    onReorder={({ cardId, before, newColumn, isSameColumn }) => {
      toast({
        title: 'Card moved in same column',
        description: 'Card ',cardId, 'moved before '+before+', new column: '+newColumn}+', isSameColumn: '+isSameColumn,
      })
    }}
    onCreate={handleCreate}
    cards={cards}
    setCards={setCards}
    columns={columns}
    onDelete={handleDelete}
  />
  );
};
export default KanbanComponent;

Without create

Without create

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      cards={cards}
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
    />
  );
};
export default KanbanComponent;

Custom Title Classes

Custom Title Classes

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
 
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  const classes = [
    "text-primary-800",
    "text-warning-800",
    "text-info-800",
    "text-success-800",
  ];
  return (
    <Kanban
      onCreate={handleCreate}
      cards={cards}
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
      titleClasses={classes}
    />
  );
};
export default KanbanComponent;

Custom Delete Button

Custom Delete Button

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
 
  const content = (active: boolean) => (
    <div
      className={twMerge(
        "w-48 h-36 flex justify-center items-center text-center",
        active ? "bg-red-500" : "bg-blue-500"
      )}
    >
      I am a custom delete buton.
    </div>
  );
 
  return (
    <Kanban
      cards={cards}
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
      deleteButton={content}
    />
  );
};
export default KanbanComponent;

Custom classname

Custom classname

import { KanbanCardProps, Kanban } from "pol-ui";
import React from "react";
const DEFAULT_CARDS: KanbanCardProps[] = [
  { title: "Welcome to the kanban", id: "1", column: "backlog" },
  { title: "You can create new cards", id: "2", column: "backlog" },
  { title: "And delete them", id: "3", column: "backlog" },
  { title: "You can also drag them", id: "4", column: "backlog" },
  {
    title: "Is not this cool?",
    id: "5",
    column: "todo",
  },
  {
    title: "I have an action!!!",
    id: "6",
    column: "todo",
    onClick: () => alert("I have been clicked"),
  },
  {
    title:
      "I am a card with a long long long long long long long long long long long long title",
    id: "7",
    column: "todo",
  },
  {
    title: "Here is another card",
    id: "8",
    column: "doing",
  },
  { title: "🦆 quack!", id: "9", column: "doing" },
  {
    title: "Quite a complete component, right?",
    id: "10",
    column: "done",
  },
];
const KanbanComponent = () => {
  const [cards, setCards] = React.useState(DEFAULT_CARDS);
  const handleCreate = ({
    column,
    title,
  }: {
    column: string,
    title: string,
  }) => {
    setCards([...cards, { title, id: `${Math.random()}`, column }]);
  };
  const handleDelete = (id: string) => {
    setCards(cards.filter((card) => card.id !== id));
  };
  const columns = [...new Set(DEFAULT_CARDS.map((card) => card.column))];
  return (
    <Kanban
      cards={cards}
      setCards={setCards}
      columns={columns}
      onDelete={handleDelete}
      className="flex flex-col"
      columnClassName="bg-red-400"
      columnsClassName="flex gap-10 bg-red-200 p-3 rounded-xl"
      indicatorClassName="bg-orange-700"
    />
  );
};
export default KanbanComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface KanbanTheme {
  root: {
    base: string;
  };
  column: {
    base: string;
    header: string;
    title: string;
    length: string;
    column: string;
    active: string;
  };
  indicator: {
    base: string;
  };
  add: {
    form: string;
    textarea: string;
    buttonGroup: string;
  };
  card: {
    base: string;
    dragable: string;
  };
}
Next up: Kbd

Since February 21, 2024

Proudly Open Source

  • Npm

  • Github

  • Creator

    • Made with love and Pol-ui by Pol Gubau Amores