Kanban

Installation

npx @ajax-ui/cli add kanban

Data model

• KanbanColumn - { id, title, color?, cards, readOnly? }. color paints the header dot; readOnly hides the composer.
• KanbanCard - { id, title, description?, labels?, priority?, start?, end?, assignee?, tasks? }. priority: "low" | "medium" | "high" | "urgent"; start/end use the datetime-local format (YYYY-MM-DDTHH:mm); the assignee chip shows initials.
• KanbanTask - { id, text, done }; the card face shows checklist progress (e.g. 1/3).

Props

• columns + onColumnsChange for controlled boards; defaultColumns for uncontrolled. Every mutation (create, move, edit) flows through onColumnsChange either way.
• onCardCreate(card, columnId) - after the composer adds a card.
• onCardMove(cardId, fromColumnId, toColumnId, index) - after a drop.
• onCardUpdate(card, columnId) - after saving the detail modal.
• onCardOpen(card, columnId) - when a card's modal opens.

Interactions

• Create: "+ Adicionar card" opens the full dialog - title, status (column), priority, start/end date-times, assignee, subcategories as a TagInput (Enter or comma adds a chip), description, and a task checklist (Enter adds a task).
• Open/edit: click a card (or Enter/Space when focused) - the same dialog, pre-filled; changing the status moves the card to that column on save. The modal reuses the package's Modal, with focus trap and scroll lock.
• Move: HTML5 drag & drop; dropping on a card inserts before it, dropping on a column appends. The target column highlights while dragging.

Composition

The dialog is built entirely from Ajax UI's own form components - Input, NativeSelect, TagInput, DatePicker showTime (start/end), Checkbox, Textarea, Label, Button, and Modal - so theming, focus rings, sizes, and accessibility behave exactly like the rest of your app. The dialog uses closeOnBackdrop=false: the DatePicker popover portals outside the modal content, and a form with unsaved state shouldn't dismiss on stray clicks.

Scope

The board is a UI component: persistence, permissions, and real-time sync belong to your data layer - feed it columns and react to the callbacks. Touch drag on mobile browsers requires a pointer-events polyfill or long-press strategy; wire your own if that audience matters to you.