shadcn.io is not affiliated with official shadcn/ui
No Sprints Empty State Block for React
An 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.
Installation
Overview
Plan the first iteration instead of showing a blank board, with this no sprints empty state for React with Base UI. A whole screen with the page's rails and one band across it, split in two. At the start, for Pacewick, an agile planner, are the heading, one sentence and what a sprint needs: a slider for its length (1 to 4 weeks), a select for the day it starts, a number input for its capacity in points, and one line worked out from them ("Ends Fri 23 Oct. 10 working days, 2.4 points a day"). At the end a footbridge crosses a gap with one span for each week, the far span dashed until the sprint starts, over a timeline of the weeks with the first and last day under it. The Shine Button, the only colored control, starts the sprint: the far span turns solid, the weeks fill in and the form gives way to the result, with a Start over that puts everything back. The rails and the band come from Guides, and the whole block uses CSS transitions only. For the first sprint, iteration or cycle of any planner.
FAQ
What happens when I press Start sprint, and what stays in the page?
The sprint goes into the page's state: the far span of the bridge turns solid, the weeks of the timeline fill in and the form is replaced, in the same space, by "Sprint 1 is under way" with its dates, working days and points. Nothing is saved or sent: reload and the page is back to its start, and Start over resets it without a reload. To wire it for real, send the length, the start and the capacity to your API where the code says so, and show the sprint from the response.
Where do the dates come from?
The page's "today" is a typed day, Friday 9 October 2026, never the clock. The start select offers the next ten working days after it (Mon 12 Oct to Fri 23 Oct), and the end is the last working day of the sprint: a sprint is five working days a week, so two weeks from Monday 12 October ends on Friday 23 October, and the same sprint starting on a Wednesday ends on a Tuesday. All of it is worked out with UTC date arithmetic.
How is the pace worked out?
Capacity divided by the sprint's working days, to one decimal: 24 points over 10 working days is 2.4 a day. It changes as you move the slider or type a new capacity. The capacity field takes whole numbers from 1 to 200 and sets anything else to the nearest allowed number when you leave it; an empty one is refused when you press Start sprint.
Why a select and not a date picker for the start?
A sprint starts on a working day soon, and the page's "today" is fixed, so the choice is the next ten working days: a native select is the shortest honest control and has no popup to trap focus. With real dates, a date picker that closes weekends and the past is the usual choice.
Is it usable with a keyboard and a screen reader?
Tab walks the length slider (the arrow keys change it, and it reads as "2 weeks"), the start select, the capacity and Start sprint. The result takes focus when it replaces the form, and the polite status line says what happened. The bridge is hidden from assistive technology; the timeline is a list of the weeks with the first and last day as machine-readable dates. The slider keeps its left-to-right order in a right-to-left page, because it is a length.
Related
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
No Time Entries Empty State
Projects and tasksA timesheet with nothing logged yet: a form for the day, project, hours, minutes and a note, a drawing of five isometric day bars that rise as time is logged, and a table that fills in with one Log time button.
- Pro
No Schedules Empty State
Calendar and timeA shift planner with no schedules yet: a segment group for Daily, Weekly or Monthly, weekday chips, the next four dates worked out from a fixed today, a loop drawing that closes, and one Create schedule button.
- Pro
No Tasks Empty State
Projects and tasksAn empty three-column task board: dashed slots in To do, Doing and Done, an Add task in each column that opens an inline field, a select on each card to move it, and a message band with a drawn field of slots and one button.
- Pro
No Events Empty State
Calendar and timeA calendar window with no events yet: a rail of calendars, October 2026 as a month grid where you pick a day, a form that takes its title and start, and an agenda with a pushpin that fills in.
- Pro
No Bug Reports Empty State
Projects and tasksA QA tracker's page with zero open reports: a report form (a title, a severity and the steps), an empty glass jar whose dashed beetle turns solid, four severity counters and a small table that grows with each report.