Data Display

Kanban

A board of columns you drag cards between.

import { Kanban } from 'omaris'

Examples

Basic

Drag a card with a mouse, a finger or the keyboard: Space picks it up, the arrows move it, Space drops it and Escape puts it back. The card you lift stays dimmed in place, a gap opens where it would land, and the ghost flies into it on release — columns is only rewritten once it has landed, so a cancelled drag costs nothing.

To do

Rewrite the onboarding email

Dara

Audit contrast in dark mode

Hana

In progress

1 / 2

Keyboard drag for the board

Mira

Done

Carousel caption fade

Ali

Move a card to see the onmove payload.

1<script lang="ts">2	import { Kanban, Text, type KanbanColumn, type KanbanMove } from 'omaris';34	type Task = { id: string; title: string; owner: string };56	let columns = $state<KanbanColumn<Task>[]>([7		{8			id: 'todo',9			title: 'To do',10			items: [11				{ id: 't1', title: 'Rewrite the onboarding email', owner: 'Dara' },12				{ id: 't2', title: 'Audit contrast in dark mode', owner: 'Hana' }13			]14		},15		{16			id: 'doing',17			title: 'In progress',18			tone: 'info',19			limit: 2,20			items: [{ id: 't3', title: 'Keyboard drag for the board', owner: 'Mira' }]21		},22		{23			id: 'done',24			title: 'Done',25			tone: 'success',26			items: [{ id: 't4', title: 'Carousel caption fade', owner: 'Ali' }]27		}28	]);2930	let last = $state<string | null>(null);31</script>3233<div class="flex w-full flex-col gap-2">34	<Kanban35		bind:columns36		label={(task) => task.title}37		height="18rem"38		onmove={(move: KanbanMove<Task>) =>39			(last = `${move.item.title}: ${move.from} → ${move.to} @ ${move.toIndex + 1}`)}40	>41		{#snippet card(task: Task)}42			<div class="flex flex-col gap-1">43				<Text variant="body-md">{task.title}</Text>44				<Text variant="label-sm" tone="muted">{task.owner}</Text>45			</div>46		{/snippet}47	</Kanban>4849	<Text variant="label-sm" tone="muted" data-kanban-readout>50		{last ?? 'Move a card to see the onmove payload.'}51	</Text>52</div>

Limits and adding

A column's limit turns its count amber once it is over and refuses cards from other columns while it is at it; locked refuses every drop and says so in its header. addable puts an "add a card" row under each stack — onadd decides what that means.

Triage

Select clears on blur

Tooltip flips at the edge

Sheet snap points jump

In progress

2 / 1

Kanban overlap packing

Gauge tick alignment

Shipped

Docs demos

1<script lang="ts">2	import { Kanban, Text, type KanbanColumn } from 'omaris';34	type Ticket = { id: string; title: string; points: number };56	let next = 100;78	let columns = $state<KanbanColumn<Ticket>[]>([9		{10			id: 'triage',11			title: 'Triage',12			items: [13				{ id: 'k1', title: 'Select clears on blur', points: 2 },14				{ id: 'k2', title: 'Tooltip flips at the edge', points: 1 },15				{ id: 'k3', title: 'Sheet snap points jump', points: 3 }16			]17		},18		{19			id: 'wip',20			title: 'In progress',21			limit: 1,22			items: [23				{ id: 'k4', title: 'Kanban overlap packing', points: 5 },24				{ id: 'k5', title: 'Gauge tick alignment', points: 2 }25			]26		},27		{28			id: 'shipped',29			title: 'Shipped',30			locked: true,31			items: [{ id: 'k6', title: 'Docs demos', points: 8 }]32		}33	]);3435	function add(columnId: string) {36		columns = columns.map((column) =>37			column.id === columnId38				? {39						...column,40						items: [...column.items, { id: `k${next++}`, title: 'New ticket', points: 1 }]41					}42				: column43		);44	}45</script>4647<Kanban48	bind:columns49	density="compact"50	columnWidth={220}51	height="18rem"52	addable53	addLabel="Add a ticket"54	onadd={add}55	emptyText="Empty — drop something here"56	class="w-full"57>58	{#snippet card(ticket: Ticket)}59		<div class="flex items-start justify-between gap-2">60			<Text variant="body-sm">{ticket.title}</Text>61			<Text variant="label-sm" tone="muted">{ticket.points}</Text>62		</div>63	{/snippet}64</Kanban>

Rich cards

A card is whatever the card snippet draws — here a Badge per label, an Avatar for the assignee, a due-date Chip and a priority dot. Each column gets a tone for its header dot, and columnActions puts a Menu at the end of the header.

Backlog

bug

Select clears its value on blur

Fri

buga11y

Tooltip flips at the viewport edge

Mon

In progress

1 / 2

feature

Kanban overlap packing

Thu

In review

polish

Gauge tick alignment

Today

1<script lang="ts">2	import {3		Avatar,4		Badge,5		Chip,6		IconButton,7		Kanban,8		Menu,9		MenuItem,10		Text,11		type KanbanColumn12	} from 'omaris';1314	type Priority = 'low' | 'medium' | 'high';15	type Issue = {16		id: string;17		title: string;18		assignee: string;19		labels: string[];20		due: string;21		priority: Priority;22	};2324	const PRIORITY: Record<Priority, string> = {25		low: 'bg-success',26		medium: 'bg-warning',27		high: 'bg-destructive'28	};2930	let columns = $state<KanbanColumn<Issue>[]>([31		{32			id: 'backlog',33			title: 'Backlog',34			tone: 'secondary',35			items: [36				{37					id: 'i1',38					title: 'Select clears its value on blur',39					assignee: 'Dara Aziz',40					labels: ['bug'],41					due: 'Fri',42					priority: 'high'43				},44				{45					id: 'i2',46					title: 'Tooltip flips at the viewport edge',47					assignee: 'Hana Karim',48					labels: ['bug', 'a11y'],49					due: 'Mon',50					priority: 'medium'51				}52			]53		},54		{55			id: 'doing',56			title: 'In progress',57			tone: 'info',58			limit: 2,59			items: [60				{61					id: 'i3',62					title: 'Kanban overlap packing',63					assignee: 'Mira Salih',64					labels: ['feature'],65					due: 'Thu',66					priority: 'low'67				}68			]69		},70		{71			id: 'review',72			title: 'In review',73			tone: 'tertiary',74			items: [75				{76					id: 'i4',77					title: 'Gauge tick alignment',78					assignee: 'Ali Hadi',79					labels: ['polish'],80					due: 'Today',81					priority: 'medium'82				}83			]84		}85	]);8687	function clear(columnId: string) {88		columns = columns.map((column) => (column.id === columnId ? { ...column, items: [] } : column));89	}90</script>9192<Kanban bind:columns height="20rem" columnWidth={256} class="w-full">93	{#snippet columnActions(column: KanbanColumn<Issue>)}94		<Menu label="{column.title} actions" align="end">95			{#snippet trigger(props)}96				<IconButton size="xs" aria-label="{column.title} actions" {...props}>97					<svg viewBox="0 0 24 24" fill="currentColor">98						<circle cx="12" cy="5" r="1.6" />99						<circle cx="12" cy="12" r="1.6" />100						<circle cx="12" cy="19" r="1.6" />101					</svg>102				</IconButton>103			{/snippet}104			<MenuItem>Rename</MenuItem>105			<MenuItem>Set a limit</MenuItem>106			<MenuItem tone="destructive" onclick={() => clear(column.id)}>Clear column</MenuItem>107		</Menu>108	{/snippet}109110	{#snippet card(issue: Issue)}111		<div class="flex flex-col gap-2">112			<div class="flex flex-wrap gap-1">113				{#each issue.labels as label (label)}114					<Badge115						size="sm"116						variant="tonal"117						tone={label === 'bug' ? 'destructive' : label === 'a11y' ? 'info' : 'secondary'}118					>119						{label}120					</Badge>121				{/each}122			</div>123			<Text variant="body-md">{issue.title}</Text>124			<div class="flex items-center gap-2">125				<span126					class="size-2 shrink-0 rounded-full {PRIORITY[issue.priority]}"127					role="img"128					aria-label="{issue.priority} priority"129				></span>130				<Chip size="sm" class="pointer-events-none">{issue.due}</Chip>131				<Avatar size="xs" name={issue.assignee} colorize class="ms-auto" />132			</div>133		</div>134	{/snippet}135</Kanban>

Overridden

The overridden case. header replaces a column's whole header row, key names the identity that keeps a card the same element while it slides, the card snippet is told whether it is the ghost being dragged, and height is a property rather than a class — so height="auto" plus an h-* on classes.root really replaces it.

New

$4,200

Karwan Foods

$4,200

In conversation

$11,400

Zagros Cafe

$1,800

Tigris Grill

$9,600

Won

$3,100

Sulay Bakery

$3,100

1<script lang="ts">2	import { Kanban, Text, latn, type KanbanCardContext, type KanbanColumn } from 'omaris';34	type Lead = { id: string; company: string; value: number };56	const TINT: Record<string, string> = {7		new: 'bg-primary',8		talking: 'bg-warning',9		won: 'bg-success'10	};1112	let columns = $state<KanbanColumn<Lead>[]>([13		{ id: 'new', title: 'New', items: [{ id: 'l1', company: 'Karwan Foods', value: 4200 }] },14		{15			id: 'talking',16			title: 'In conversation',17			items: [18				{ id: 'l2', company: 'Zagros Cafe', value: 1800 },19				{ id: 'l3', company: 'Tigris Grill', value: 9600 }20			]21		},22		{ id: 'won', title: 'Won', items: [{ id: 'l4', company: 'Sulay Bakery', value: 3100 }] }23	]);24</script>2526<Kanban27	bind:columns28	key={(lead) => lead.id}29	height="auto"30	columnWidth="14rem"31	classes={{32		root: 'h-64 rounded-shape-lg bg-surface-container-low p-2',33		column: 'rounded-shape-md bg-surface-container-lowest',34		card: 'rounded-shape-md shadow-1'35	}}36	class="w-full"37>38	{#snippet header(column: KanbanColumn<Lead>)}39		<div class="flex items-center gap-2 px-3 py-2">40			<span class="size-2 rounded-full {TINT[column.id]}" aria-hidden="true"></span>41			<Text variant="title-sm">{column.title}</Text>42			<Text variant="label-sm" tone="muted" class="ms-auto">43				${column.items.reduce((sum, lead) => sum + lead.value, 0).toLocaleString(undefined, latn())}44			</Text>45		</div>46	{/snippet}4748	{#snippet card(lead: Lead, ctx: KanbanCardContext<Lead>)}49		<div class="flex flex-col gap-1">50			<Text variant="body-md">{lead.company}</Text>51			<Text variant="label-sm" tone={ctx.dragging ? 'primary' : 'muted'}>52				${lead.value.toLocaleString(undefined, latn())}53			</Text>54		</div>55	{/snippet}56</Kanban>

When to use it

Use it for

Work that moves through stages by hand: tickets, leads, applications. One column per stage, bind:columns, and onmove to save where a card went.
Stages with rules. limit turns a column's count amber past its cap and refuses cards from elsewhere while over it. locked refuses every drop and shows a padlock, for a "Done" that is closed.
Cards built from the library's own pieces: a Badge per label, an Avatar for the assignee, a due-date Chip, a tone per column, and a Menu at the end of each header through columnActions.
A board used from a phone and a keyboard. A finger holds, then drags. Space picks a card up, arrows move it, Escape puts it back, and a live region reads every step out.

Not for

Rows people sort, filter and page → Table. A board moves a few dozen things; it does not read a thousand.
Items with a status word and no stages to move between → List with a Badge.
A grid where the columns mean nothing → a Card grid or Masonry.

Do

Give key when items have no id. Identity keeps a card the same element while it slides and is what the keyboard drag holds on to.
Save in onmove, not in an effect on columns. The array is rewritten once, on release, so a cancelled drag never reaches the server.
Pass label so a keyboard drag announces "Fix login bug" rather than "card".
Set height from the prop. It is a property, so height="auto" plus an h-* on classes.root replaces it. Use density="compact" when the columns are long.
Handle onadd when addable is on. The row only asks; it does not create.

Don't

Use native drag and drop or a draggable attribute inside a card. The board tracks the pointer itself, and a native drag fights it.
Mutate columns from a card's own button while a drag is in flight. Wait for onmove.
Put more than about six columns on a phone. The board scrolls sideways, but dragging toward an off-screen column is dragging toward an edge.

Pairs with Card Badge Avatar Chip Menu

Quick reference

density

comfortable (default)
compact

API

Kanban

A board of columns you drag cards between.

Three decisions shape this one.

Pointer events, not HTML drag-and-drop. The native API cannot be styled, does not fire on touch at all, and hands you a drag image the browser drew. This tracks the pointer directly, so the same code works with a mouse, a finger and a pen. The gesture's listeners live on the window, never on the card — a card the render can remove is no place to keep a pointer — so a release anywhere, on or off the board, always ends the drag.

The list is never mutated mid-drag. What you see while dragging is a preview — the card dimmed in place, or a gap put where it would land — and columns only changes when you let go. So a drag that is cancelled costs nothing, and the data never passes through a state that was not asked for.

It works from the keyboard. Space picks a card up, the arrows move it between positions and columns, Space drops it and Escape puts it back. A board that can only be used with a mouse is not finished.

Cards slide rather than jump: the preview is keyed by the item's identity and animated with FLIP, so every card that has to move to make room is seen moving, and the ghost flies into the gap on release.

import { Kanban } from 'omaris'

<Kanban bind:columns key={(task) => task.id} onmove={save}>  {#snippet card(task)}<Text>{task.title}</Text>{/snippet}</Kanban>

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root: The horizontally scrolling board.
column: One column.
header: No description in the source yet.
dot: The tone dot before the title.
title: No description in the source yet.
count: 4 or 4 / 5 when the column has a limit.
over: The count, when the column is over its limit.
lock: The padlock on a locked column.
list: The scrolling stack of cards.
cell: The keyed wrapper FLIP measures — one per card, or the gap.
card: One card.
placeholder: The gap showing where the card would land.
ghost: The card under the pointer. Fixed to the viewport, never in the flow.
empty: Shown in a column with nothing in it.
add: "Add a card", under the stack.
status: Live region announcing what a keyboard drag is doing.

Props

columns required bindable

KanbanColumn<T>[]

The board. Bindable — a drop rewrites it.

card required

Snippet<[T, KanbanCardContext<T>]>

How to draw one card.

header

Snippet<[KanbanColumn<T>]>

Replaces a column's whole header row — dot, title, count and columnActions.

columnActions

Snippet<[KanbanColumn<T>]>

Rendered at the end of the default header — a menu, usually.

key

(item: T, index: number) => string | number

Identity, which is what keeps a card the same element while it slides. Defaults to the item's id, then its index.

label

(item: T) => string

Names a card for assistive tech during a keyboard drag.

density

Defaults to 'comfortable'

KanbanDensity

comfortable
compact

columnWidth

Defaults to 272

number | string

Column width. A number is px, a string any CSS length.

height

Defaults to '28rem'

number | string

Board height. A number is px, a string any CSS length — a property rather than a class, so classes.root can replace it.

emptyText

Defaults to 'Nothing here'

string

Shown in an empty column.

addable

Defaults to false

boolean

Show the "add a card" row under each column.

addLabel

Defaults to 'Add a card'

string

disabled

Defaults to false

boolean

onmove

(move: KanbanMove<T>) => void

onadd

(columnId: string) => void

class

string

classes

KanbanClasses