shadcn.io is not affiliated with official shadcn/ui
Countdown Events Carousel Block for Ark UI
Six town events on a hairline track that opens on the next one, each with a kind, place, fixed date and a day count worked out from one typed date, ended events dimmed, and a Next event button that comes back to it.
Installation
Overview
Count down to what is coming without a ticking clock, with this countdown events carousel for React with Ark UI. Eventfold, an events calendar, lists six events in one ruled panel. Each cell is a hairline cell with a kind tag, the name, the place, a fixed date, and a day count worked out from one typed AS_OF date ("9 days to go", or "Today", "Tomorrow"). Events that have ended sit before the next one on a solid tint with "Ended" and their date, and the next event wears a "Next up" tag. The track opens on that next event, so what is coming is what you see first; a Button in the toolbar band, "Next event", brings the track back to it from anywhere and says so in the foot. Under the track the foot holds the counter ("Events 4–6 of 6"), a dot for each step and Previous and Next that stay in the tab order at the ends. Three events show from the large breakpoint, two from medium and one with the next peeking on a phone. The ruled bands come from Guides. It's built from Carousel, Button, Badge and Guides, with CSS transitions only. The events and dates are made up.
FAQ
How do I use my own events?
Edit EVENTS (an id, a kind, a name, a place and an ISO date) and set AS_OF to the day the counts should be worked out from. The day count, the "Ended" state, the "Next up" tag and the opening position all come from those two things: NEXT is the first event whose date is not before AS_OF, and the track opens there. Keep the events in date order.
Why does nothing tick?
A count that changes every second is noise for most pages and a problem for people who are sensitive to motion, so the counts here are whole days against a fixed day. To count against the real day, set AS_OF from your server's date when the page is built or loaded; there is no timer to stop or pause. If you need hours and minutes, add a timer that you can pause and keep a screen-reader sentence that does not change every second.
What does Next event do?
It moves the track to the next upcoming event, wherever you have scrolled to, and the foot says "Back at Harbour day, in 9 days". Moving the track any other way clears that line. At the very end of the list the last page stops short of a full step, so the next event may sit second or third in view.
The track opens on NEXT because the controlled page starts there.
How does it work with a keyboard?
Tab reaches Next event, Earlier events, the dots and Later events. With focus inside the panel, the arrow keys move the track by one event (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, so focus never disappears. Events that are out of view are hidden from the tab order and from screen readers.