Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Progress Bar List Stats Block for Solid

Six launch milestones in one hairline frame, each with its owner and due week, its count against the target, the percentage and a Progress bar, under a headline that counts the milestones done.

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

A progress list for Solid with Ark UI. A start-aligned header counts the milestones that are done ("3 of 6 milestones are done"), and one hairline frame with + marks on its corners holds six rows. A row has the milestone, its owner and its due week at the start and, at the end, the count against the target ("118 of 140 pages"), the percentage and a bar. The bars are the catalog's Progress in foreground weights: a finished milestone's bar is solid and carries a check and the word "Done", the others a weight lighter, so completion never relies on colour. The percentages are rounded down, so a row never reads 100% before it is done. The done count, the percentages and the headline are worked out from the typed counts when the module loads. For launch checklists, quarterly goals, onboarding and any list of things with a target.

FAQ

How do I change the milestones?

Edit MILESTONES: a label, an owner, a due week, the current count, the target and the unit you count in (plural, as it reads after "of 140"). The percentage, the done flag, the headline count and each bar's accessible name come from those numbers. A milestone is done when the count reaches the target.

How is a finished milestone shown?

By its words and its weight, not by colour: the row says "Done" next to a check and "100%", and the bar is the solid foreground where the unfinished bars are a lighter mix of it. The headline counts the finished rows, so it always agrees with the list.

How are the bars named for assistive technology?

Each bar is named with its row's facts ("Docs pages rewritten: 118 of 140 pages, 84%"), so a screen reader that lands on the bar hears the milestone, not just a number. The name comes from the Progress translations, because Ark's Progress ignores aria-label.

Is it accessible?

Yes. The rows are a description list: the milestone is the term and its owner, count and percentage are the descriptions, all as text. Counts sit in bdi elements so right-to-left pages keep "118 of 140" together. The bars add the picture and nothing the text doesn't say.

How does it fit on a phone?

Each row stacks: the milestone and its owner on top, then the count, the percentage and the bar. The frame runs between the rails and nothing scrolls sideways at 320 pixels.

All 122 stats blocks