shadcn.io is not affiliated with official shadcn/ui
No Roadmap Empty State Block for Svelte
A product roadmap with nothing on it: a framed window with Now, Next and Later lanes over four quarters, a tick for today, a small form that draws a bar on its lane, and a drawn road to the horizon whose signposts turn solid.
Installation
Overview
Show an empty roadmap as the lanes it is about to fill, with this no roadmap empty state for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds the roadmap of Sextantly, a product-roadmap tool, as a window of one fixed height: a top bar with the page's name and the Shine Button, the only colored control, then three lanes (Now, Next and Later) over four quarters counted from Friday 9 October 2026, with a tick for today. Every lane starts with a dashed bar where its first initiative will go. Under the lanes a small form takes a name in an Input, a lane in a Native Select and a span of one to four quarters on a Slider; the top bar's button submits it and a solid bar appears on its lane. Beside the form, from a desktop width, a drawn road runs to the horizon with three signposts, each only dashed until its lane has an initiative. The frame comes from Guides, and the whole block uses CSS transitions only.
FAQ
What happens when I press Add initiative, and what stays in the page?
A solid bar with the name is drawn on the chosen lane, starting in that lane's quarter and running for the span you set, the heading counts the initiatives and the lane's signpost turns solid. Nothing is saved: reload and the lanes are empty again, and Start over clears them without a reload. To wire it for real, send the name, lane and span to your API where the code says so.
Where do the quarters and the today tick come from?
From a typed "today", Friday 9 October 2026, never the clock. The four quarters start at the one that day falls in (Q4 2026) and the tick is placed from the day's position inside it. Now begins in the first quarter, Next in the second and Later in the third, so a bar can only run as far as the grid ends: the slider's maximum follows the lane.
Why does a lane hold only two bars?
The window has a fixed height, so each lane has two rows and the demo keeps six initiatives in all. A third bar on a lane, or a seventh overall, is refused in words under the form. With real data, let the lanes grow or scroll.
Is it usable with a keyboard and a screen reader?
Tab reaches the top bar's button, the name, the lane and the slider; the arrow keys move the slider. Pressing Add initiative with no name says so and puts focus back in the field. Each bar reads its name, lane and quarters ("Offline mode, Now, Q4 2026 to Q1 2027"), and a polite status line announces every addition. The scrollable lanes take focus so a keyboard can scroll them.