Tasks and kanban
The same work in two shapes: a list you filter and a board you move. Both read one task model.
⚠️ Pro edition
These screens are in the Pro download. The free edition ships the design system and the demo, not the application screens.
The screens
2 screens, at these routes in your download. Open them beside this page.
| Route | Screen | What it is for |
|---|---|---|
| /task-list | Task list | Tasks as a table: assignee, due date, priority, status and row actions. |
| /task-kanban | Kanban | The same tasks as columns by status, with cards that carry their own detail. |
What you get
- One task shape behind both screens, so a field added to the list appears on the card.
- Column counts, empty columns and an overflow state on a busy board.
- Priority and status as tokens rather than palette colours, so they follow your theme.
What you connect
These are interfaces, not an application.They render, they hold their own state, and they talk to nothing. Everything below is your application's, and none of it is supplied.
- Persistence. Moving a card changes component state and nothing else.
- Drag and drop, if you need it. Verify the interaction against your own accessibility requirement before relying on it, and keep the keyboard path.
- Assignment and notification. Choosing an assignee sets a field. Nobody is told.
- Your own status model. The columns are demo statuses, not a workflow engine.
Built from
Nothing here is a one-off. Each screen composes the same families documented in the reference, so changing a token moves them with the rest of the product.
card, badge, avatar, data-table, dropdown-menu.
Next
A customer screen, end to end builds one of these from an empty route, and Theming is how you make them look like yours.