KQ-1215 · BIN/DAY

Bin Day

A collection-day widget: two to four wheelie bins stand in a row by the house and the one due this collection has been rolled to the kerb, with its name, when it goes out and the bin after it in the header. A bin that moves tips back onto its wheels on the flick spring, rolls on glide taking any release velocity and grows as it comes forward, then drops onto its feet with a rock and a lid thrown open by the jolt, both on recoil; Done rolls it home with a tick and Undo rolls it out with a thud, and the due bin can also be dragged 1:1 between row and kerb while the others refuse. Underneath, the next seven days are a real radio group for the collection day, its pill hopping between days on snap with a crescent on the put-out night; arrows choose, and Home and End jump.

KQ-1215 · BIN/DAY

RecyclingOut tonight

Thu 8 Oct · then Garden

recycling · out tonight · 8 oct

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/bin-day

Props

now: number | Date; default —; The current moment. Today, the seven days on the strip and which bin is due are read from it, so the server and the page render the same.
day / defaultDay: "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun"; default "thu"; The collection weekday. The week strip chooses it.
onDayChange: (day: BinDayWeekday) => void; default —; Fires from the week strip with the chosen weekday.
done / defaultDone: boolean; default false; This collection's bin has been dealt with: it stands back in the row. Uncontrolled, it is kept for that collection's date only, so the next bin rolls out once the date passes.
onDoneChange: (done: boolean) => void; default —; Fires from Done, Undo or a drag that changed it.
bins: number; default 3; How many bins take turns, one per collection, 2 to 4: Rubbish, Recycling, Garden, Food.
colours: "council" | "pastel" | "mono"; default "council"; Strong civic pigments, soft pastels, or greys told apart by the signs on their fronts. Fixed pigments, the same in either theme.
names: string[]; default —; Names for the bins, in rotation order.
offset: number; default 0; Shifts which bin a week starts the rotation on (weeks start on Monday).
utcOffset: number; default 0; Minutes east of UTC used to read `now` as a calendar day.
label: string; default "Bin day"; The widget's accessible name.
sound: boolean; default false; A thud when a bin the visitor sent lands at the kerb, a tick when it arrives back in the row, a lighter tick per day stepped on the strip. Host changes are silent.
disabled: boolean; default false; Done, the strip and the drag do nothing.
className: string; default —; Classes for the root, a container up to max-w-xs.

Prop	Type	Default	Description
now	number \| Date	—	The current moment. Today, the seven days on the strip and which bin is due are read from it, so the server and the page render the same.
day / defaultDay	"mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat" \| "sun"	"thu"	The collection weekday. The week strip chooses it.
onDayChange	(day: BinDayWeekday) => void	—	Fires from the week strip with the chosen weekday.
done / defaultDone	boolean	false	This collection's bin has been dealt with: it stands back in the row. Uncontrolled, it is kept for that collection's date only, so the next bin rolls out once the date passes.
onDoneChange	(done: boolean) => void	—	Fires from Done, Undo or a drag that changed it.
bins	number	3	How many bins take turns, one per collection, 2 to 4: Rubbish, Recycling, Garden, Food.
colours	"council" \| "pastel" \| "mono"	"council"	Strong civic pigments, soft pastels, or greys told apart by the signs on their fronts. Fixed pigments, the same in either theme.
names	string[]	—	Names for the bins, in rotation order.
offset	number	0	Shifts which bin a week starts the rotation on (weeks start on Monday).
utcOffset	number	0	Minutes east of UTC used to read `now` as a calendar day.
label	string	"Bin day"	The widget's accessible name.
sound	boolean	false	A thud when a bin the visitor sent lands at the kerb, a tick when it arrives back in the row, a lighter tick per day stepped on the strip. Host changes are silent.
disabled	boolean	false	Done, the strip and the drag do nothing.
className	string	—	Classes for the root, a container up to max-w-xs.