Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Dense Checklist Progress Stats Block for Ark UI

A dense onboarding checklist for a customer-success tool, ten steps in a three-part row beside a summary of how far new accounts get.

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 dense checklist for React with Ark UI. Setupmoor, an onboarding guide, puts a short summary of this week's cohort beside ten steps. Each step is three parts on one line: the name, a hairline Progress bar and the percent of accounts that finished it. The heading's "52%" is the cohort's average across those steps, and the three facts (accounts, steps, how many every account has finished) are read from the same STEPS array. From lg a divider splits the summary from the list and meets the top rule; on a smaller screen the summary comes first. The block has no state: it's Guides, Progress and a CSS transition on the summary. For the numbers section of a customer-success or product-led page.

FAQ

How do I change the steps?

Edit ACCOUNTS and STEPS at the top of the file. Each step is a label and a done count, out of ACCOUNTS. The percent, the bar and its accessible name are computed from those. Keep the labels short: the name column is eight rems, and a longer one truncates.

Where does the heading's percent come from?

It is the sum of every step's done, divided by the accounts times the number of steps, rounded. It is not a number typed beside the data. The "All finished" fact counts steps where done has reached ACCOUNTS. One step in the sample is there, Workspace, so the fact reads 1.

Why isn't the checklist in its own card?

The list is the narrow panel: max-w-2xl, ten rows at py-2.5, divided by hairlines. The block's line is the split, not a second frame. From lg the list's column draws a start border, with a + where that border meets the top rule. Below lg a top rule separates the summary from the list.

Is the checklist accessible?

Yes. The facts and the steps are description lists. Each fact's label is read before its number, even though the number is drawn above it. Each bar is a progressbar named with the step and how many accounts finished it, so "89%" in the row and the bar agree. Values sit in bdi.

What happens on a phone?

The summary is first in the markup, so the heading and the three facts come before the ten rows. The rows stay three columns: a short name, the hairline, the percent. The hairline is the catalog's default height, thinner than the bars in the milestone list.

What moves?

The summary fades up once. The ten rows do not: on a phone they run past the first screen, and a fade there would be caught half way. With reduced motion the summary simply appears. The bars don't grow in.

All 122 stats blocks