Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

User Retention Dashboard Block for Vue

Retention curves for six monthly signup cohorts: tick the cohorts to compare, read week 0 to 12 on one chart with a dashed average, and check weeks 1, 4, 8 and 12 in a small table.

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

See whether newer users stay longer than older ones with this user retention dashboard for Vue with Ark UI. A hairline frame with a plus mark on each corner has a list of six monthly signup cohorts, April to September, each with its user count and a checkbox. Beside it, a hand-built chart draws the checked cohorts' retention from week 0 to week 12: every cohort has its own marker shape and a line that gets heavier with recency, so the curves tell apart without colour, and a dashed line is the average of the cohorts old enough to have each week. A small table under the chart lists weeks 1, 4, 8 and 12 for each checked cohort and for the average. Two cohorts always stay checked. It's built from native checkboxes, a table and Guides, with a CSS entrance only. For product analytics, lifecycle reports and any review of whether changes are working.

FAQ

How do I fill it with my cohorts?

Edit COHORTS: each has a month, the number of users who signed up, and rates, the percent still active in week 0, 1, 2 and so on. A cohort that is too new simply has a shorter list, so its line and its table cells stop where the data stops. The chart, the table, the average and the sentence under the title are worked out from those lists.

What does the dashed average mean?

For each week it is the mean of the checked cohorts that have a figure for that week. Because newer cohorts drop out of the later weeks, the average at week 12 describes the older cohorts only. The caption under the chart says so, and the table shows a dash where a cohort has no figure yet.

Why can't I uncheck every cohort?

A single curve has nothing to compare it with, so the list keeps two checked. Unchecking the second-to-last one leaves it checked and the status line says to keep at least two.

What stays local, and how do I wire it for real?

Everything: the rates are typed and the choice of cohorts is not saved. To make it real, compute each cohort's weekly retention from your events, decide what counts as active in a week, and load the result in the same shape.

How does it look on a phone?

The cohorts become a row of chips that scrolls sideways above the chart, and each chip keeps its checkbox. The table scrolls sideways inside its frame, and the status line keeps its height as you check and uncheck.

All 200 dashboard blocks