Kanban Board
Drag-and-drop that feels physical: cards tilt with velocity, a gap opens and columns glow. Keyboard works too.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Pointer-based drag (works on touch) with a floating ghost, a live drop position and screen-reader announcements. Keyboard: Space to pick up, arrows to move, Space to drop.
Installation
$ npx shadcn@latest add https://guetix.com/r/kanban-board.json
Uses the shadcn CLI. It creates components/guetix/kanban-board.tsx and installs nothing else.
Usage
example.tsx
import { KanbanBoard } from "@/components/guetix/kanban-board";
export default function Example() {
return <KanbanBoard />;
}
Task appsCRM pipelinesContent calendars
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01The drop index is computed from card midpoints at the pointer, so the gap is always where the card will land.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| initial | KanbanColumn[] | — | Columns and cards. |
| onChange | (cols) => void | — | Called after every move. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Cards are focusable with instructions; moves are announced (aria-live).