Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chore Organizer Kanban Block for Svelte

A household board with an Open lane and one lane for each of three housemates, where a fairness line counts the chores each person holds and says how many to hand over to even them out.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Share the housework fairly with this chore organizer for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four lanes, Open and one for each of three housemates, and twelve chores, each with its room in an outline Badge and its time. A fairness line above the board counts the chores each housemate holds and says it in words: "3 chores each" when they match, "as even as it gets" when they differ by one, and otherwise who has the most and the fewest and how many to hand over, with a small row of counts beside it. Giving a chore to a lane, taking it back to Open or handing it to another housemate is a move, and the fairness line, the sentence under the heading and the status line update on every one. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to". Reset restores the chores. On a phone the columns scroll sideways in one named region. For shared homes, rotas and any work split between people.

FAQ

How do I fill it with my own household?

Edit COLUMNS, PEOPLE and START. PEOPLE lists the ids of the lanes that belong to a person; Open stays out of it. A chore has an id, the column it starts in, a title, a room and its minutes.

How is the fairness line worked out?

fairnessOf counts the cards in each person's lane, then compares the largest and the smallest count: equal gives "N chores each", a gap of one is "as even as it gets", and a bigger gap names both people and says how many chores to hand over. It counts chores, not minutes; use minutes in countsOf to weigh them instead.

Does an open chore count against anyone?

No. Only the three person lanes are counted, and the sentence under the heading says how many chores are still open. Moving a chore out of a person's lane to Open lowers their count at once.

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: the lanes live in the component's state, nothing is saved and nobody is notified, and a reload or Reset restores the starting split. To keep it, post to your API from put. The chores and housemates are made up.