MenuCaderno UI
npmGitHub
Theme

<cad-kanban> family

Kanban

Organize cards into columns. Drag-and-drop, filtering, and saving are handled by your application.

Weekly reading

Column counts follow the cards.

Read the chapter on cachingSummarize search indexing Compare queue examples Database notes Interview questions

API reference: <cad-kanban>

labellabelstring'Kanban board'labelstringlabelno(default)Direct `cad-kanban-column` children.boardScrollable accessible column list.

API reference: <cad-kanban-column>

countcountnumber0titletitlestring''countnumbercountnotitlestringtitleno(default)Direct `cad-kanban-card` children.titleOptional native heading. Falls back to `title`.columnColumn surface and accessible list item.headerColumn header.titleTitle wrapper.countDerived card count.cardsAccessible card list.

API reference: <cad-kanban-card>

tonetoneCadKanbanCardTone'lemon'toneCadKanbanCardTonetoneyes(default)Card content.cardNote surface and accessible list item.

Moving cards

Drag-and-drop is not built in. If you add it, include keyboard movement, status announcements, saving, and undo.

Try the React / Next.js boardto create tasks, move them between columns, and undo a move. Tasks stay in your browser. It starts empty; example tasks are optional.

MIT licensed. Built with Caderno UI.Report an issue
Back to top