shadcn.io is not affiliated with official shadcn/ui
Milestone Targets Onboarding Block for React
A launch planner's milestone step as a whole screen: three flags on a 120-day ruler that move as you type their days, three hairline cells for what to check, the measure, its target and the day, and a line that says what you review on the chosen flag.
Installation
Overview
Let new users plan their first check-ins, with this milestone step for React with Base UI. It is a whole screen of Stridemoor, a launch planner: the page's rails and one band, a step header ("Step 6 of 8" and a hairline), and a framed panel with a ruler of 120 days and a flag on it for each of three milestones, each flag on its own lane so nearby days never hide each other. Under the ruler a line says what you review on the chosen flag ("At 60 days you review Revenue: $5,000."), and three hairline cells hold the milestone's words (Input), its measure (Native Select: Users, Revenue or Features), its target and its day (Number Input). Type a day and its flag moves; days must climb and stay within 120, and a problem is a sentence under its cell. The one Shine Button is Save targets, with a ghost Skip for now. On a phone the ruler stays, and only the chosen milestone's cell shows: press a flag to switch.
FAQ
What does it check, and when does it say so?
Each milestone needs a description (up to forty characters), a target above zero and a whole day from 1 to 120, and each day must be later than the one before. A problem shows as a sentence under its cell once you leave one of its boxes, or all at once when you press Save targets; the first one takes focus. While a day is invalid its flag stays on the last good day, so the ruler never shows something that is not allowed.
How does the ruler work?
Every flag's position is its day over 120, set with a CSS variable, so it moves with a short transition (none with reduced motion). Each milestone has a fixed lane, one above the other, so flags on days close together stay readable. The ruler is always drawn left to right, even on a right-to-left page, because a calendar line reads one way. The flags are buttons: pressing one chooses that milestone, updates the line under the ruler and puts focus in its day box.
How do the number boxes behave?
They accept whole numbers only, with no minimum or maximum enforced as you type, so a wrong value can be corrected by typing rather than being changed under you; the rules above report it instead. The flag moves as you type. Arabic-Indic digits typed on a right-to-left page are read as ordinary digits.
What stays local in the demo, and how do I wire it?
Everything: Save targets only says "Saved in this demo", and Skip for now only says so too. In your app send rows from save once there are no problems, and load the saved rows into START. The three measures are a typed list; add your own with their units in METRICS and goalOf.
Can I use it from the keyboard?
Yes. Tab goes through the flags, then each cell's boxes in reading order. The arrow keys change a number in its box, and the select opens with Space or the arrow keys. Each flag is named with its milestone and day ("Milestone 2, day 60") and says whether it is chosen.
How does it look on a phone?
The ruler shrinks to the width of the screen with its three lanes, the line under it says which milestone is chosen, and below it only that milestone's cell shows, so the form stays short. Pressing another flag swaps the cell. The actions are pinned to the bottom of the screen.
Related
- Pro
Goal Setting Onboarding
One choiceA goal question split in two: four goals as radio rows on one side and the plan the pick makes on the other, three things to set up with an Include switch each and one sentence that counts what stays.
- Pro
Success Metrics Onboarding
Several choicesA setup panel split in two: four metric cards, up to three, and a scorecard that gains a row with a target box for each one picked, saying how far the target is from today.
- Pro
Setup Progress Onboarding
ChecklistsA teachers' app's setup progress as a whole screen: a big rolling percent over a bar, a line of steps done and minutes to go, one button that finishes the next step, and three foldable bands that list every step as Done, Next up or To do.
- Pro
Case Quantity Number Input Form
Numbers and pickersA quantity field that sells in cases of six: typing a number snaps it up to a whole case on leaving, the keys and buttons move one case or five, and the line total is worked out in whole cents.
- Pro
Achievement Trail Onboarding
Milestones and recapsA language-learning app's first-run trail: eight milestones along a winding path drawn from hairlines, three reached, a you-are-here ring, a hover card per node, a rolling count and progress, and a button that previews the next unlock.
- Pro
Certification Onboarding
Milestones and recapsA certificate step drawn as a stair of three exams: choosing a step takes every step below it, a tab lists the path, and another asks a practice question that answers on the spot.