shadcn.io is not affiliated with official shadcn/ui
Roadmap Carousel Block for Svelte
An eight-quarter product roadmap with a minimap of pips and a frame over the quarters in view, a track of quarters two at a time with Shipped, In progress and Planned items, a Now marker and a Jump to now button.
Installation
Overview
Show what shipped, what is underway and what is planned without a wall of columns, with this roadmap carousel for Svelte with Ark UI. Pathfolio, a product-planning app, lays out eight quarters (Q1 2026 to Q4 2027) with three items each. Above the track a minimap shows the eight quarters as cells with three pips for their items' states, and a frame over the quarters in view; a press on a cell jumps there and the frame slides. The track shows two quarters at a time (one, with the next peeking, on a phone), each listing its items as a glyph, a title and a state word: Shipped, In progress or Planned. The quarter that holds the fixed date is marked Now. A toolbar band counts the shipped items ("9 of 24 shipped"), and the foot holds the counter, a "Jump to now" Button and Previous and Next. The ruled bands come from Guides. It's built from Carousel, Badge, Button and Guides, with CSS transitions only. The product, the items and the dates are made up for the example.
FAQ
How do I use my own quarters?
Edit QUARTERS: each has an id, a number, a year and a list of items with an id, a title and a state (shipped, progress or planned). The pips, the counts, the minimap names ("Q3 2026: 2 shipped, 1 in progress") and the shipped total all derive from that list. Set AS_OF to the day the page speaks from; the Now quarter is found from its year and month.
How does the frame know which quarters are in view?
It is derived from the page and the number in view (two from the medium breakpoint, one on a phone), as a share of the minimap, so it moves with a swipe, the arrow keys and the buttons, not only with a press on a cell.
The page is the Carousel's controlled page and the track moves one quarter at a time.
How does it work with a keyboard?
Tab reaches each minimap cell, Jump to now, Previous and Next. With focus in the track, the arrow keys move the track by one quarter (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous, Next and Jump to now stay in the tab order and are marked unavailable instead of disabled when they have nothing to do. Quarters out of view are hidden from the tab order and from screen readers.