shadcn.io is not affiliated with official shadcn/ui
Garden Planner Chat Block for Vue
A garden shop's thread with a plant card filtered by climate zone and a This week pane that puts a drop on each day a chosen plant needs water, worked out from typed watering intervals.
Installation
Overview
Show a gardener helping someone plan a plot, with this garden planner chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Trowelbury, a garden shop: the top bar names the gardener, Yevgenia Strand, with a count of plants in your garden. The log holds her plant card: five plants, each with a drawn sprig, sun and watering in words and a typed planting window, and a zone select from 5 to 8 that filters the list to what grows there. "Add to my garden" puts a plant in the This week pane at the end, a table of Mon 12 to Sun 18 Oct with a drop on each day that plant needs water, worked out from a typed first day and its interval. The composer's Shine Button, the only colored control, sends typed questions to a script after a Typing Indicator Text, and a Toggle Group swaps Chat and This week on a phone. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a garden shop, a plant adviser or any chat whose choices fill a plan.
FAQ
What stays in the page, and how do I make it real?
Everything. The gardener's replies come from a short typed script keyed on words such as "zone" and "water", then one fallback per message and a last line that says it was the last sample reply. The plants, zones and watering gaps are typed in the file, and nothing is sent. To wire it for real, replace PLANTS with your catalogue, save the garden where toggle runs, and append the gardener's messages to the same list as they arrive.
How is the week worked out?
By one pure function, wateredOn: a plant is watered on a day when that day is on or after its typed first day and the number of days since is a multiple of its gap. A tomato every 2 days from Monday gets Monday, Wednesday, Friday and Sunday. The week is fixed at 12 to 18 October and never read from the clock, so the demo looks the same on every visit.
What does the zone select do?
It filters the card to plants whose typed range includes that zone, so Rosemary appears only in zones 7 and 8. Plants you have already added stay in your garden and in the week when you change the zone, so choosing a different zone never silently removes anything.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden name and time. The add buttons are toggles that say "In my garden" when pressed, the week is a real table with a caption, row headers and a hidden full date for each day, a drop always comes with the words "Water on Monday 12 October", and the composer's status line, the one live region, says what changed. The sprigs are hidden because the text says the same.
How does it look on a phone?
The pane would not fit beside the chat, so a Chat and This week toggle sits under the top bar and shows one at a time; adding a plant in Chat updates the week you switch to. The count badge drops out of the top bar, but the toggle shows it. The window keeps its height and only the log and the week scroll.