reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
KanbanBoard
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

KanbanBoard

Shell

Move cards between Kanban columns using HTML5 drag and drop.

dataworkflow
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { KanbanBoard } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

To Do

2

Setup CI

Alice

Write tests

Bob

In Progress

1

Build UI

Charlie

Done

0

KanbanBoard

PropTypeDefaultDescription
columnsRequiredKanbanColumn<T>[]—컬럼 목록 (각 컬럼에 items 배열)
onDragEndRequired(itemId: string, fromColumnId: string, toColumnId: string, toIndex: number) => void—드래그 완료 콜백
renderCardRequired(item: T) => ReactNode—카드 렌더링 함수
keyExtractorRequired(item: T) => string—항목 키 추출기
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▼ USES (1)KanbanBoardscroll-area
View test results

테스트 커버리지

2026년 7월 9일1/1 통과
1성공
0실패
1전체
  • 컬럼과 카드를 렌더링한다

Related components

opt-ui

DomainTable

Shells

Manage domain rows in a Composite grid with keyboard navigation.

opt-ui

DataTable

Shells

Display generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.

opt-ui

QueryResultsTable

Shells

Explore windowed query results with typed headers, local sorting, resizable columns, row details, and explicit null, boolean, and object values.

opt-ui

WidgetGrid

Shells

Arrange draggable and resizable dashboard widgets with react-grid-layout.

opt-ui

TreeTable

Shells

Explore hierarchical rows with recursive rendering and expand and collapse controls.

opt-ui

InlineEditTable

Shells

Edit cells with a double click, confirm with Enter, and cancel with Escape.

PreviousInlineEditTableNextRichTextEditor