shadcn.io is not affiliated with official shadcn/ui
Ribbon Timeline Block for Vue
A growing season drawn as one four-segment ribbon sized by days, with five field tasks pinned above it and three weather and soil events below, a Select that swaps the field, a today notch and a strip with the text and date of the chosen pin.
Installation
Overview
Show a season as a band with things pinned to it, with this ribbon timeline for Vue with Ark UI. It is written for Tillery, a fictional farm planning tool. A hairline frame with a plus mark on each corner holds one ribbon from 1 March to 30 November, cut into Sowing, Growth, Harvest and Fallow by chevron folds and sized by the days of each, with a notch for today. Five field tasks hang above the ribbon and three weather and soil events below it on thin connectors, each at its date. Pressing a pin opens its title, kind, date, how far away or how long ago it is, and its note in a strip under the figure. A "Field" Native Select in the header swaps the whole set between the north and south fields, whose seasons run a few weeks apart, and a badge says which stage is under way now. On a phone the pins become two lists, "Above the ribbon" and "Below the ribbon", under the ribbon, so nothing is cut off. It is built from Native Select, Badge and Guides, with an entrance only. For crop plans, campaigns, school years and any period with stages and dated notes. The fields are example data.
FAQ
How do I change the stages or the pins?
Edit FIELDS at the top of the file. Each field has segments (an id, a label and ISO from and to dates that should tile the season) and pins (an id, an ISO date, a title, a note and a side of above or below). Positions are percentages of the season set by SEASON_START and SEASON_END.
What if two pins are close together?
Pins are 6 rem wide, so keep dates at least about five weeks apart on a season of this length or shorten the titles. The phone lists never overlap, and every pin is also named in the strip when you press it.
How is today placed?
From AS_OF, as a notch on the ribbon, the word "Today" under it, the badge in the band heading and the day count in the footer. It is not read from the clock, so the page reads the same on the server and in every browser.
What stays in the page, and how do I wire real data?
The chosen field and pin are local state and nothing is saved or sent. For real work, pass your tasks and events in the same shape. Weather and soil events would come from your sensors or a forecast service on your back end.
Is it accessible, and does it work in a right-to-left page?
Every pin is a native button named with its title and date and marked with aria-pressed, the ribbon itself is decoration beside a written legend with each stage and its dates, and a polite status line says what was chosen. The time axis does not mirror in Arabic or Hebrew, so spring stays at the start of the ribbon, while the text around it follows the page.