Free and open-source React kanban board components with drag and drop between columns, keyboard moves and collapsible columns. Built with React Aria and styled with Tailwind CSS.
Backlog
2 cardsGlobal search
Search across projects, files and people from the command menu.
CSV export for reports
To do
2 cardsRedesign onboarding
Cut the setup flow from five steps to three.
Annual billing toggle
In progress
1 cardsSAML single sign-on
Okta and Azure AD first, generic SAML after.
Done
1 cardsDark mode
Installation
npx properui@latest add kanbanCustom cards
Pass renderCard to replace the default card content. The card shell, its drag handle and the drop indicators stay the same.
Applied
2 cardsOlivia Rhye
Product designer
Applied 2 days ago
Phoenix Baker
Frontend engineer
Applied 3 days ago
Phone screen
1 cardsLana Steiner
Product designer
Applied 1 week ago
Interview
1 cardsDemi Wilkinson
Engineering manager
Applied 2 weeks ago
Offer
0 cardsCollapsible columns
Return your own Kanban.Column from the board's render function to add isCollapsible, onAddCard or an icon. The second argument of onChange describes the move.
To do
2 cardsWrite release notes
Fix flaky upload test
Doing
1 cardsAudit color contrast
Review
1 cardsPagination edge cases
Archived
2 cardsDrag a card, or focus one and press Enter on its handle to move it with the keyboard.
Usage notes
Kanban.Board is controlled by columns and onChange, or uncontrolled with defaultColumns. Each column is a React
Aria GridList with drag and drop hooks, so cards can be dragged with a pointer, and moved with the keyboard: focus a
card, press the right arrow to reach its drag handle, press Enter to pick it up, use the arrow keys to choose a slot and
Tab to jump to another column, then press Enter to drop or Escape to cancel. Screen readers announce every step.