shadcn.io is not affiliated with official shadcn/ui
Profile Checklist Progress Navbar Block for Solid
A one-bar navbar for a freelancer marketplace that tracks profile completion: a hairline fill along the bar's top edge, a percentage label, and a Complete profile button that opens a checklist whose boxes raise the percentage.
Installation
Overview
An app navbar for Solid with Ark UI that shows how much of your profile is done. A hairline fill in the foreground tone runs along the bar's top edge, over the rule, as wide as the share completed (60% here). The wordmark of Fulltilt, a freelancer marketplace, leads; Find work, My jobs and Messages follow as links; and at the end of the bar "60% complete" sits beside the Complete profile Shine Button, which opens a popover of five steps, each a checkbox worth a fifth: add a photo, write a headline, list your skills, set your rate, add a portfolio piece. Ticking one raises the percentage, the label and the fill together, with the fill easing to its new width (at once under reduced motion), and a polite line in the popover says "4 of 5 steps done". The checkboxes and the fill are foreground tones, so the Shine Button stays the only primary control. On a phone the label gives way to the fill and the links are in a sheet from the top. It's built from Popover, Checkbox, Field, Shine Button, Navigation Menu, Sheet and Guides. For marketplaces and apps that want profiles filled in.
FAQ
How do I change the steps and what's already done?
Edit STEPS (an id and a label each) and START, the ids done when the page loads. The percentage is done.length over STEPS.length, rounded, so every step is worth the same; the label, the fill and the popover's line all derive from it. Pass START from your server and send the ticked ids back from toggle, which is where to save them.
How is the fill drawn, and is it announced?
The fill is a 2-pixel div at the top of the header, inset-x-0, whose inner bar's width is the percentage, with a width transition; it starts at the inline start, so it grows from the right in right-to-left layouts. It's decoration: the number is in text. The label in the bar says it, and the popover's status line (a polite live region, present while the popover is open) says "4 of 5 steps done" as you tick, so a screen reader hears each change.
How does it work with a keyboard?
Enter or Space opens the popover and moves focus into it; Escape or a click outside closes it and puts focus back on the trigger. It isn't modal, so the rest of the bar stays reachable.
Tab walks the five steps and Space ticks the one that has focus; clicking a step's text ticks its box too. Each box is named by its step's label.
Why are the checked boxes dark and not the accent colour?
The catalog's checked box is the primary colour, and the Shine Button is meant to be the only primary control in the bar. The block gives the checked box and its row foreground tones (data-checked:bg-foreground and the equivalent for each library).
How does it work on a phone?
Below md the links fold into a menu button that opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was). The bar keeps the wordmark, Complete profile (below 368 pixels it reads "Complete", the full name kept for screen readers) and the menu button; the percentage label is read out but not shown, because the fill says it. The popover fits the screen at 320 pixels.