Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Achievement Trail Onboarding Block for Solid

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 Solid with Ark 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, on keyboard focus and on a tap, and Escape closes it, which is how the hover card behaves out of the box.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.

All 100 onboarding blocks