shadcn.io is not affiliated with official shadcn/ui
Weather Forecast Carousel Block for Vue
A nine-day forecast strip that opens on today, with a line glyph and a word for each day, high and low temperatures on bars that share one scale, rain chance and wind, and a Today button that returns to it.
Installation
Overview
Show a week at a glance, with this weather forecast carousel for Vue with Ark UI. Barometry, a forecast app, shows nine days in one ruled panel: two days already observed, today and six days ahead. Each narrow hairline cell has a weekday and date, a line glyph with the weather in a word ("Drizzle", "Part cloud"), the high above a range bar and the low below it, the chance of rain and the wind. Every bar sits on one shared scale, so any two days compare by eye; days gone by are muted, and today is ringed and marked aria-current="date". The track opens on today, and a Button in the foot, "Today", comes back to it from anywhere and says so. A dot for each step and Previous and Next that stay in the tab order at the ends complete the foot. Five days show from the large breakpoint, four from medium and two and a bit on a phone. The ruled bands come from Guides. It's built from Carousel, Button and Guides, with CSS transitions only. The weather is example data, typed in whole degrees; the demo reads no live feed.
FAQ
How do I use real forecast data?
Replace DAYS with your feed: each day has an ISO date, a high and low in whole degrees, a rain percentage, a sky (sun, partly, cloud, drizzle, rain or fog) and a wind in km/h. AS_OF is the day that counts as today, and the track opens there. The bar scale is worked out from the lowest low and the highest high in the list, padded by a degree each way, so the bars always fit. To show Fahrenheit, convert the numbers and change the unit in the cell and the header.
Why do all the bars share one scale?
A bar that is scaled to its own day tells you nothing when you compare two days. Here every bar is drawn between the same lowest and highest temperature of the whole strip, so a longer or higher bar is a warmer or wider day. The scale is printed in the header sentence.
What does a screen reader hear?
The drawing of each day is hidden from assistive technology and replaced by one sentence: "Wednesday Oct 14, today: part cloud, high 16 degrees, low 8, 10 percent chance of rain, wind 12 kilometres an hour." The foot is the block's one polite live region and says which days are whole ("Days 3–7 of 9") and, after Today, "Back at today, Wed Oct 14".
How does it work with a keyboard?
Tab reaches Today, Earlier days, the dots and Later days. With focus inside the panel, the arrow keys move the track by one day (mirrored in a right-to-left layout) and Home and End jump to the first and last page. The buttons stay in the tab order at the ends and are marked as unavailable instead of disabled. Days that are out of view are hidden from the tab order and from screen readers.
The track opens on today because the controlled page starts there.