Enterprise / COMPONENT

Kanban

Web · implementedDesktop · unavailable

Board dengan kolom dinamis, drag-and-drop, pemindahan via keyboard/mobile, dan batas kartu per kolom.

import { Kanban } from "./vendor/syne-ui/index.js";TypeScript ready

To Do

Review the new visual tokens.

highFina

In Progress

1 / 2

mediumRafi

Review

lowNina

Done

Drop a card here

Drag a card, use its move selector, or focus it and press Alt+←/→.

Try the controls above.

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX

import { Kanban } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <Kanban defaultCards={[{ id: "1", title: "Write docs", status: "todo" }]} onCardMove={(id, status) => console.log(id, status)} />
  );
}

Make it yours

Use className and --syne-* tokens to match your design system.