Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Achievement Trail Onboarding Block for React

A 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show someone the road ahead, not just the next step, with this achievement trail for React with Base UI. It's the learning trail of Plumbridge, a language-learning app, in a framed panel with a plus mark on each corner. A band names the trail and counts it, “3 of 8 unlocked” with a Sliding Number that rolls, over a Progress hairline. Under it eight milestones wind along a path drawn from hairlines: along one row and back along the next, three reached and filled, five locked ahead, and a double ring and a “You are here” pill on the latest. Each node is a button: hover it, focus it or tap it and a Hover Card says what it unlocks and the reward. The foot says where you are and what's next, and a ghost Button, Preview next unlock, moves the ring one node on and fills that node in; at eight it becomes Start over. Below the medium breakpoint the trail runs down the page. For learning apps, loyalty programmes and any first-run roadmap.

FAQ

How do I change the milestones?

Edit MILESTONES: each has an id, a name, a week, what it unlocks and its reward, and START is how many are reached when the page loads. The path's shape comes from each milestone's link classes, which place it in the grid and join it to the one before; the turn at the end of the first row is ELBOW. Eight in two rows of four is what the layout is drawn for, so for a different count rework link and the grid columns rather than only the list.

How do the cards open, and what about touch and keyboards?

A card opens on hover, and the block opens it on focus and on a tap too and closes it on blur or Escape, because the library's hover card only reacts to the pointer.The same words are in the page for everyone else: a screen reader hears what a node unlocks as its description, and the foot always spells out the current node and the next one, so nothing depends on hovering.

What does Preview next unlock really do?

It only moves the ring and fills the next node in this page's state, and says so in a polite status message, “Preview: Getting around unlocked, 4 of 8.” Nothing is awarded or saved. In your app unlock from real progress: set the reached count from your data and drop the button, or keep it behind a staff flag to demo the trail.

How do I tell reached from locked without colour?

Reached nodes are filled with a check and the word “unlocked” under them; locked ones are an outline with a lock and the word “locked”. The current one adds the ring and the pill, so state is carried by shape and words, and the hairline joining two reached nodes is solid. The count and the progress bar follow in numbers.

Does the trail flip for right-to-left languages?

No, on purpose. The path is a drawing, like a map: it always runs along the first row and back along the second, so its lines and the order of its nodes never mirror. The words around it, the count and the cards read in the page's direction.

How does it look on a phone?

The nodes stack in one column, 44 px round so they're easy to tap, joined by a vertical line, each with its name, week and state beside it. The cards open on tap and the foot says what's next, with the preview button full width.

  • Pro

    Achievement Notification

    A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.

  • Pro

    Learning Track Picker Onboarding

    One choice

    A course library's first-run track picker as a whole screen: three tracks in a single-open accordion where the open row is the choice, its first lessons, and a line and a button worked out from the pick.

  • Pro

    Milestone Targets Onboarding

    Milestones and recaps

    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.

  • Pro

    Setup Progress Onboarding

    Checklists

    A 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

    Setup Checklist Onboarding

    Checklists

    A contract tool's get-started guide as a setup panel: six steps in a single-open accordion with one button in the open step, a count that follows what you finish, a menu that hides completed steps or the guide, and a pill that opens it again.

  • Pro

    Setup Wizard Onboarding

    Profile and account

    A team workspace's first-run wizard as a whole screen: a rail of four steps (account, workspace, invites) that ends on a recap of every answer with an Edit button per section, and a Continue that checks each step first.

All 43 onboarding blocks