Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kanban blocks

Pro

Personal Tasks Kanban Block for React

A four-column personal board (Today, Soon, Someday, Done) where each task shows the energy it needs as bars and a word, and Today holds three tasks and refuses a fourth in words.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Decide what today can really hold with this personal task board for React with Base UI. A hairline frame with a plus mark on each corner holds four columns, Today, Soon, Someday and Done, and twelve tasks. Each card shows its note and the energy it asks for as three small bars and a word, Low, Medium or High energy, and the sentence under the heading adds up what Today asks for. Today holds three: a fourth task is refused in words, naming the cap and what to do, whether it is dragged, carried with the keyboard or chosen from the Dropdown Menu, and the Today head shows three dots that fill as the slots are used. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the menu with "Move to". A polite status line reports each change, refusals included, and Reset restores the board. On a phone the columns scroll sideways in one named region. For personal planners, day plans and any list with a daily limit.

FAQ

How do I fill it with my own tasks?

Edit COLUMNS, TODAY_CAP and START. A task has an id, the column it starts in, a title, a one-line note and an energy of Low, Medium or High. Counts, dots and the header sentence are calculated from the cards.

How does the three-task cap work, and how do I change it?

refusalOf counts the cards in Today other than the one being moved and returns a reason when there are already TODAY_CAP. The drop, the keyboard steps and the menu all ask it, so no route gets around it, and reordering inside Today is never refused. Set TODAY_CAP to change the limit, or make the rule depend on the energy of the cards.

Why are the energy bars not a colour?

The level is shown by three bars of rising height filled to the task's level and by the word, so it reads without colour and in a screen reader as "Medium energy". The bars are drawn from the foreground colour and follow the theme.

How do I move a card without a mouse?

Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column and swap in right-to-left languages, up and down change its place), Space drops it and Escape puts it back. Each step is announced in the status line.

Why is there a menu as well as the grip?

Dragging needs a held pointer and a path, which not everyone has, so each card has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card and says so in the status line.

What stays in the demo?

Everything: tasks and moves live in the component's state, nothing is saved, synced or scheduled, and a reload or Reset restores the starting board. To keep them, post to your API from put, the one function every finished move goes through. The tasks are made up.

All 100 kanban blocks