Koala UI

Tasks

A project's work as a board, ready to drop in. Four columns of task cards with assignees, due dates and priorities, scoped by tabs, searched and sorted from one toolbar, and moved between columns by dragging.

Variant 1

Pro

Built from#

The shell is the docked Layout the dashboards use, the same Sidebar and a sticky LayoutHeader holding the project's Breadcrumb. The page opens on a PageHeader with an AvatarGroup of the team, then Tabs with count badges, a search field with a Kbd hint, Filter and Sort as DropdownMenu checkbox and radio menus, and a ToggleGroup for Board and List. Each task is a Card with its category and priority as Badges, the columns scroll inside a horizontal ScrollArea, and the List view is the same tasks in a Table.

Responsive#

Each preview renders inside an iframe, so the screen's breakpoints respond to the frame width. The columns keep a fixed width at every size and the board scrolls sideways inside its own area, never the page: a phone shows one column and the edge of the next. Below lg the rail moves into the drawer behind the mobile bar, the page actions stack under the title, and the toolbar wraps under a full-width search.

FAQ#

With the browser's native drag and drop and a little state, no dependency: a card dropped on a column moves to the end of it and the counts update. Swap the state for your own mutation to persist the move. Moving by keyboard is not built in; cards are links, so a keyboard user opens the task and changes its status there.