KQ-1214 · PLANT/CARE

Plant Care

A plant-care widget whose plant shows how thirsty it is: as the days since watering pass, a fern's fronds flatten until their tips hang over the rim, a monstera's stalks bend and its split leaves hang, a cactus thins and lets its arms sag, the green drains toward straw and the soil dries and cracks, all rebuilt each frame from analytic curves. Pressing Water brings a can in over the pot and tips it on the snap spring, a seeded shower falls in real arcs and splashes while a wet patch spreads, and when the last drops land the leaves spring back up centre first on a staggered snap; a pointer brushed through the plant flicks the leaves it crosses, crisply when watered and loosely when thirsty. The Water button is the whole keyboard path, and the next watering day is named from `now`.

KQ-1214 · PLANT/CARE

Sill fern

Watered 5 days ago

1 day overdue

Sill fern · 1 day overdue

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/plant-care

Props

days / defaultDays: number; default 5; Days since the plant was last watered: its thirst, and so its pose, its colour and the soil.
onDaysChange: (days: number) => void; default —; Fires from the Water press with 0.
plant: "fern" | "monstera" | "cactus"; default "fern"; Which plant is drawn: arching fronds, split leaves on stalks, or a column with two arms that flowers when well watered. It also sets the default interval.
pot: "clay" | "stone" | "glaze"; default "clay"; The pot's finish: terracotta, speckled stone, or a deep blue glaze over a bare clay foot.
name: string; default "Fern", "Monstera" or "Cactus"; The plant's name: the widget's title and its accessible name.
interval: number; default 4 / 7 / 10 by plant; Days between waterings. Thirst is days over interval: droop starts at a third of it and is complete at 1.4 times it.
now: number | Date; default —; The current moment. With it the next watering day is named ("Next Sun 11 Oct"); without it, counted ("Next in 3 days").
utcOffset: number; default 0; Minutes east of UTC used to read `now` as a calendar day, so server and client agree.
waterLabel: string; default "Water"; The button's text.
sound: boolean; default false; After a Water press: the pour loop while water leaves the can, and a plip as the first, middle and last drops land, rising as the soil fills. Brushing and host changes are silent.
disabled: boolean; default false; The button is disabled, brushing does nothing, and a watering in progress finishes at once.
className: string; default —; Classes for the root, a container up to max-w-xs.

Prop	Type	Default	Description
days / defaultDays	number	5	Days since the plant was last watered: its thirst, and so its pose, its colour and the soil.
onDaysChange	(days: number) => void	—	Fires from the Water press with 0.
plant	"fern" \| "monstera" \| "cactus"	"fern"	Which plant is drawn: arching fronds, split leaves on stalks, or a column with two arms that flowers when well watered. It also sets the default interval.
pot	"clay" \| "stone" \| "glaze"	"clay"	The pot's finish: terracotta, speckled stone, or a deep blue glaze over a bare clay foot.
name	string	"Fern", "Monstera" or "Cactus"	The plant's name: the widget's title and its accessible name.
interval	number	4 / 7 / 10 by plant	Days between waterings. Thirst is days over interval: droop starts at a third of it and is complete at 1.4 times it.
now	number \| Date	—	The current moment. With it the next watering day is named ("Next Sun 11 Oct"); without it, counted ("Next in 3 days").
utcOffset	number	0	Minutes east of UTC used to read `now` as a calendar day, so server and client agree.
waterLabel	string	"Water"	The button's text.
sound	boolean	false	After a Water press: the pour loop while water leaves the can, and a plip as the first, middle and last drops land, rising as the soil fills. Brushing and host changes are silent.
disabled	boolean	false	The button is disabled, brushing does nothing, and a watering in progress finishes at once.
className	string	—	Classes for the root, a container up to max-w-xs.