shadcn.io is not affiliated with official shadcn/ui
No Roadmap Empty State Block for React
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 React with Base 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.
Related
- Pro
A goals tracker with no milestones: a timeline from today to the end of December with a dashed flag where the next one will stand, four target dates, a name field and flags with a checkbox that work out the percentage complete.
- Pro
No Sprints Empty State
Projects and tasksAn agile planner with no sprint yet: a slider for one to four weeks, a start day and a capacity, an end date worked out from them, a footbridge drawing with a span for each week, and one Start sprint button.
- Pro
No Widgets Empty State
Data and analyticsA start page editor with nothing on it: a framed window with a canvas of twelve dashed slots, a tray of four widgets and one Add a chart button, where each widget draws a small chart, table, number or note in the next free slot.
- Pro
No Feature Requests Empty State
Social and feedbackA roadmap board's first request with a duplicate check: a drawn seedling with a dashed leaf, a title field that shows the two closest of three sample ideas with an Upvote instead button, and a list of two places for your requests.
- Pro
No Dashboards Empty State
Data and analyticsA reporting tool's dashboards page before the first one: a framed window with a list pane and a dashed New dashboard row, and a page that asks for a layout from three drawn thumbnails before it creates the dashboard.
- Pro
Email Client Sidebar
App contentA mail client in a fixed-height window: mailboxes and labels whose counts follow the mail you file, a searchable message list beside the open message, and Compose for a local draft.