shadcn.io is not affiliated with official shadcn/ui
No Milestones Empty State Block for React
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.
Installation
Overview
Plant the first milestone on a timeline instead of a blank list, with this no milestones empty state for React with Base UI. A header sits over one framed panel for Cairnwise, a goals tracker. The first band is a ruler from Friday 9 October 2026 to the end of December, with a tick a week, and a dashed flag on a dashed pole at the date you have chosen, showing the name you are typing. The second band holds four target dates (31 Oct, 15 Nov, 30 Nov and 15 Dec) in a Toggle Group and a Field with an Input for the name. The Shine Button, the only colored control, plants the flag: it turns solid with a Checkbox on it, and ticking the box marks it done. The count above the ruler is worked out from the flags, for example "2 milestones, 50% complete". The frame's corners and band rules come from Guides, and the whole block uses CSS transitions only.
FAQ
What happens when I press Add milestone, and what stays in the page?
The milestone goes into the page's state: a solid flag with its name stands on the chosen date, the count reads "1 milestone, 0% complete" and the status line says it was planted in this demo. Nothing is saved: reload and the timeline is empty again, and Start over clears it without a reload. To wire it for real, send the name and the date to your API where the code says so.
How is the percentage worked out?
From the flags on the timeline: the number ticked, divided by the number planted, rounded to a whole percent. It is never typed twice, so ticking or unticking a flag changes the heading and the status line says the new figure.
Where do the dates come from?
The ruler's start, Friday 9 October 2026, and the four targets are typed constants, never the clock. A flag's place is its day's position between the start and 31 December. Each date holds one flag, so four is the most, and picking a taken date is refused in words under the name.
Is it usable with a keyboard and a screen reader?
The dates are one group you move through with the arrow keys. Each flag has a checkbox named "Done: " and its name, in a list named Milestones, and the status line announces each addition and tick. The ruler takes the keyboard so it can be scrolled sideways.
Related
- Pro
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.
- 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 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 Reminders Empty State
Calendar and timeA reminders app with nothing set: a Remind me popover drawn open over a note with three empty slots, an hourglass whose sand has not fallen, a field and three presets that write a day and time, and one Set reminder 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 Projects Empty State
Projects and tasksA projects table with nothing in it yet: a dashed, editable first row where you type a name and press Enter, three drawn ghost rows fading into the card, and a message band with one Create project button.