Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Onboarding Progress Dashboard Block for React Aria

Five onboarding steps with the people who reached each, their share of the cohort, the median time to get there and a count stuck over three days that opens who they are, with a dialog previewing the nudge email.

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

Find where new users stall and decide who to nudge with this onboarding progress dashboard for React with React Aria. A hairline frame with a plus mark on each corner holds a table of five steps, from account created to upgrade: how many people reached each, their share of the cohort with a small bar, the median time to get there from the step before and, for every step but the last, a count of people stuck there for over three days. A Native Select in the header switches between this month's cohort and last month's. Pressing a count opens a band of those people's initials in Avatars with how long each has waited, and the foot's Shine Button, Send nudge, opens a Dialog with the email they would get. Nothing is sent. It's built from Table, Native Select, Dialog, Avatar, Button, Shine Button and Guides, with a CSS entrance only. For product-led growth teams and customer success.

FAQ

How do I fill it with my funnel?

Edit STEPS and COHORTS. Each step has a name, the nudge text for people stuck after it and a list of those who waited longest (initials and days). Each cohort has, per step, how many people reached it, the median time to reach it and how many are stuck over three days. The shares, the biggest drop in the sentence and the dialog's text are worked out from those.

What counts as stuck?

Someone whose last step was this one and who has done nothing for over three days. The count is for the whole cohort; the band shows the eight who have waited longest and says how many there are in all. The last step has no count because nobody can be stuck after it.

Does Send nudge send anything?

No. It opens a preview of the email for the step you chose and says "Nothing was sent", and the status line in the foot says the same after you close it. With no step chosen the button answers instead of opening. To make it real, send the email from your server to the people behind the count, and log that you did so the next count leaves them out.

What stays local?

All of it: the figures and the people are typed, and choosing a cohort or a step only changes what the page shows. Reloading starts over. Load the step counts from your events, and keep the same definition of stuck in the query and in the label.

How does it look on a phone?

Each step is a card row: the name with its reached count, share and median folded under it, and the stuck count as a button at the end. The band of people wraps, and the foot stays pinned to the bottom of the screen with Send nudge in it.

All 200 dashboard blocks