Koala UI

Tasks

A project's work, ready to drop in: a board scoped by tabs and sorted from one toolbar, or a sprint kanban with work-in-progress limits. Cards carry assignees, due dates and priorities, and drag between columns by pointer, touch or keyboard.

Variant 1

Pro

Variant 2

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. The kanban trades the tabs for a row of avatar toggles that filter by person, sets each lane as a tinted frame with its cards 8px inside it, and adds a task from an Input at the foot of a lane.

Responsive#

Each preview renders inside an iframe, so the screen's breakpoints respond to the frame width. The board's columns keep a fixed width; the kanban's lanes share out the room down to 256px each. Past that either one 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#

On Pointer Events and a little state, no dependency, and not the browser's native drag and drop (which never fires on touch and drags a translucent snapshot). The real card lifts and follows the pointer: on the board a line marks where it will land, on the kanban the cards around that spot step aside. Release and it slides into place. A finger lifts a card with a long press, so a swipe still scrolls; from the keyboard, Space lifts the focused card, the arrows move it and Space drops it, each step announced to screen readers. Swap the state for your own mutation to persist the move.