shadcn.io is not affiliated with official shadcn/ui
Garden Planner Calendar Block for Radix UI
A twelve-month planting ruler for eight crops with Sow, Transplant and Harvest bars in three patterns, a first-frost Select that clips the outdoor windows, and a derived list of what you can sow now.
Installation
Overview
Plan an allotment year at a glance with this garden planner calendar for React with Radix UI. A hairline frame with a plus mark on each corner holds a ruler of twelve months, divided into half-months, with eight crops down the side. Each crop has up to three bars in three patterns, so no colour is needed: solid for Sow, hatched for Transplant and dotted for Harvest. A solid line marks the fixed "now", Wednesday 14 October 2026, and a dashed one marks the first frost you choose with the Select: 20 October, 5 November or 20 November. The frost date changes the windows. A frost-tender crop's outdoor transplant and harvest end before it, and a hardy crop that needs time to establish has to be sown early enough. Under the ruler, a legend and a "Can sow now" band list the crops whose sowing window is open today and name the ones the frost has ruled out. Each row also has a plain-text summary of its windows for screen readers. Below the medium breakpoint the ruler scrolls sideways under sticky crop names. It's built from Select, Badge and Guides, with a CSS entrance only. For allotment and garden apps, seasonal planners and any app that shows windows along a year.
FAQ
How do I change the crops and their windows?
Edit CROPS. A window is a { from, to } pair of half-months, where 0 is early January and 23 is late December, so { from: 18, to: 21 } is early October to late November. Each crop lists its sow, transplant and harvest windows, whether it is tender to frost, whether it is sown indoor, and how many half-months it needs to establish before the first frost. The dates are typed for a temperate northern allotment; adjust them for your climate.
What does the first-frost date change?
Three things. A frost-tender crop's outdoor transplant and harvest bars end before the frost. A hardy crop with an establish time has its sowing window cut so it is in the ground early enough. And the "Can sow now" list is worked out from the cut windows, so a later frost can bring a crop back into it. The line under the list names the crops the frost date has ruled out.
Why is it always 14 October?
Nothing here reads the clock. AS_OF is "now" for the line on the ruler and for the "Can sow now" list, so the block looks the same on any day. Change AS_OF to move it.
How can I read the ruler without seeing the bars?
The bars are a drawing. Each crop row carries its windows in words ("Sow early Oct to late Nov"), the three kinds are told apart by pattern and word in the legend, and the "Can sow now" band is a list with a polite status line.