Welcome! Type "help" for available commands.

Kanban Board | React Aria | William Callahan - Bookmarks

~/bookmarks

/**/

Kanban Board | React Aria

react-aria.adobe.comSaved January 16, 20263 min

UI Component Example

Summary

This React Aria example demonstrates a highly accessible Kanban board implementation featuring drag-and-drop functionality. It utilizes specialized hooks like useDragAndDrop and useListData to manage item movement and state across different status columns.

Highlights

Implements accessible drag-and-drop using React Aria's specialized hooks.
Uses useListData for efficient state management of board items and status updates.
Features custom drop indicators and specific drop operations to ensure items are moved rather than copied.
Styled with Tailwind CSS, including support for dark mode and visual drop feedback.

auto-generated

via React Aria

Context

Audience

Frontend Developers and React Engineers

DomainFrontend Development

FormatCode Example

AccessFree online

Topics

Accessible UI Drag And Drop React Aria Tailwind CSS Kanban Board

Visit Site All Bookmarks

React AriaTailwind CSSDrag and Drop APIReact Hooks

~/bookmarks

Kanban Board | React Aria

Summary

Highlights

Context

Topics

Related

Kanban Board | React Aria

Summary

Highlights

Context

Topics

Related

~/bookmarks

Kanban Board | React Aria

Summary

Highlights

Context

Topics

Related

Discover Similar Content

nelsonPires5/herdr-board: Kanban board for herdr — cards are prompts dispatched to AI agents in visible panes

GitHub - ioniks/MarkdownTaskManager: Local-first Kanban task manager

VS Code Agent Kanban - Visual Studio Marketplace

Discover Similar Content

Kanban Board | React Aria

Summary

Highlights

Context

Topics

Related

Discover Similar Content

nelsonPires5/herdr-board: Kanban board for herdr — cards are prompts dispatched to AI agents in visible panes

GitHub - ioniks/MarkdownTaskManager: Local-first Kanban task manager

VS Code Agent Kanban - Visual Studio Marketplace